Sommaire

BONJOUR
Musique "Invention BWV784" J.S. BACH 1685-1750

Tutoriel et Help

Style & CSS


France

Vu dans feuille de style.CSS

/************************************
Feuille de style de cfp.radio.free.fr
*************************************/

/* Attributs par defaut du body */
body {
    background-color: #F2E379;
    color: #000000;
    margin-left: 15px;
    margin-right: 30px;
}

/* Fonte de carcatere pour tableau et body */
body, td, th, h1, h2 {
    font-family: sans-serif;
}

/* Mode presentation */
pre {
    margin: 0px;
    font-family: monospace;
}

/* Aspect des liens par defaut */
a:link {
    color: #000000;
    text-decoration: none;
}

/* liens deja visite */
a:visited {
    color: #000000;
    text-decoration: none;

}

/* Liens actifs */
a:active {
    text-decoration: none;

}
/* Aspect des liens en passant la souris dessus */
a:hover {
    text-decoration: underline;
    }

/* Format apr defaut des tableaux */
table {
    border-collapse: collapse;
}

/* Redefinition de center */
.center {
    text-align: center;
}

/* redefinition de center pour un tableau */
.center table {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* redefinition de center pour une ligne header */
.center th {
    text-align: center !important;
}

/* Cellules et lignes de tableaux par defaut */
td, th {
    border: 1px solid #000000;
    font-size: 85%;
    vertical-align: baseline;
}

/* fonte Header 1 */
h1 {
    font-size: 150%;
}

/* fonte Header 2 */
h2 {
    font-size: 125%;
}

/* Format des paragraphes */
.p {
    text-align: left;
}

/* Texte dans cellule fond bleu tres clair */
.ta {
    background-color: #DFF0F0;
    color: #000000;
    vertical-align: middle;
}
.tamc {
    background-color: #DFF0F0;
    color: #000000;
    vertical-align: middle;
    text-align:center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom:0px;
}
fieldset {
    border:1px solid #000000;
    padding-left: 10px;
    padding-right: 10px
}
legend {
    background:#F0F0F0;
    border:1px solid #000000;
    padding-left: 10px;
    padding-right: 10px
}

/* Texte dans cellule fond gris clair */
.tb {
    background-color: #EFF0F0;
    color: #000000;
    vertical-align: middle
}

/* Texte dans cellule fond gris clair avec marge de chaque cote */
.tbm {background-color: #EFF0F0;  color: #000000; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin-bottom:0px }
.tbmb {background-color: #EFF0F0;  color: #000000; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin-bottom:0px; font-size: 9pt }

.tbmc {background-color: #EFF0F0;  color: #000000; vertical-align: middle; text-align:center; padding-left: 10px; padding-right: 10px; margin-bottom:0px; }
.orga1 {border: 0px solid #000000; background-color: #EFF0F0;  color: #000000; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin-bottom:0px; font-size: 9pt }
.orga2 {border: 0px solid #000000; background-color: #C9FFCA;  color: #000000; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin-bottom:0px; font-size: 9pt }
.orga3 {border: 0px solid #000000; background-color: #EDFF9D; color: #000000; vertical-align: middle; padding: 10px;  margin-bottom:0px; font-size: 9pt }
.orga4 {border: 0px solid #000000; background-color: #666666; height: 2px}
/* Texte dans cellule pour les entete th par exemple) en fond violet texte centre */
.tc {background-color: #CCCCFF; color: #000000; text-align: center; }
.tcb {background-color: #CCCCFF; color: #000000; padding: 8px;	font-family: verdana ; 	font-size: 9pt }

.td {background-color: #cccccc; text-align: right; 	color: #000000; }

.te {background-color: #FFFFFF; color: #000000; text-align: center; }

.tl {
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
    font-family: verdana ;
    font-size: 9pt;
}

/* Pour texte dans une cellule avec de la marge de chaque cote */
.tf {
    background-color: #FFFFFF;
    color: #000000;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom:0px;
}

/* Pour afficher une image dans une cellule sans marge autour */
.ti {
    background-color: #FFFFFF;
    color: #000000;
    vertical-align: middle;
    padding: 0px;
}

/* Pour afficher une image dans une cellule sans marge autour */
.tdmenu {
    background-color: #000000;
    color: #FFFFFF;
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
    font-family: verdana ;
    font-size: 9pt;
    text-decoration: none;
    border: 0px
}

/* Pour afficher une cellule sans bordure en le centrant en hauteur sans changement couleur de fond */
.tg {
    border: 0px solid #000000;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom:0px;
}
.tn {
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom:0px;
    border: 0px
    }

/* Trait de separation 1 pixel depaisseur et noir */
hr {
    background-color: #000000;
    border: 0px;
    height: 1px;
}


France

Vu dans le site .... https://www.pascalchour.fr/liens.htm

/* css pour la gallerie    table_bordure_1   */

html, body {
  /* image fond qui entoure le contenu. Dégradé de bleu */
  background-image: url("../images/gallerie_fond .jpg");
  height: 100%;
  width: 100%;
  font-family: 'verdana';
  font-size:0.95em;
}
div#global {
  /* margin left-right auto pour centrage */
  margin:auto;
  width: 100%;
  /* taille max fenêtre affichage : tient dans 1024px. Plus facile à lire */
  max-width: 1000px;
  /*position: relative;*/
  background: none;
}

div#content {
  /* fond noir */
  background:black;
  /* marges hautes et basses pour que le fond du "body" entoure le contenu */
  margin-top: 5px;
  /* padding texte dans le contenu */
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:15px;
  text-align: justify;
  color: white;
}

#content	a:link {text-decoration: none; color: yellow;}
#content    a:visited{text-decoration: none; color: yellow;}
#content	a:hover {color:#c0ffff; text-decoration: none;}

/* pour forcer un espace entre le bas
/* du tableau et la fin de la fenêtre
/* du navigateur (pb sur ie et chrome */
div#marge-fin {
  background: none;
  text-align: left;
}

/* ligne de séparation */
.separation {
  background-image: url("../images/bar_hor.jpg");
  background-repeat: no-repeat;
  width: 100%;
  height: 5px;
  padding: 0;
}

.attr_image {
    max-width:100%;
    border: 0px;
}

/* table pour tableau dans achathifi.html */
.table_bordure_1 {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border-width:1px;
    border-collapse: collapse;
   table-layout: fixed;
   word-wrap: break-word;
}
.table_bordure_1 td {
   border-width:1px;
   border-color:rgb(51,51,51);
   border-style:solid;
   text-align:left;
   border-collapse: collapse;
   vertical-align : top;
}

/* table sans bordure */
.table_sans_bordure {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    border-width:0px;
    border-collapse: collapse;
}
.table_sans_bordure th,td {
   border-width:0px;
   border-collapse: collapse;
   vertical-align: top;
   padding:5px;
}

/* titre de la page */
.titre {
      font-family:"Arial";
      text-align:center;
      color:#FF9900;
      font-size:200%;
      font-weight: bold;
}

/* énumération des caractéristiques */
.carac {
      color:#FFCC00;
      font-size:0.9em;
}

/* indication de la date de la page */
.date_page {font-size: 70%; align:right;}

p,li {font-size: 100%; color:white;}

.btn1 {
text-decoration: none;
padding: 10px;
line-height:45px;
font-family: arial;
font-size: 1em;
color: #FFFFFF;
background-color: #7f7f7f;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.btn1:hover {
padding: 10px;
background-color: #595959;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.absbottomcss{
margin: 0px;
padding: 0px;
position:relative;
top:2px;
}

.changecouleur {
  width:100%;
  height:100%;
  animation: myanimation 1s infinite;
}

@keyframes myanimation {
  25%{background-color:lightgray;}

}


France

Vu dans le site .... DatasheetsPDF.com

@charset "utf-8" ;
@media only screen and (min-width: 1025px) and (max-width: 10000px) {
body, td, select, input, div, form, textarea { font-family: Tahoma, dotum, arial, verdana; }

h1 {
    font-size: 20px;
    font-weight: bold;
    line-height: 0;
}
h2 {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

h3 {
    font-size: 15px;
    font-weight: bold;
    line-height: 0;
}

.searchcenter {
    text-align: center;
}

.searchcenter0 {
    text-align: center;
    font-size: 14px;
}

#searchdescript2 {
    margin:10px auto;
    line-height: 25px;
    color: #808080;
    font-family: Tahoma, dotum, arial, verdana;
    font-size: 14px;
    A{font-size:12pt;color:#ffffff;text-decoration: none;font-weight:bold;}
    A:link{font-size:12pt;color:#ffffff;text-decoration: none;font-weight:bold;}
    A:visited{font-size:12pt;color:#ffffff;text-decoration: none;font-weight:bold;}
    A:hover{font-size:12pt;color:#ffffff;text-decoration:underline;font-weight:bold;}
}

.pdfbox1 {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: #C0C0C0;
    font-family: Arial Black;
}

.searchbox {
    width:300px;
    height:35px;
    font-size: 20px;
}

.searchbut {
    height:48px;
    font-size:20px;
}

.searchcenter-1 {
    text-align: center;
    font-size: 14px;
}

.searchcenter-2 {
    text-align: center;
    font-size: 17px;
}

.searchcenter-3 {
    font-size: 15px;
}

.searchcenter-0 {
    text-align: center;
    font-size: 15px;
}

.searchcenter-4 {
    font-size: 14px;
}

.searchcenter-5 {
    font-size: 18px;
}

.PC{
display:none;
}

#PCPC{
display:none;
}

.pdftop {font-size: 15px;font-weight: bold;}
.pdfmiddle {font-size: 20px;font-weight: bold;}
.pdftop A:link{font-size: 18px;font-weight: bold;color: #000000;text-decoration:none;}
.pdftop A:visited{font-size: 18px;font-weight: bold;color: #000000;text-decoration:none;}

.listinglink {font-size:15pt;color:#000000;text-decoration:none}
.listinglink A{font-size:13pt;color:#4272db;text-decoration: underline;font-weight:bold;}
.listinglink A:link{font-size:13pt;color:#4272db;text-decoration: none;font-weight:bold;}
.listinglink A:visited{font-size:13pt;color:#4272db;text-decoration: underline;font-weight:bold;}
.listinglink A:hover{font-size:13pt;color:#4272db;text-decoration:underline;font-weight:bold;}

.tb_list {font-size:15px;color:#2E3192;text-decoration: none;font-weight:bold;}
.tb_list A{font-size:13px;color:#0066FF;text-decoration: underline;font-weight:bold;}
.tb_list A:link{font-size:13px;color:#0066FF;text-decoration: underline;font-weight:bold;}
.tb_list A:visited{font-size:13px;color:#0066FF;text-decoration: underline;font-weight:bold;}
.tb_list A:hover{font-size:13px;color:#0066FF;text-decoration:underline;font-weight:bold;}

}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px, Gutter: 30px, Unit: 32px */
@media only screen and (min-width: 100px) and (max-width: 1024px) {

h1 {
    font-size: 25px;
    font-weight: bold;
    line-height: 0;
}
h2 {
    font-size: 20px;
    font-weight: bold;
    line-height: 0;
}
h3 {
    font-size: 25px;
    font-weight: bold;
    line-height: 0;
}

.searchcenter {
    text-align: center;
}

.searchcenter0 {
    text-align: center;
    font-size: 14px;
}

#searchdescript2 {
    margin:10px auto;
    line-height: 25px;
    color: #808080;
    font-family: Tahoma, dotum, arial, verdana;
    font-size: 25px;
    A{font-size:12pt;color:#ffffff;text-decoration: none;font-weight:bold;}
    A:link{font-size:12pt;color:#ffffff;text-decoration: none;font-weight:bold;}
    A:visited{font-size:12pt;color:#ffffff;text-decoration: none;font-weight:bold;}
    A:hover{font-size:12pt;color:#ffffff;text-decoration:underline;font-weight:bold;}
}

.searchbox {
    width:300px;
    height:70px;
    font-size: 40px;
}

.searchbut {
    height:70px;
    font-size:40px;
}

.searchcenter-1 {
    text-align: center;
    font-size: 16px;
}

.searchcenter-2 {
    text-align: center;
    font-size: 30px;
}

.searchcenter-3 {
    font-size: 25px;
}

.searchcenter-0 {
    text-align: center;
    font-size: 25px;
}

.searchcenter-4 {
    font-size: 17px;
}

.searchcenter-5 {
    font-size: 35px;
}

.YN{
display:none;
}

#YNYN{
display:none;
}

.pdftop {font-size: 25px;font-weight: bold;}
.pdftop A:link{font-size: 25px;font-weight: bold;color: #000000;text-decoration:none;}
.pdftop A:visited{font-size: 25px;font-weight: bold;color: #000000;text-decoration:none;}

.listinglink {font-size:18pt;color:#000000;text-decoration:none}
.listinglink A{font-size:18pt;color:#4272db;text-decoration: underline;font-weight:bold;}
.listinglink A:link{font-size:18pt;color:#4272db;text-decoration: none;font-weight:bold;}
.listinglink A:visited{font-size:18pt;color:#4272db;text-decoration: underline;font-weight:bold;}
.listinglink A:hover{font-size:18pt;color:#4272db;text-decoration:underline;font-weight:bold;}

.tb_list {font-size:18pt;color:#2E3192;text-decoration: none;font-weight:bold;}
.tb_list A{font-size:18pt;color:#0066FF;text-decoration: underline;font-weight:bold;}
.tb_list A:link{font-size:18pt;color:#0066FF;text-decoration: underline;font-weight:bold;}
.tb_list A:visited{font-size:18pt;color:#0066FF;text-decoration: underline;font-weight:bold;}
.tb_list A:hover{font-size:18pt;color:#0066FF;text-decoration:underline;font-weight:bold;}

}


Vu dans ... https://www.lehtml.com/scripts/memoire/csshelp.htm

The Web Design Group
http://www.htmlhelp.com/

CSS1 Properties

  • Font Properties
  • Color and Background Properties
  • Text Properties
  • Box Properties
  • Classification Properties
  • Units
  • Syntax Used in Property Definitions

Font Properties

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Font Family

Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values: <family-name>
  • Any font family name may be used

<generic-family>

  • serif (e.g., Times)
  • sans-serif (e.g., Arial or Helvetica)
  • cursive (e.g., Zapf-Chancery)
  • fantasy (e.g., Western)
  • monospace (e.g., Courier)
Initial Value: Determined by browser
Applies to: All elements
Inherited: Yes

Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.

A sample font-family declaration might look like this:

P { font-family: "New Century Schoolbook", Times, serif }

Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. However, since both of them are serif fonts, the generic font family is listed as a backup in case the system does not have either of these but has another serif font which meets the qualifications.

Any font name containing whitespace must be quoted, with either single or double quotes.

The font family may also be given with the font property.

Font Style

Syntax: | font-style: <value>
Possible Values: | normal | italic | oblique
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this:

H1 { font-style: oblique }
P  { font-style: normal }

Font Variant

Syntax: | font-variant: <value>
Possible Values: | normal | small-caps
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be:

SPAN { font-variant: small-caps }

Font Weight

Syntax: | font-weight: <value>
Possible Values: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate will be chosen on the following basis:

  • 500 may be switched with 400, and vice versa
  • 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise
  • 600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise

Some example font-weight assignments would be:

H1 { font-weight: 800 }
P  { font-weight: normal }

Font Size

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)

Initial Value: medium
Applies to: All elements
Inherited: Yes

The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

Some example size assignments would be:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IE would probably be considered xx-large.

Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.

Font

Syntax: | font: <value>
Possible Values: | [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | Yes

The font property may be used as a shorthand for the various font properties, as well as the line height. For example,

P { font: italic bold 12pt/14pt Times, serif }

specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

Color and Background Properties

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Color

Syntax: | color: <color>
Initial Value: | Determined by browser
Applies to: | All elements
Inherited: | Yes

The color property allows authors to specify the color of an element. See the Units section for color value descriptions. Some example color rules include:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Background Color

Syntax: | background-color: <value>
Possible Values: | <color> | transparent
Initial Value: | transparent
Applies to: | All elements
Inherited: | No

The background-color property sets the background color of an element. For example:

BODY { background-color: white }
H1   { background-color: #000080 }

To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.

Authors may also use the shorthand background property, which is currently better supported than the background-color property.

Background Image

Syntax: | background-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The background-image property sets the background image of an element. For example:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

When a background image is defined, a similar background color should also be defined for those not loading images.

Authors may also use the shorthand background property, which is currently better supported than the background-image property.

Background Repeat

Syntax: | background-repeat: <value>
Possible Values: | repeat | repeat-x | repeat-y | no-repeat
Initial Value: | repeat
Applies to: | All elements
Inherited: | No

The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally.

Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.

Background Attachment

Syntax: | background-attachment: <value>
Possible Values: | scroll | fixed
Initial Value: | scroll
Applies to: | All elements
Inherited: | No

The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Authors may also use the shorthand background property, which is currently better supported than the background-attachment property.

Background Position

Syntax: | background-position: <value>
Possible Values: | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial Value: | 0% 0%
Applies to: | Block-level and replaced elements
Inherited: | No

The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)

The easiest way to assign a background position is with keywords:

  • Horizontal keywords (left, center, right)
  • Vertical keywords (top, center, bottom)

Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.

If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

The keywords are interpreted as follows:

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.

Authors may also use the shorthand background property, which is currently better supported than the background-position property.

Background

Syntax: | background: <value>
Possible Values: | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%.

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Text Properties

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Word Spacing

Syntax: | word-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The word-spacing property defines an additional amount of space between words. The value must be in the length format; negative values are permitted.

Examples:

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

Letter Spacing

Syntax: | letter-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The letter-spacing property defines an additional amount of space between characters. The value must be in the length format; negative values are permitted. A setting of 0 will prevent justification.

Examples:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

Text Decoration

Syntax: | text-decoration: <value>
Possible Values: | none | [ underline || overline || line-through || blink ]
Initial Value: | none
Applies to: | All elements
Inherited: | No

The text-decoration property allows text to be decorated through one of five properties: underline, overline, line-through, blink, or the default, none.

For example, one can suggest that links not be underlined with

A:link, A:visited, A:active { text-decoration: none }

Vertical Alignment

Syntax: | vertical-align: <value>
Possible Values: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial Value: | baseline
Applies to: | Inline elements
Inherited: | No

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

  • baseline (align baselines of element and parent)
  • middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
  • sub (subscript)
  • super (superscript)
  • text-top (align tops of element and parent's font)
  • text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

  • top (align top of element with tallest element on the line)
  • bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

Text Transformation

Syntax: | text-transform: <value>
Possible Values: | none | capitalize | uppercase | lowercase
Initial Value: | none
Applies to: | All elements
Inherited: | Yes

The text-transform property allows text to be transformed by one of four properties:

  • capitalize (capitalizes first character of each word)
  • uppercase (capitalizes all characters of each word)
  • lowercase (uses small letters for all characters of each word)
  • none (the initial value)

Examples:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

The text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.

Text Alignment

Syntax: | text-align: <value>
Possible Values: | left | right | center | justify
Initial Value: | Determined by browser
Applies to: | Block-level elements
Inherited: | Yes

The text-align property can be applied to block-level elements (P, H1, etc.) to give the alignment of the element's text. This property is similar in function to HTML's ALIGN attribute on paragraphs, headings, and divisions.

Some examples follow:

H1          { text-align: center }
P.newspaper { text-align: justify }

Text Indentation

Syntax: | text-indent: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | Block-level elements
Inherited: | Yes

The text-indent property can be applied to block-level elements (P, H1, etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph:

P { text-indent: 5em }

Line Height

Syntax: | line-height: <value>
Possible Values: | normal | <number> | <length> | <percentage>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The line-height property will accept a value to control the spacing between baselines of text. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Line height may also be given in the font property along with a font size.

The line-height property could be used to double space text:

P { line-height: 200% }

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.

Box Properties

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear

Top Margin

Syntax: | margin-top: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-top property sets the top margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

For example, the following rule would eliminate the top margin of a document:

BODY { margin-top: 0 }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Right Margin

Syntax: | margin-right: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-right property sets the right margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

P.narrow { margin-right: 50% }

Note that adjoining horizontal margins are not collapsed.

Bottom Margin

Syntax: | margin-bottom: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-bottom property sets the bottom margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Left Margin

Syntax: | margin-left: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-left property sets the left margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

ADDRESS { margin-left: 50% }

Note that adjoining horizontal margins are not collapsed.

Margin

Syntax: | margin: <value>
Possible Values: | [ <length> | <percentage> | auto ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The margin property sets the margins of an element by specifying between one and four values, where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Examples of margin declarations include:

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Horizontal margins are not collapsed.

Using the margin property allows one to set all margins; alternatively, the properties margin-top, margin-bottom, margin-left, and margin-right may be used.

Top Padding

Syntax: | padding-top: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-top property describes how much space to put between the top border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Right Padding

Syntax: | padding-right: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-right property describes how much space to put between the right border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Bottom Padding

Syntax: | padding-bottom: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Left Padding

Syntax: | padding-left: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Padding

Syntax: | padding: <value>
Possible Values: | [ <length> | <percentage> ]{1,4}
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.

An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width

Syntax: | border-top-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-top-width property is used to specify the width of an element's top border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-top, border-width, or border shorthand properties.

Right Border Width

Syntax: | border-right-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-right-width property is used to specify the width of an element's right border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-right, border-width, or border shorthand properties.

Bottom Border Width

Syntax: | border-bottom-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-bottom-width property is used to specify the width of an element's bottom border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-bottom, border-width, or border shorthand properties.

Left Border Width

Syntax: | border-left-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-left-width property is used to specify the width of an element's left border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-left, border-width, or border shorthand properties.

Border Width

Syntax: | border-width: <value>
Possible Values: | [ thin | medium | thick | <length> ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.

If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

One may also use the border shorthand property.

Border Color

Syntax: | border-color: <value>
Possible Values: | <color>{1,4}
Initial Value: | The value of the color property
Applies to: | All elements
Inherited: | No

The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Border Style

Syntax: | border-style: <value>
Possible Values: | [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial Value: | none
Applies to: | All elements
Inherited: | No

The border-style property sets the style of an element's border. This property must be specified for the border to be visible.

Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Top Border

Syntax: | border-top: <value>
Possible Values: | <border-top-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-top property is a shorthand for setting the width, style, and color of an element's top border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Right Border

Syntax: | border-right: <value>
Possible Values: | <border-right-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-right property is a shorthand for setting the width, style, and color of an element's right border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Bottom Border

Syntax: | border-bottom: <value>
Possible Values: | <border-bottom-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Left Border

Syntax: | border-left: <value>
Possible Values: | <border-left-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-left property is a shorthand for setting the width, style, and color of an element's left border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Border

Syntax: | border: <value>
Possible Values: | <border-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border property is a shorthand for setting the width, style, and color of an element's border.

Examples of border declarations include:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

Width

Syntax: | width: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.

This property could be used to give common widths to some INPUT elements, such as submit and reset buttons:

INPUT.button { width: 10em }

Height

Syntax: | height: <value>
Possible Values: | <length> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.

As with the width property, height can be used to scale an image:

IMG.foo { width: 40px; height: 40px }

In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file. However, scaling through the width and height properties is a useful option for user-defined style sheets in order to overcome vision problems.

Float

Syntax: | float: <value>
Possible Values: | left | right | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The float property allows authors to wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the images and tables that HTML 3.2 allows.

Clear

Syntax: | clear: <value>
Possible Values: | none | left | right | both
Initial Value: | none
Applies to: | All elements
Inherited: | No

The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. This property is similar in function to HTML 3.2's <BR CLEAR=left|right|all|none>, but it can be applied to all elements.

Classification Properties

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style

Display

Syntax: | display: <value>
Possible Values: | block | inline | list-item | none
Initial Value: | block
Applies to: | All elements
Inherited: | No

The display property is used to define an element with one of four values:

  • block (a line break before and after the element)
  • inline (no line break before and after the element)
  • list-item (same as block except a list-item marker is added)
  • none (no display)

Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification.

The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements!

Whitespace

Syntax: | white-space: <value>
Possible Values: | normal | pre | nowrap
Initial Value: | normal
Applies to: | Block-level elements
Inherited: | Yes

The white-space property will determine how spaces within the element are treated. This property takes one of three values:

  • normal (collapses multiple spaces into one)
  • pre (does not collapse multiple spaces)
  • nowrap (does not allow line wrapping without a <BR> tag)

List Style Type

Syntax: | list-style-type: <value>
Possible Values: | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial Value: | disc
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off.

Examples:

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

List Style Image

Syntax: | list-style-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property.

Examples:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

List Style Position

Syntax: | list-style-position: <value>
Possible Values: | inside | outside
Initial Value: | outside
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented. An example rendering is:

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

List Style

Syntax: | list-style: <value>
Possible Values: | <list-style-type> || <list-style-position> || <url>
Initial Value: | Not defined
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.

Examples:

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

Units

  • Length Units
  • Percentage Units
  • Color Units
  • URLs

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

  • em (ems, the height of the element's font)
  • ex (x-height, the height of the letter "x")
  • px (pixels, relative to the canvas resolution)

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

Percentage Units

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Color Units

A color value is a keyword or a numerical RGB specification.

The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB colors are given in one of four ways:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

The examples above all specify the same color.

URLs

A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

Examples:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

Syntax Used in Property Definitions

<Foo>
Value of type Foo. Common types are discussed in the Units section.
Foo
A keyword that must appear literally (though without case sensitivity). Commas and slashes must also appear literally.
A B C
A must occur, then B, then C, in that order.
A | B
A or B must occur.
A || B
A or B or both must occur, in any order.
[ Foo ]
Brackets are used to group items together.
Foo*
Foo is repeated zero or more times.
Foo+
Foo is repeated one or more times.
Foo?
Foo is optional.
Foo{A,B}
Foo must occur at least A times and at most B times.

Maintained by John Pozadzides and Liam Quinn

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.
http://www.htmlhelp.com


CSS Reference | SS64.com

  • ( SS64 )
  • Links
  • Syntax

CSS Reference - Cascading Style Sheets - A-Z

  animation    -name, -duration, -timing-function -delay -iteration-count -direction -fill-mode CSS3
  background   -Attachment -Color -Image -Repeat -Position
  background-Clip     The painting area of the background. CSS3
  background-Origin   The positioning area of the background images. CSS3
  background-Size     Size or resize a background image. CSS3
  border         -color -style -width  Set all 4 borders.
  border-bottom  -bottom-width  -bottom-style -bottom-color
  border-left      -left-width    -left-style   -left-color
  border-right    -right-width   -right-style  -right-color
  border-top        -top-width     -top-style    -top-color
  border-collapse     Collapse table borders.
  border-spacing      Distance between the borders of adjacent cells.
  border-image        Set a border image. CSS3
  border-radius -top-left-radius -top-right-radius -bottom-left-radius -bottom-right-radius CSS3
  bottom        Bottom position of a positioned element
  box-align     Align the child elements of a box. CSS3
  box-direction The direction in which children of a box are displayed. CSS3
  box-flex      Whether the children of a box are flexible or inflexible in size. CSS3
  box-ordinal-group  Display order of the child elements of a box. CSS3
  box-orient    Position child elements horizontally or vertically. CSS3
  box-pack      Define the horizontal or vertical position or a box. CSS3
  box-shadow    Attach one or more drop-shadows to the box. CSS3
  box-sizing    The CSS box model used to calculate the height and width of elements. CSS3
c
  clear         Set sides of an element where other floating elements are not allowed
  clip          Clip an absolutely positioned image/element.
  color         Text color
  column-gap    Gap between the columns. CSS3
  column-rule   -rule-color -rule-style -rule-width CSS3
  column-span   How many columns an element should span across. CSS3
  columns   -width  -count CSS3
  content       Insert generated content before or after an element.
  counter-increment  Increment one or more counters. CSS3
  counter-reset Create or reset one or more counters. CSS3
  cursor        The type of cursor to be displayed.
d
  direction     The text reading direction, left-to-right or right-to-left.
  display       Display an HTML element as a list/table/block.
f
  float         Shift to the left (or right) allowing other content to flow/wrap alongside.
  font      -family -size -style(italic/normal) -variant(small-caps) -weight(Normal/bold)
  @font-face    Download and use a web font.
  font-size-adjust  Attempt to normalise the font size. CSS3
  font-smoothing   Apply anti-aliasing to fonts.
h
  height        Height of an element.
  max-height    Maximum height of an element.
  min-height    Minimum height of an element.
  hyphens       How to split words to improve the paragraph layout. CSS3
  @keyframes    Control the intermediate steps in a CSS animation
l
  left           Left position of a positioned element.
  Letter-Spacing Increase or decrease the space between characters.
  line-height    Line height.
  list-style -image -position -type list-item markers.
m
  margin     -top -right -bottom -left
  marquee    -direction  -play-count  -speed  -style Moving content.
  max-width      Maximum width of an element.
  min-width      Minimum width of an element.
o
  opacity        Opacity level for an element. CSS3
  outline    -color -style -width
  outline-offset Offset an outline, and draw it beyond the border edge. CSS3
  overflow       What happens if content overflows an element's box.
  overflow-x     Whether to clip the left/right edges of overflowing content. CSS3
  overflow-y     Whether to clip the top/bottom edges of overflowing content. CSS3
  overflow-wrap  Break lines within words in order to prevent overflow. CSS3
  text-overflow  What should happen when text overflows the containing element. CSS3
p
  padding     -bottom -left -right -top
  page-break-after  Adjust page breaks after the current element.
  page-break-before Adjust page breaks before the current element.
  position       Positioning method for an element. (static, relative, absolute or fixed)
q
  quotes         Type of quotation marks for embedded quotations.
r
  right          Right position of a positioned element.
t
  table-layout   How to layout table columns.
  top            Top position of a positioned element.
  text-align     Horizontal alignment of text.
  text-decoration Add decoration to text.
  text-indent    Indent the first line in a text-block.
  text-overflow  What should happen when text overflows the containing element. CSS3
  text-shadow    Add a shadow to text. CSS3
  text-transform Change the capitalization of text.
  text-align-last How to align the last line of text. CSS3
  text-rendering Choose the quality of text over speed.
  transform        Apply a 2D or 3D transformation to an element. CSS3
  transform-origin Change the position of transformed elements. CSS3
  transition  -property -duration -timing-function -delay CSS transition effects. CSS3
u
  unicode-bidi   Control the inline direction of text.
  user-select    Control the selection of text.
  vertical-align Vertical alignment of an image/element.
  visibility     Hide or show an element.
w
  white-space    How white-space inside an element is handled.
  word-spacing   Increase or decrease the space between words.
  word-wrap      Break lines within words in order to prevent overflow.
  width          Width of an element.
  max-width      Maximum width of an element.
  min-width      Minimum width of an element.
  z-index        Stack order of a positioned element.
/* This is a CSS comment */

Bold = Shortcut property
Grey = limited web browser support.

The page includes CSS 1, 2 and 3 and concentrates on properties that are supported by the major web browsers.
Other CSS References: W3C Standards, Mozilla CSS, Safari/Webkit CSS, Microsoft CSS

Back to the Top
© Copyright SS64.com 1999-2016
Some rights reserved


Les feuilles de style en cascade, niveau 1

Recommandation du W3C du 17 décembre 1996, révisée le 11 janvier 1999

Cette version : | http://www.w3.org/TR/1999/REC-CSS1-19990111
Dernière version : | http://www.w3.org/TR/REC-CSS1
Version précédente : | http://www.w3.org/TR/REC-CSS1-961217
Auteurs : | Håkon Wium Lie (howcome@w3.org) Bert Bos (bert@w3.org)

Statut de ce document

Ce document est une recommandation du W3C. Il a été vérifié par les membres du W3C et l'utilisation de cette spécification a été approuvée par consensus général. Ce document est stable et peut être considéré comme document de référence ou cité par un autre document comme norme de référence. Le W3C encourage un large déploiement de cette recommandation.

On peut trouver une liste actuelle des recommandations et autres documents techniques du W3C à l'adresse http://www.w3.org/TR/.

Ceci est une version corrigée du premier document publié le 17 décembre 1996. Les modifications apportées à la version originale sont répertoriées à l'Annexe F. Une liste des erreurs connues dans cette spécification est disponible à l'adresse http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata →vf

Résumé

Ce document spécifie le niveau 1 du mécanisme des feuilles de style en cascade. Le langage CSS1 constitue un mécanisme de feuille de style simple qui permet aux auteurs et aux lecteurs de lier un style (par exemple les polices de caractères, les couleurs et l'espacement) à un document HTML. Le langage CSS1 peut être lu et écrit par un humain, les styles sont exprimés dans la terminologie habituelle de la publication par ordinateur.

La cascade des feuilles de style est une des caractéristiques fondamentales de CSS ; les auteurs peuvent attacher une feuille de style préférée tandis que les lecteurs ont la possibilité de choisir une feuille de style personnelle pour pallier un handicap physique ou technologique. Cette spécification définit les règles de résolution des conflits entre différentes feuilles de style.

Cette recommandation est le résultat des travaux du W3C dans le domaine des feuilles de style. Pour des informations complémentaires sur les feuilles de style, voir [1].

Table des matières

Résumé
La terminologie

1 Les notions de base
1.1 L'incorporation dans HTML
1.2 Le regroupement
1.3 L'héritage
1.4 Une classe comme sélecteur
1.5 Un ID comme sélecteur
1.6 Les sélecteurs contextuels
1.7 Les commentaires
2 Les pseudo-classes et les pseudo-éléments
2.1 Les pseudo-classes d'ancre
2.2 Les pseudo-éléments typographiques
2.3 Le pseudo-élément 'first-line'
2.4 Le pseudo-élément 'first-letter'
2.5 Les pseudo-éléments dans les sélecteurs
2.6 Les pseudo-éléments multiples
3 La cascade
3.1 'important'
3.2 L'ordre de cascade
4 Le modèle de mise en forme
4.1 Les éléments de type bloc
4.1.1 La mise en forme verticale
4.1.2 La mise en forme horizontale
4.1.3 Les éléments de liste
4.1.4 Les éléments flottants
4.2 Les éléments de type en-ligne
4.3 Les éléments remplacés
4.4 La hauteur de ligne
4.5 Le canevas
4.6 L'élément 'BR'
5 Les propriétés de CSS1
5.1 La notation des valeurs de propriété
5.2 Les propriétés des polices
5.2.1 L'ajustement des polices
5.2.2 'font-family'
5.2.3 'font-style'
5.2.4 'font-variant'
5.2.5 'font-weight'
5.2.6 'font-size'
5.2.7 'font'
5.3 Les propriétés de couleur et de fond
5.3.1 'color'
5.3.2 'background-color'
5.3.3 'background-image'
5.3.4 'background-repeat'
5.3.5 'background-attachment'
5.3.6 'background-position'
5.3.7 'background'
5.4 Les propriétés du texte
5.4.1 'word-spacing'
5.4.2 'letter-spacing'
5.4.3 'text-decoration'
5.4.4 'vertical-align'
5.4.5 'text-transform'
5.4.6 'text-align'
5.4.7 'text-indent'
5.4.8 'line-height'
5.5 Propriétés de boîte
5.5.1 'margin-top'
5.5.2 'margin-right'
5.5.3 'margin-bottom'
5.5.4 'margin-left'
5.5.5 'margin'
5.5.6 'padding-top'
5.5.7 'padding-right'
5.5.8 'padding-bottom'
5.5.9 'padding-left'
5.5.10 'padding'
5.5.11 'border-top-width'
5.5.12 'border-right-width'
5.5.13 'border-bottom-width'
5.5.14 'border-left-width'
5.5.15 'border-width'
5.5.16 'border-color'
5.5.17 'border-style'
5.5.18 'border-top'
5.5.19 'border-right'
5.5.20 'border-bottom'
5.5.21 'border-left'
5.5.22 'border'
5.5.23 'width'
5.5.24 'height'
5.5.25 'float'
5.5.26 'clear'
5.6 Les propriétés de classification
5.6.1 'display'
5.6.2 'white-space'
5.6.3 'list-style-type'
5.6.4 'list-style-image'
5.6.5 'list-style-position'
5.6.6 'list-style'
6 Les unités
6.1 Les unités de longueur
6.2 Les unités de pourcentage
6.3 Les unités de couleur
6.4 Les adresses URL
7 La conformité à CSS1
7.1 La compatibilité ascendante de l'interprétation
8 Références
9 Remerciements

Annexe A : Exemple de feuille de style pour HTML 2.0
Annexe B : Grammaire de CSS1
Annexe C : Codage
Annexe D : Correction du gamma
Annexe E : Conditions d'utilisation et capacité d'extension de CSS1
Annexe F : Changements depuis la version du 17 décembre 1996

La terminologie

agent (d')utilisateur
un agent utilisateur, souvent un navigateur ou un client Web.
attribut
attribut HTML
auteur
l'auteur d'un document HTML
balisage fictif
un moyen pour décrire le comportement des pseudo-classes et des pseudo-éléments.
canevas
la surface dessinée par l'agent utilisateur sur laquelle un document est rendu
CSS1
CSS niveau 1. Ce document définit le langage CSS1 qui est un mécanisme de feuille de style simple pour le Web.
déclaration
une propriété (ex. 'font-size') et sa valeur correspondante (ex. '12pt').
designer
l'auteur d'une feuille de style.
dimensions intrinsèques
la largeur et la hauteur définies par le seul élément, non imposées par son environnement. On considère dans cette spécification que tous les éléments remplacés, et seulement ceux-ci, ont des dimensions intrinsèques.
document
un document HTML.
élément
un élément HTML.
élément de type bloc
un élément qui a une fin de ligne avant et après (ex. 'H1' en HTML)
élément de type en-ligne
un élément qui n'a pas de fin de ligne avant ni après (ex. 'STRONG' en HTML)
élément remplacé
un élément dont l'interpréteur de CSS ne connaît que les dimensions intrinsèques. En HTML,'IMG', 'INPUT', 'TEXTAREA', 'SELECT' et 'OBJECT' sont des exemples d'éléments remplacés. Par exemple, le contenu de l'élément 'IMG' est souvent remplacé par l'image que l'attribut 'SRC' indique. CSS1 ne définit pas comment sont trouvées les dimensions intrinsèques.
élément enfant (ou enfant)
un sous-élément dans la terminologie SGML [5]
élément parent ou parent
l'élément contenant dans la terminologie SGML [5].
extension HTML
Balisage introduit par les compagnies éditrices d'agents utilisateurs, le plus souvent pour obtenir des effets visuels. Les balises 'FONT', 'CENTER' et 'BLINK' en sont des exemples, ainsi que l'attribut 'BGCOLOR'. Un des buts des feuilles de style est de fournir une alternative aux extensions HTML.
feuille de style
un ensemble de règles
feuille de style ou Cascading Style Sheets
les feuilles de style en cascade et leur format
fonctions avancées de CSS1
caractéristiques décrites dans cette spécification mais qui n'appartiennent pas aux fonctions de base de CSS1.
fonctions de base de CSS1
la partie de CSS1 obligatoire pour tous les agents utilisateurs conformes à CSS1.
HTML
Hypertext Markup Language [2] une application de SGML.
interpréteur CSS1
un agent utilisateur qui lit les feuilles de style CSS1.
lecteur
la personne qui consulte le document.
poids
l'importance relative d'une règle, son ordre de priorité.
propriété
un paramètre de style sur lequel peut agir une feuille de style. Cette spécification définit une liste de propriétés et leurs valeurs associées.
pseudo-élément
les pseudo-éléments qui sont utilisés par les sélecteurs de CSS pour agir sur des éléments typographiques (ex. la première ligne d'un élément) plutôt que sur les éléments structuraux proprement dits.
pseudo-classe
les pseudo-classes qui sont utilisées par les sélecteurs de CSS permettent des indications en supplément de la source HTML (ex. un lien a été visité ou non) pour la classification des éléments.
règle
une déclaration (ex. 'font-family: helvetica') et son sélecteur (ex. 'H1').
sélecteur
une chaîne de caractères qui identifie les éléments sur lesquels s'applique la règle correspondante. Un sélecteur est ou bien simple (ex. 'H1') ou bien contextuel (fait de plusieurs sélecteurs simples, p.ex. 'H1 B').
sélecteur contextuel
un sélecteur qui agit sur les éléments selon leur position dans la structure du document. Un sélecteur contextuel consiste en plusieurs sélecteurs simples. Par exemple, le sélecteur contextuel 'H1.initial B' est constitué des deux sélecteurs simples 'H1.initial' et 'B'.
sélecteur simple
un sélecteur qui identifie un élément par son type et/ou son attribut et non par la position de celui-ci dans la structure du document (ex. 'H1.initial' est un sélecteur simple).
SGML
Standard Generalized Markup Language [5], HTML en est une application.
taille ou corps de police
La taille du dessin d'une police. Typiquement, le corps d'une police est à peu près égal à la distance entre le bas de la lettre avec jambage la plus basse et le haut de la lettre avec hampe la plus haute avec éventuellement un accent diacritique.
type d'élément
un identifiant générique dans la terminologie SGML [5].
utilisateur
synonyme de lecteur

Tout au long de ce texte, l'utilisation de guillemets simples ('...') correspond à des extraits de code HTML ou CSS.

1 Les notions de base

Créer une feuille de style simple est facile. On a besoin de connaître un peu de HTML et quelques termes de base de la publication par ordinateur. Par exemple, pour rendre bleu les éléments 'H1', on écrit :

H1 { color: blue }

L'exemple ci-dessus est une simple règle CSS. Une règle consiste en deux parties : un sélecteur ('H1') et une déclaration ('color: blue'). La déclaration comprend deux parties : la propriété ('color') et la valeur associée ('blue'). Bien que cet exemple n'agisse que sur une seule des propriétés nécessaires au rendu d'un document HTML, cela suffit pour qu'elle soit qualifiée de feuille de style. Combinée avec d'autres feuilles de style (la combinaison de feuilles de style est une fonction fondamentale des CSS), elle agira sur la présentation finale du document.

Le sélecteur est le lien entre le document HTML et la feuille de style, tous les types d'éléments HTML pouvant être des sélecteurs. Les types d'éléments HTML sont définis dans la spécification du HTML [2].

La propriété 'color' fait partie de la cinquantaine de propriétés qui déterminent la présentation d'un document HTML. La liste des propriétés et leurs valeurs possibles est définie dans cette spécification.

Les auteurs HTML ne devraient écrire des feuilles de style que pour suggérer un style particulier à leurs documents. Chaque agent utilisateur (navigateur ou client Web) est pourvu d'une feuille de style par défaut qui présente les documents d'une manière (sinon banale) tout au moins raisonnable. L'annexe A contient un exemple de feuille de style pour la présentation de documents HTML tel que suggéré dans la spécification du HTML 2.0 [3].

La grammaire formelle du langage CSS1 est définie dans l'annexe B.

1.1 L'incorporation dans HTML

Pour que les feuilles de style puissent avoir une influence sur la présentation, les agents utilisateurs doivent en connaître l'existence. La spécification HTML [2] définit la façon de relier HTML aux feuilles de style. Ce chapitre est donc informatif et non normatif :

<HTML>
  <HEAD>
    <TITLE>Titre</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css"
      HREF="http://style.com/cool" TITLE="Cool">
    <STYLE TYPE="text/css">
      @import url(http://style.com/basic);
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Ce titre est en bleu</H1>
    <P STYLE="color: green">et le paragraphe est en vert.
  </BODY>
</HTML>

L'exemple montre quatre façons de combiner le style au HTML : avec l'élément 'LINK' vers une feuille de style externe, avec l'élément 'STYLE' à l'intérieur de l'élément 'HEAD', avec une feuille de style importée à l'aide de la notation CSS '@import' et enfin avec l'attribut 'STYLE' d'un élément (ici 'P') dans 'BODY'. Cette dernière option mélange style et contenu, et on perd de ce fait les avantages d'une feuille de style traditionnelle.

L'élément 'LINK' fait référence à des feuilles de style alternatives que le lecteur peut sélectionner, alors que les feuilles de style importées sont automatiquement combinées avec les autres feuilles de style.

En pratique, les agents utilisateurs ignorent les balises qui leur sont inconnues. Une conséquence, les vieux agents utilisateurs ignoreront l'élément 'STYLE', mais non son contenu qui sera traité comme faisant partie du corps du document, et qui sera rendu comme tel. Pendant une période transitoire, le contenu de l'élément 'STYLE' peut être caché à l'aide de commentaires SGML :

<STYLE TYPE="text/css"><!--
  H1 { color: green }
--></STYLE>

Comme l'élément 'STYLE' est déclaré dans le DTD en tant que "CDATA" (défini dans [2]), les interpréteurs conformes à SGML ne confondront pas la feuille de style avec un commentaire et en tiendront donc compte.

1.2 Le regroupement

Pour réduire la taille des feuilles de style, on peut grouper des sélecteurs dans une liste en les séparant par des virgules :

H1, H2, H3 { font-family: helvetica }

De même, on peut grouper les déclarations :

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: helvetica;
  font-variant: normal;
  font-style: normal;
}

De plus, quelques propriétés ont leur propre syntaxe de regroupement :

H1 { font: bold 12pt/14pt helvetica }

qui équivaut à l'exemple précédent.

1.3 L'héritage

Dans le premier exemple, on donnait une couleur bleu aux éléments de 'H1'. Supposons qu'il y ait un élément mis en exergue parmi ceux compris dans l'élément 'H1' :

<H1>Le titre <EM>est</EM> important !</H1>

Si aucune couleur n'a été assignée à l'élément 'EM', le "est" mis en exergue hérite de la couleur de l'élément parent, il apparaît donc en bleu. D'autres propriétés de style sont pareillement héritées, par exemple 'font-family' et 'font-size'.

Pour donner une propriété de style par "défaut" à un document, on peut assigner la propriété à un élément dont tous les éléments visibles descendent. Dans les documents HTML, l'élément 'BODY' peut servir à cet usage :

BODY {
  color: black;
  background: url(texture.gif) white;
}

Ceci fonctionne, même si l'auteur omet la balise 'BODY' (ce qui est autorisé), l'interpréteur HTML inférant la balise manquante. L'exemple ci-dessus donne un rendu du texte en noir et une image de fond. Le fond sera blanc si l'image n'est pas disponible (cf. chapitre 5.3 pour plus d'infos).

Quelques propriétés de style ne sont pas transmises de l'élément parent à l'élément enfant. Le plus souvent, on constate intuitivement quand ce n'est pas le cas. Par exemple, la propriété 'background' n'est pas héritée, mais le fond de l'élément parent transparaîtra par défaut.

Souvent, la valeur d'une propriété est un pourcentage de celle d'une autre propriété :

P { font-size: 10pt }
P { line-height: 120% }  /* relatif à 'font-size', c-à-d 12pt */

Pour toute propriété qui admet des valeurs en pourcentage est déterminée la propriété à laquelle elle se réfère. Les éléments enfants de 'P' hériteront de la valeur calculée de 'line-height' (c.à.d 12pt), et non du pourcentage.

1.4 Une classe comme sélecteur

Pour accroître la granularité de l'action sur les éléments, un nouvel attribut a été ajouté à HTML [2]: 'CLASS'. Tous les éléments à l'intérieur d'un élément 'BODY' peuvent appartenir à une classe, celle-ci étant déclarée dans la feuille de style :

<HTML>
 <HEAD>
  <TITLE>Titre</TITLE>
  <STYLE TYPE="text/css">
    H1.pastoral { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 CLASS=pastoral>Beaucoup trop vert</H1>
 </BODY>
</HTML>

Les règles d'héritage habituelles s'appliquent aux éléments définis avec une classe ; ils héritent des valeurs de leur parent dans la structure du document.

On peut adresser tous les éléments d'une même classe sans pour autant mettre le nom de la balise dans le sélecteur :

.pastoral { color: green }  /* tous les éléments de la classe pastoral */

On ne peut spécifier qu'une seule classe par sélecteur. Ainsi 'P.pastoral.marine' est un sélecteur invalide en CSS1 (les sélecteurs contextuels décrits plus bas peuvent avoir une classe par sélecteur simple)

Les feuilles de style CSS confèrent tant de pouvoir à l'attribut CLASS que, dans de nombreux cas, l'élément sur laquelle porte la classe importe peu ; quel que soit l'élément, vous pouvez presque le faire se comporter comme un autre. Une telle utilisation n'est pas recommandée car on supprime un niveau de structure qui a une signification universelle (éléments HTML). Une structure basée sur CLASS n'a d'utilité que dans un domaine restreint où la signification d'une classe peut reposer sur un accord mutuel.

1.5 Un ID comme sélecteur

HTML [2] introduit aussi l'attribut 'ID' qui garantit le caractère d'unicité d'un objet dans un document. Il peut revêtir un intérêt particulier en tant que sélecteur dans la feuille de style, où on l'adresse en le faisant précéder d'un dièse '#' :

#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>Texte espacé</P>

Dans l'exemple ci-dessus, le premier sélecteur vise l'élément 'P' en raison de la valeur de l'attribut 'ID'. Le second sélecteur spécifie à la fois un type d'élément ('H1') et une valeur d'ID, il ne concernera donc pas l'élément 'P'.

En utilisant l'attribut ID comme sélecteur, on peut fixer des propriétés de style par élément. Alors que les feuilles de style sont avant tout destinées à améliorer la structure du document, cette fonction donne aux auteurs la possibilité de créer des documents de bonne présentation dans la page mais sans tirer avantage des éléments structuraux de HTML. Cette utilisation des feuilles de style n'est donc pas encouragée.

1.6 Les sélecteurs contextuels

L'aptitude à hériter de CSS épargne les doigts des auteurs. Au lieu de la mise en place de toutes les propriétés de style, on peut créer une feuille de style par défaut et l'amender d'une liste des exceptions. Pour donner une couleur différente aux éléments 'EM' inclus dans 'H1', on pourrait écrire :

H1 { color: blue }
EM { color: red }

La feuille de style prenant effet, toutes les sections mises en exergue dans et hors de 'H1' auront la couleur rouge. Peut-être voulait-on que seuls les éléments 'EM' dans 'H1' soient rouge, on pouvait le faire avec :

H1 EM { color: red }

Le sélecteur est devenu un motif de recherche sur la pile des éléments ouverts, on le nomme un sélecteur contextuel. Les sélecteurs contextuels sont composés d'une suite de plusieurs sélecteurs simples séparés par un espace (tous les sélecteurs décrits jusqu'ici étaient des sélecteurs simples). Seuls les éléments existants qui correspondent au dernier sélecteur simple de la suite (ici l'élément 'EM') sont concernés, et seulement si le motif de recherche correspond. Les sélecteurs contextuels en CSS1 sont liés à leurs ancêtres, mais l'évolution de la norme pourraient introduire d'autres relations (ex. parent-enfant). Dans l'exemple au-dessus, la reconnaissance était probante si 'EM' est un descendant de 'H1', c.-à-d. si 'EM' est à l'intérieur d'un élément 'H1'.

UL LI    { font-size: small }
UL UL LI { font-size: x-small }

Ici, le premier sélecteur correspond aux éléments 'LI' qui ont au moins un ancêtre 'UL'. Le second sélecteur correspond à un sous-ensemble du premier, où les éléments 'LI' ont au moins deux ancêtres 'UL'. Le conflit apparent est résolu par le fait que le motif de recherche du second sélecteur est plus long, et donc plus spécifique, que le premier. Voir l'ordre de cascade (chapitre 3.2) pour plus d'infos.

Les sélecteurs contextuels peuvent être spécifiés au travers des types d'élément, des attributs CLASS, des attributs ID ou d'une combinaison de ceux-ci :

DIV P           { font: small sans-serif }
.reddish H1     { color: red }
#x78y CODE      { background: blue }
DIV.sidenote H1 { font-size: large }

Le premier sélecteur correspond aux éléments 'P' qui ont un élément 'DIV' parmi leurs ancêtres. Le deuxième correspond aux éléments 'H1' qui ont un ancêtre de la classe 'reddish'. Le troisième aux éléments 'CODE' qui ont un parent dont l'attribut ID est égal à 'x78y'. Et le quatrième aux éléments 'H1' qui ont un ancêtre 'DIV', lui-même de la classe 'sidenote'.

On peut regrouper plusieurs sélecteurs contextuels :

H1 B, H2 B, H1 EM, H2 EM { color: red }

ce qui est équivalent à :

H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }

1.7 Les commentaires

Les commentaires textuels dans les feuilles de style CSS sont les mêmes que ceux employés pour le langage de programmation C [7] :

EM { color: red }  /* rouge, vraiment rouge ! */

Les commentaires ne peuvent pas être imbriqués. Un interpréteur CSS1 considère un commentaire comme un blanc.

2 Les pseudo-classes et les pseudo-éléments

En CSS1, un élément reçoit un style en fonction de sa position dans la structure du document. Ce modèle simple est suffisant pour une grande variété de styles, sauf pour quelques effets courants. Les concepts de pseudo-classes et de pseudo-éléments élargissent l'adressage et permettent à des directives externes d'influer sur la mise en forme.

Les sélecteurs CSS peuvent utiliser les pseudo-classes et pseudo-éléments, sans que ceux-ci n'apparaissent dans la source HTML. L'agent utilisateur les "insère" plutôt dans les feuilles de style, sous certaines conditions, lors de l'adressage. On les qualifie par commodité de "classes" et "éléments" pour décrire leur comportement. Plus particulièrement, on décrit leur mode opératoire à l'aide d'une séquence de balise fictive.

On utilise les pseudo-éléments pour adresser une partie d'un élément, les pseudo-classes permettent une distinction entre les styles des différents types d'élément de la feuille de style.

2.1 Les pseudo-classes d'ancre

Habituellement, les agents utilisateurs différencient à l'affichage les liens visités des liens non-visités. En CSS1, cela est fait par des pseudo-classes sur l'élément 'A' :

A:link { color: red }       /* lien non-visité */
A:visited { color: blue }   /* lien visité */
A:active { color: lime }    /* lien activé */

Tous les éléments 'A' avec un attribut 'HREF' vont recevoir le style d'un et un seul de ces groupes (les ancres avec un nom ne sont pas concernées). Les agents utilisateurs peuvent faire passer un élément de l'état 'visited' à 'link' après un temps non-précisé. L'état 'active' désigne un lien en train d'être sélectionné par l'utilisateur (clic maintenu sur la souris).

On peut assimiler l'action d'une pseudo-classe d'ancre à l'insertion manuelle d'une classe. L'agent utilisateur n'est pas obligé de redessiner la page déjà affichée pour tenir compte des transitions induites par une pseudo-classe d'ancre. Par exemple, une feuille de style peut très bien spécifier que la taille de la police 'font-size' d'un lien actif 'active' soit plus grande que celle d'un lien visité 'visited', ainsi l'agent utilisateur n'est pas tenu de reformater dynamiquement le document quand le lecteur clique sur un lien visité.

Les sélecteurs de pseudo-classe n'ont rien à voir avec les classes normales et vice versa. La règle de style qui suit sera inopérante :

A:link { color: red }

<A CLASS=link NAME=target5> ... </A>

En CSS1, les pseudo-classes d'ancre n'ont d'effet que sur l'élément 'A'. On pourra omettre le type d'élément du sélecteur :

A:link { color: red }
:link { color: red }

Les deux sélecteurs ci-dessus adressent les mêmes éléments en CSS1.

Le nom des pseudo-classes est insensible à la casse.

Les pseudo-classes sont utilisables dans les sélecteurs contextuels :

A:link IMG { border: solid blue }

On peut également utiliser les pseudo-classes en combinaison avec les classes normales :

A.external:visited { color: blue }

<A CLASS=external HREF="http://de.hors/">lien externe</A>

Si le lien avait été visité dans cet exemple, il apparaîtrait en bleu. Noter que le nom d'une classe normale précède le nom d'une pseudo-classe dans le sélecteur.

2.2 Les pseudo-éléments typographiques

Quelques effets typographiques courants ne sont pas associés aux éléments structuraux mais aux objets typographiques de la mise en page. Avec CSS1, deux objets typographiques peuvent être concernés par le biais de pseudo-éléments : la première lettre d'un élément et la première ligne d'un élément.

CSS1 de base : Les agents utilisateurs peuvent ignorer ces pseudo-éléments ':first-line' ou ':first-letter' dans un sélecteur, ou respecter toute ou partie de leurs propriétés. (Cf. le chapitre 7).

2.3 Le pseudo-élément 'first-line'

Le pseudo-élément 'first-line' est utilisé pour appliquer un style spécial à la première ligne issue de la mise en page :

<STYLE TYPE="text/css">
  P:first-line { font-variant: small-caps }
</STYLE>

<P>La première ligne d'un article dans un journal.

Un agent utilisateur en mode texte donnerait :

LA PREMIÈRE LIGNE D'UN ARTICLE
dans un journal.

La séquence de balise fictive dans cet exemple est :

<P>
<P:first-line>
La première ligne d'un article
</P:first-line>
dans un journal.
</P>

La balise fermante de 'first-line' est insérée à la fin de la première ligne telle qu'elle apparaît dans la mise en page.

Dans le cas où la première ligne d'un élément de type bloc A est aussi celle de l'élément B, ancêtre de A, la séquence de balise fictive est :

     <B>...
       <A>...
         <B:first-line>
           <A:first-line>
             Ceci est la première ligne
           </A:first-line>
         </B:first-line>
         ...
       </A>
       ...
     </B>

Toutes les balises fictives pour la première ligne se trouvent dans le plus petit élément englobant de type bloc, l'ordre d'imbrication des balises fictives A:first-line et B:first-line est le même que celui des éléments A et B.

La "première ligne formatée" d'un élément de type bloc correspond à la première ligne dans le flux de l'élément, c'est-à-dire en ignorant les flottants éventuels. Par exemple, dans cet extrait :

     <div>
       <p style="float: left">Un paragraphe flottant...</p>
       <p>La première ligne commence ici...</p>
     </div>

le sélecteur 'div:first-line' s'applique à la premiè ligne du second élément P, parce que le premier P est retiré du flux.

Le pseudo-élément 'first-line' ne s'applique qu'aux éléments de type bloc.

Le pseudo-élément 'first-line' se comporte comme un élément de type en-ligne avec quelques restrictions. Seules sont applicables à 'first-line' : les propriétés de police (5.2), les propriété de couleur et de fond (5.3), et les propriétés 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align' (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), 'clear' (5.5.26).

2.4 Le pseudo-élément 'first-letter'

Le pseudo-élément 'first-letter' s'utilise pour obtenir des effets typographiques courants comme la "lettrine" ou le changement "en bas de casse". Si sa propriété 'float' a pour valeur 'none', il se comporte comme un élément de type en-ligne ou, sinon, comme un élément flottant. Voici les propriétés qui s'appliquent à 'first-letter' : les propriétés de police (5.2), de couleur et de fond (5.3), 'text-decoration' (5.4.3), 'vertical-align' (seulement si 'float' a comme valeur 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), les propriétés de marge (5.5.1-5.5.5), d'espacement (5.5.6-5.5.10), de bordure (5.5.11-5.5.22), et les propriétés 'float' (5.5.25) et 'clear' (5.5.26).

Voici comment on pourrait faire une lettrine qui s'étend sur deux lignes :

<HTML>
 <HEAD>
  <TITLE>Titre</TITLE>
  <STYLE TYPE="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Les premiers</SPAN> mots d'un article de journal.</P>
 </BODY>
</HTML>

Une représentation (improbable) par un agent utilisateur en mode texte gérant le pseudo-élément 'first-letter' donnerait :

|  ES PREMIERS
|_ mots d'un
article de journal.

La séquence de balise fictive en est :

<P>
<SPAN>
<P:first-letter>
L
</P:first-letter>es premiers
</SPAN>
mots d'un article de journal.
</P>

Noter que les balises du pseudo-élément 'first-letter' butent contre le contenu (c.-à-d. le caractère initial), alors que la balise ouvrante du pseudo-élément 'first-line' s'insère juste après la balise ouvrante de l'élément qui le contient.

L'agent utilisateur détermine les caractères qui font partie de l'élément 'first-letter'. Normalement, il devrait inclure le guillemet éventuel qui précède la première lettre :

|||    | n tiens
  |    | vaut mieux
  |    | que deux
  |____| tu l'auras,"
dit un vieux proverbe.

Quand la première lettre d'un paragraphe est un autre signe de ponctuation (ex. parenthèse, ellipses) ou un autre caractère non assimilé à une lettre (ex. chiffres et symboles mathématiques), 'first-letter' est en général ignoré.

L'usage diffère selon les langues. Par exemple en hollandais, un mot qui commence par "ij" alors cette combinaison devrait être considérée dans son entier par 'first-letter'.

On ne peut lier le pseudo-élément 'first-letter' qu'à un élément de type bloc.

2.5 Les pseudo-éléments dans les sélecteurs

Dans un sélecteur contextuel, on ne peut mettre les pseudo-éléments qu'à la fin du sélecteur :

BODY P:first-letter { color: purple }

On peut combiner les pseudo-éléments avec des classes dans les sélecteurs :

P.initial:first-letter { color: red }

<P CLASS=initial>Premier paragraphe</A></P>

Dans cet exemple, la première lettre des éléments 'P' qui ont pour classe 'initial' est de couleur rouge. En combinaison avec des classes ou des pseudo-classes, on doit spécifier les pseudo-éléments à la fin du sélecteur. Il ne peut y avoir qu'un pseudo-élément par sélecteur.

2.6 Les pseudo-éléments multiples

On peut combiner plusieurs pseudo-éléments :

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Texte qui se poursuit sur deux lignes</P>

Dans cet exemple, la première lettre de chaque élément 'P' a une couleur verte et un corps de police 24pt. Le reste de la première ligne (selon le formatage de la page) a une couleur bleu, puis le reste du paragraphe une couleur rouge. En supposant qu'il y ait une fin de ligne avant le mot "poursuit", la séquence de balise fictive serait :

<P>
<P:first-line>
<P:first-letter>
T
</P:first-letter>exte qui se
</P:first-line>
poursuit sur deux lignes
</P>

Noter que l'élément 'first-letter' est placé à l'intérieur de l'élément 'first-line'. Les propriétés de 'first-line' seront héritées par 'first-letter', mais avec leurs valeurs remplacées par celles déclarées pour 'first-letter' si tel est le cas.

Si un pseudo-élément coupe un élément réel, des balises supplémentaires doivent nécessairement être recréées dans la séquence de balise fictive. Par exemple, si un élément 'SPAN' s'étend au-delà d'une balise </P:first-line>, alors un jeu de balise fermante et ouvrante sera créé, la séquence de balise fictive devient :

<P>
<P:first-line>
<SPAN>
Ce texte est à l'intérieur d'un
</SPAN>
</P:first-line>
<SPAN>
interminable élément 'SPAN'.
</SPAN>

3 La cascade

Avec CSS, la présentation peut être influencée simultanément par plusieurs feuilles de style. Deux raisons à cela : la modularité, et l'équilibre entre les prérogatives de l'auteur et du lecteur.

modularité
Un auteur peut combiner plusieurs feuilles de style (partielles) pour éviter la redondance :
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);

H1 { color: red }     /* annule le style importé */
équilibre
Le lecteur et l'auteur peuvent tous deux agir sur la présentation au travers des feuilles de style. Pour cela, ils usent du même langage de feuille de style, ce qui illustre un aspect fondamental du Web : tout le monde peut publier. Le mécanisme de référencement des feuilles de style personnelles est laissé au choix de l'agent utilisateur.

Des conflits peuvent naître entre les feuilles de styles agissant sur la présentation. La résolution de ceux-ci est fondée sur un poids attribué à chaque règle. Les règles des feuilles de style du lecteur ont par défaut un poids moindre que celles des feuilles de style de l'auteur. C.-à-d., si un conflit apparaît entre les feuilles de style du lecteur et celles de l'auteur, les dernières auront la priorité. Les directives du lecteur et de l'auteur remplacent toutes deux les valeurs par défaut de l'agent utilisateur.

Les feuilles de style importées agissent aussi en cascade les unes avec les autres, dans l'ordre d'apparition, et selon les règles de cascade définies ci-dessous. Toutes règles spécifiées dans la feuille de style elle-même prennent le pas sur celles importées. C.-à-d., les feuilles de style importées sont placées plus bas dans l'ordre de cascade que les règles de la feuille de style. Ces feuilles de style importées peuvent à leur tour importer et surcharger d'autres feuilles de style récursivement.

En CSS1, toutes les déclarations '@import' doivent être placées au début de la feuille de style, avant toutes autres déclarations. Cela constitue un rappel visuel de la préséance des règles qui sont dans la feuille de style sur celles des feuilles de style importées.

3.1 'important'

L'auteur peut accroître le poids des règles de sa feuille de style :

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

Dans l'exemple ci-dessus, un poids supplémentaire est donné aux trois premières déclarations, la dernière gardant un poids normal.

La règle déclarée importante du lecteur est prioritaire sur celle normale de l'auteur. La règle déclarée importante de l'auteur annule celle importante du lecteur.

3.2 L'ordre de cascade

Les règles conflictuelles sont intrinsèques au mécanisme des CSS. L'algorithme suivant doit être respecté pour trouver la valeur d'une combinaison entre élément et/ou propriété :

  1. Trouver toutes les déclarations qui s'appliquent à l'élément ou la propriété en question. Les déclarations s'appliquent si le sélecteur concerne l'élément donné. Si aucune déclaration ne correspond, les valeurs héritées sont utilisées. S'il n'y en a pas (l'élément 'HTML' et autres propriétés qui ne sont pas héritées), alors utiliser la valeur initiale.
  2. Trier les déclarations selon leur poids explicite : les déclarations marquées '!important' ont plus de poids que celles non-marquées (normal).
  3. Trier selon l'origine : les feuilles de style de l'auteur surclassent celles du lecteur qui surclassent à leur tour les valeurs internes par défaut de l'agent utilisateur. Une feuille de style importée est considérée avoir la même origine que celle dont elle est issue.

  4. Trier selon la spécifité du sélecteur : un sélecteur général est surclassé par un sélecteur plus spécifique. Déterminer la spécificité en comptant le nombre d'attributs ID (a), le nombre d'attributs CLASS (b) et le nombre de noms de balise (c) dans le sélecteur. Rassembler ces trois nombres (dans un système de nombres sur une base étendue) pour obtenir la spécifité. Un exemple :

    LI            {...}  /* a=0 b=0 c=1 -> spécificité =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> spécificité =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> spécificité =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> spécificité =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> spécificité =  13 */
#x34y         {...}  /* a=1 b=0 c=0 -> spécificité = 100 */

    On considère respectivement les pseudo-classes et pseudo-éléments comme des classes et éléments normaux.

    Trier selon la spécificité du sélecteur : les sélecteurs plus spécifiques surclasseront ceux plus généraux. Pour trouver la spécificité d'un sélecteur ou de l'attribut 'STYLE' d'un élément (cf. section 1.1 pour un exemple), compter 1 si le sélecteur est dans l'attribut 'STYLE' et 0 sinon (a), compter le nombre d'attributs ID dans le sélecteur (b), le nombre d'attributs 'CLASS' dans le sélecteur (b) et le nombre de noms de balises dans le sélecteur (d). On obtient la spécificité en concaténant les quatres nombre (dans un système de nombre à grande base). Quelques exemples (triés des moins au plus spécifiques) :

    LI            {...}  /* a=0 b=0 c=0 d=1 -> specificité = 0,0,0,1 */
UL LI         {...}  /* a=0 b=0 c=0 d=2 -> specificité = 0,0,0,2 */
UL OL LI      {...}  /* a=0 b=0 c=0 d=3 -> specificité = 0,0,0,3 */
LI.red        {...}  /* a=0 b=0 c=1 d=1 -> specificité = 0,0,1,1 */
UL OL LI.red  {...}  /* a=0 b=0 c=1 d=3 -> specificité = 0,0,1,3 */
#x34y         {...}  /* a=0 b=1 c=0 d=0 -> specificité = 0,1,0,0 */
style="..."          /* a=1 b=0 c=0 d=0 -> specificité = 1,0,0,0 */

    Les pseudo-éléments et les pseudo-classes comptent respectivement comme des éléments et classes normaux.

  5. Trier dans l'ordre de spécification : si deux règles ont le même poids, alors la dernière l'emporte. Les règles importées sont considérées comme venant en premier dans la feuille de style elle-même.

La valeur d'une propriété est fixée dès que la règle de plus fort poids parmi celles qui s'appliquent à la même combinaison d'éléments/propriétés est trouvée.

Cette stratégie donne un poids considérable aux feuilles de styles d'un auteur. C'est pourquoi il est important que le lecteur puisse annuler l'influence de telle ou telle feuille de style, par exemple, choix au moyen d'un menu déroulant.

Une déclaration faite au moyen de l'attribut 'STYLE' d'un élément a le même poids que celle dans un sélecteur basé sur un ID (voir un exemple au chapitre 1.1) spécifié en fin de feuille de style :

<STYLE TYPE="text/css">
  #x97z { color: blue }
</STYLE>

<P ID=x97z STYLE="color: red">

Dans cet exemple, l'élément 'P' a la couleur rouge. Bien que les deux déclarations aient le même poids, celle de l'attribut 'STYLE' annule celle de l'élément 'STYLE' du fait de la règle de cascade numéro 5.

L'agent utilisateur peut honorer les autres attributs stylistiques propres au HTML, p.ex. 'ALIGN'. Dans ce cas, ils sont traduits dans leurs équivalents CSS avec une spécifité égale à 1. Ces règles induites sont placées en tête de la feuille de style de l'auteur et peuvent donc être remplacées par les règles écrites qui suivent. Cette façon de faire facilitera la coexistence des attributs stylistiques et des feuilles de style pendant une phase de transition.

4 Le modèle de mise en forme

CSS1 repose sur un modèle de mise en forme simple bâti sur un concept de boîtes dans lequel chaque élément formaté s'inscrit dans une ou plusieurs boîtes rectangulaires. Les éléments ayant une valeur 'none' pour la propriété 'display' n'ont pas de format et ne sont donc pas inscrits dans une telle boîte. Toutes les boîtes sont formées d'une aire avec un contenu de base entourée d'un espacement optionnel, d'une bordure et d'aires de marge.

 _______________________________________
|                                       |
|      marge [margin] (transparent)     |
|   _________________________________   |
|  |                                 |  |
|  |        bordure [border]         |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     espacement [padding]  |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  contenu            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

         |largeur de l'élément |
|         largeur de la boîte           |

Les tailles de la marge, de l'espacement et de la bordure sont fixées respectivement avec les propriétés 'margin' (5.5.1-5.5.5), 'padding' (5.5.6-5.5.10) et 'border' (5.5.11-5.5.22). La zone d'espacement est sur le fond de l'élément lui-même (spécifié par les propriétés de fond (5.3.2-5.3.7)). La couleur et le style de la bordure est donnée par les propriétés de bordure. Les marges sont toujours transparentes, on voit donc le parent de l'élément à travers.

La taille de la boîte est égale à la largeur de l'élément (c.-à-d. celle d'un texte formaté ou d'une image) et de l'espacement, auquel on ajoute la bordure et les marges.

Le formateur considère principalement deux genres d'élément : ceux de type bloc et ceux de type en-ligne.

4.1 Les éléments de type bloc

Les éléments qui ont une valeur 'block' ou 'list-item' pour la propriété 'display' sont des éléments de type bloc. On considère également de ce type les éléments flottants (dont la propriété 'float' a une valeur autre que 'none').

L'exemple suivant montre comment les marges et l'espacement régissent un élément 'UL' avec deux enfants. On a omis la bordure dans le schéma par souci de simplification. Les lettres faisant office de "constantes" ne font pas partie de la syntaxe CSS1, elles montrent juste le lien entre les valeurs de la feuille de style et le dessin.

<STYLE TYPE="text/css">
  UL {
    background: red;
    margin: A B C D;      /* marge */
    padding: E F G H;     /* espacement */
  }
  LI {
    color: white;
    background: blue;     /* le texte est blanc sur fond bleu */
    margin: a b c d;
    padding: e f g h;
  }
</STYLE>
..
<UL>
  <LI>1er élément de la liste
  <LI>2eme élément de la liste
</UL>

 _______________________________________________________
|                                                       |
|    A      UL margin (transparent)                     |
|    _______________________________________________    |
| D |                                               | B |
|   |    E   UL padding (rouge)                     |   |
|   |    _______________________________________    |   |
|   | H |                                       | F |   |
|   |   |    a   LI margin (transparent,        |   |   |
|   |   |        on voit le rouge au travers)   |   |   |
|   |   |    _______________________________    |   |   |
|   |   | d |                               | b |   |   |
|   |   |   |    e    LI padding (bleu)     |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  1er élément de la liste  f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |     max(a, c)                         |   |   | <- noter le max
|   |   |    _______________________________    |   |   |
|   |   |   |                               |   |   |   |
|   |   | d |    e    LI padding (bleu)     |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  2eme élément de la liste f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |   c    LI margin (transparent,        |   |   |
|   |   |        on voit le rouge au travers)   |   |   |
|   |   |_______________________________________|   |   |
|   |                                               |   |
|   |    G                                          |   |
|   |_______________________________________________|   |
|                                                       |
|   C                                                   |
|_______________________________________________________|

Techniquement, les propriétés d'espacement (N.D.T. padding) et de marge (N.D.T. margin) ne sont pas héritées. Mais, dans l'exemple, l'emplacement d'un élément est relatif à ses parents et à ses enfants, ainsi les propriétés d'espacement et de marge de ces éléments agissent sur leurs enfants.

S'il y avait eu des bordures, elles apparaîtraient entre l'espacement et les marges.

Le schéma suivant amène une terminologie utile :

                           --------------- <-- haut [top]
                            marge haute [margin-top]
                           ---------------
                            bordure haute [border-top]
                           ---------------
                            espacement haut [padding-top]
                           +-------------+ <-- bord interne haut
| marge  | bordure| espace.|             | espace. | bordure | marge   |
| gauche | gauche | gauche |-- contenu --| droit   | droite  | droite  |
|[margin |[border |[padding|             |[padding-|[border- |[margin- |
| -left] | -left] | -left] |             | right]  | right]  | right]  |
                           +-------------+ <-- bord interne bas
^                          ^             ^                             ^
bord       bord interne gauche      bord interne droit            bord
externe                                                                externe
gauche                      espacement bas [padding-bottom]            droit
                           ---------------
                            bordure bas [border-bottom]
                           ---------------
                             marge bas [margin-bottom]
                           --------------- <-- bas [bottom]

Le bord externe gauche représente le bord d'un élément, y compris l'espacement, la bordure et la marge. Le bord interne gauche représente le bord du seul élément, à l'exclusion de l'espacement, la bordure et la marge. Idem pour le côté droit. Le haut correspond au sommet de l'élément, y compris l'espacement, la bordure et la marge : il est seulement défini pour les éléments de type bloc et les éléments flottants, pas pour les éléments de type bloc non-flottants. Le bas correspond au bas de l'élément, y compris l'espacement, la bordure et la marge : il est seulement défini pour les élément de type bloc et les éléments flottants, pas pour les élément de type bloc non-flottants. Le bord interne bas représente le bas de l'élément, à l'exclusion de l'espacement, la bordure et la marge.

La largeur d'un élément est égale à la largeur du contenu, c.-à-d. la distance entre le bord interne gauche et le bord interne droit. Et sa hauteur est égale à la hauteur du contenu, c.-à-d. la distance entre le bord interne haut et le bord interne bas.

4.1.1 La mise en forme verticale

Pour les éléments de type bloc non-flottants, la largeur de la marge correspond à une distance minimum entre le contenu et le bord des boîtes qui l'entourent. Si aucune bordure, ni espacement, ni contenu ne séparent deux (ou plus) marges verticales adjacentes, alors elles fusionnent et la résultante est la plus grande de ces valeurs de marge. Dans la plupart des cas, cette fusion des marges verticales donne un meilleur aspect visuel, plus proche des attentes de l'auteur. Dans l'exemple précédent, les marges entre les deux éléments 'LI' ont fusionné et la marge résultante prend la valeur la plus grande entre celle de 'margin-bottom' du premier élément 'LI' et celle de 'margin-top' du second élément 'LI'. Pareillement, si l'espacement entre le 'UL' et le premier élément 'LI' (constante "E") avait été nul, les marges des éléments 'UL' et du premier 'LI' auraient fusionné.

Cas des marges négatives : la valeur maximale absolue entre marges négatives adjacentes est déduite de la plus grande valeur des marges positives. S'il n'y a pas de marges positives, alors la valeur maximale absolue d'entre les marges négatives est déduite de zéro.

4.1.2 La mise en forme horizontale

L'emplacement horizontal et la taille d'un élément de type bloc non-flottant sont déterminés par sept propriétés : 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' et 'margin-right'. La somme des sept valeurs associées est toujours égale à la valeur de 'width' du parent de l'élément.

Par défaut, la propriété 'width' d'un élément a pour valeur 'auto'. Si ce n'est pas un élément remplacé (ex. IMG), cela implique de la part de l'agent utilisateur l'addition des valeurs des sept propriétés citées ci-dessus pour arriver à la valeur de 'width' du parent. Si c'est un élément remplacé, la valeur 'auto' de 'width' devient automatiquement celle de la largeur intrinsèque de cet élément.

Trois de ces sept propriétés peuvent prendre la valeur 'auto' : 'margin-left', 'width' et 'margin-right'. Pour les éléments remplacés, la valeur 'auto' de 'width' étant remplacée par leur largeur intrinsèque, il ne leur reste donc que deux propriétés pouvant avoir la valeur 'auto'.

La propriété 'width' a une valeur minimum positive propre à l'agent utilisateur (variant d'un élément à un autre et pouvant dépendre d'autres propriétés). Si la valeur calculée devient inférieure à cette limite, qu'elle soit déclarée explicitement ou à 'auto', et que les règles suivantes la rendent trop petite, elle prendrait cette valeur limite.

Si une et une seule parmi 'margin-left', 'width' ou 'margin-right' a la valeur 'auto', l'agent utilisateur assigne à cette propriété-ci une valeur telle que la somme des sept propriétés soit égale à la largeur du parent.

Si aucune de ces trois propriétés n'a la valeur 'auto', alors la valeur de 'margin-right' passe à 'auto'.

Si plus d'une de ces trois propriétés ont la valeur 'auto', l'une d'elles étant 'width', alors les deux autres ('margin-left' et/ou 'margin-right') prennent la valeur zéro et 'width' une valeur telle que la somme des sept soit égale à la largeur du parent.

Autrement, si 'margin-left' et 'marging-right' ont la valeur 'auto', alors ces deux propriétés reçoivent la même valeur. De cette façon, l'élément est centré dans son parent.

Si une des sept propriétés d'un élément de type en-ligne ou flottant a la valeur 'auto', la valeur de cette propriété-ci devient nulle.

À la différence des marges verticales, les marges horizontales ne fusionnent pas.

4.1.3 Les éléments de liste

Les éléments dont la propriété 'display' a la valeur 'list-item' ont un format de type bloc, mais avec la marque de liste qui les précède. La propriété 'list-style' détermine le type de la marque. La position de cette marque dépend de la valeur de la propriété 'list-style' :

<STYLE TYPE="text/css">
  UL         { list-style: outside }
  UL.compact { list-style: inside }
</STYLE>

<UL>
  <LI>le premier article vient avant
  <LI>le second article vient après
</UL>

<UL CLASS=COMPACT>
  <LI>le premier article vient avant
  <LI>le second article vient après
</UL>

Ce qui apparaît ainsi :

* le premier article
  vient devant

* le second article
  vient après

  * le premier
  article vient avant

  * le second
  article vient après

Avec un sens de lecture de droite à gauche, les marques seraient du côté droit de la boîte.

4.1.4 Les éléments flottants

Avec une propriété 'float', un élément sort du flux normal des autres éléments et acquiert un format de type bloc. Par exemple, en donnant la valeur 'left' à la propriété 'float' d'une image, celle-ci est repoussée vers la gauche jusqu'à buter sur les marges, espacements ou bordures d'un autre élément de type bloc. Le flux normal se déroule sur le côté droit de l'image. Ses marges, bordures et espacements sont respectés, cependant les marges ne fusionnent jamais avec celles des éléments adjacents.

La position d'un élément flottant obéit aux contraintes suivantes (voir le chapitre 4.1 pour le sens des termes) :

  1. Le bord externe gauche d'un élément flottant à gauche ne peut se trouver plus à gauche que le bord interne gauche de son parent. Et inversement pour un élément flottant à droite.
  2. Le bord externe gauche d'un élément flottant à gauche doit se trouver sur la droite du bord externe droit de tout élément flottant à gauche qui précède (dans l'ordre de la source HTML) ou encore le sommet du suivant doit se trouver sous le bas du précédent. Et inversement pour les éléments flottants à droite.
  3. Le bord externe droit d'un élément flottant à gauche ne peut pas se trouver à droite du bord externe gauche d'éléments flottants à droite situés à sa droite. Et inversement pour un élément flottant à droite.
  4. Le sommet d'un élément flottant ne peut être plus haut que le bord haut interne de son parent.
  5. Le sommet d'un élément flottant ne peut être plus haut que celui d'un élément flottant ou de type bloc qui le précèdent.
  6. Le sommet d'un élément flottant ne peut être plus haut que le sommet d'une quelconque boîte de ligne avec contenu (cf. chapitre 4.4) qui le précède dans la source HTML.
  7. Un élément flottant est placé aussi haut que possible.
  8. Un élément flottant à gauche doit être placé aussi à gauche que possible, et inversement pour un élément flottant à droite. Un emplacement au plus haut est préférable à celui décalé sur la gauche ou la droite.
<STYLE TYPE="text/css">
  IMG { float: left }
  BODY, P, IMG { margin: 2em }
</STYLE>

<BODY>
  <P>
    <IMG SRC=img.gif>
    Un échantillon de texte qui...
</BODY>

Voici ce que donnerait l'exemple :

 ________________________________________
|
|          max(BODY margin, P margin)
|          ______________________________
|    |    |             Un échantillon de
| B  | P  | IMG margins texte qui n'a d'autre
| O  |    |    _____    but que de montrer
| D  | m  |   |     |   comment les éléments
| Y  | a  |   | IMG |   flottants butent contre
|    | r  |   |     |   les bords de leur parent
| m  | g  |   |_____|   en honorant les marges
| a  | i  |             bordures et espacements.
| r  | n  |             Noter comment les marges
| g  |    |verticales adjacentes ont fusionné
| i  |    |entre des éléments flottants
| n  |    |de type bloc.
|    |    |

Noter comment la marge de l'élément 'P' enserre l'élément flottant 'IMG'.

Deux situations peuvent se présenter où des éléments flottants peuvent recouvrir de leurs marges, bordures et espacements les emplacements d'autres éléments :

  • quand l'élément flottant a une marge négative ; les marges négatives de ces éléments sont respectées comme pour les autres éléments de type bloc.
  • quand l'élément flottant est plus large ou plus haut que son parent.

4.2 Les éléments de type en-ligne

Les éléments qui n'ont pas un format de type bloc sont des éléments de type en-ligne. Un élément en-ligne peut partager l'étendue de la ligne avec d'autres éléments. Un exemple :

<P>Plusieurs mots <EM>mis en exergue</EM> sont <STRONG>visibles</STRONG>.</P>

L'élément 'P' est de type bloc, alors que 'EM' et 'STRONG' sont de type en-ligne. Si l'élément 'P' est suffisamment large pour contenir le tout sur une ligne, ces deux éléments en-ligne sont donc sur celle-ci :

Plusieurs mots mis en exergue sont visibles.

S'il manque de place sur une ligne, un élément en-ligne est partagé en plusieurs boîtes :

<P>Il y a plusieurs <EM>mots mis en exergue</EM> ici.</P>

ce qui est illustré par :

Il y a plusieurs mots
mis en exergue ici.

Si l'élément en-ligne a des marges, bordures, espacements ou des décorations de texte qui lui sont associés, ces propriétés n'ont aucun effet à l'endroit où intervient une coupure de l'élément :

                  ----------
Il y a plusieurs |mots
                  ----------
---------
mis en exergue| ici.
---------

(Le dessin à partir de lettres est légèrement distordu. Voir le chapitre 4.4 sur la manière de calculer la hauteur des lignes).

4.3 Les éléments remplacés

On appelle élément remplacé un élément auquel est substitue un contenu désigné depuis l'intérieur même de celui-ci. Par exemple en HTML, l'élément 'IMG' est remplacé par une image référencée par l'attribut 'SRC'. L'élément substitué est censé apporter ses dimensions intrinsèques. Si la propriété 'width' a la valeur 'auto', la largeur de l'élément sera celle de la valeur de la largeur intrinsèque. Si on spécifie une valeur autre que 'auto' dans la feuille de style, c'est celle-ci qui est retenue pour dimensionner l'élément substitué (la méthode de dimensionnement dépendra du type du contenu référencé). La propriété 'height' est utilisée de la même façon.

Les éléments remplacés sont aussi bien de type bloc que en-ligne.

4.4 La hauteur de ligne

Tous les éléments ont une propriété 'line-height' qui est en principe la hauteur totale d'une ligne de texte. Dans la ligne, le texte reçoit un espace complémentaire au-dessus et en-dessous de celui-ci pour atteindre la valeur de la hauteur de ligne. Par exemple, si le texte a un corps de 12pt et la valeur de 'line-height' est 14pt, il est réparti un complément de 2pt entre le dessus (1pt) et le dessous (1pt) de la ligne. Ce calcul dépend des éléments, qu'ils aient un contenu ou non.

On appelle interligne (N.D.T. leading) la différence entre le corps de la police et la hauteur de la ligne, sa moitié se nomme demi-interligne. Après mise en forme, chaque ligne prend la forme d'une boîte de ligne (N.D.T. line-box) rectangulaire.

Si une ligne contient des parties dont les valeurs pour 'line-height' sont différentes (c'est qu'elle contient des éléments en-ligne), alors chacune de ces parties a sa propre demi-interligne au-dessus et au-dessous. La hauteur de la boîte de ligne s'étend du sommet de l'élément le plus haut au bas de l'élément le plus bas. Noter que le sommet et le bas de la ligne ne correspondent pas forcément à l'élément de plus grande hauteur, car la position dans le sens vertical d'un élément dépend aussi de sa propriété 'vertical-align'. Chaque boîte de ligne est empilée immédiatement sous la ligne précédente pour former un paragraphe.

Noter qu'espacement, bordure et marge du dessus et du dessous d'un élément en-ligne mais qui n'est pas remplacé n'influencent pas la hauteur de la ligne. C.-à-d., si la valeur de 'line-height' est trop petite pour l'espacement et la bordure choisie, l'élément risque de recouvrir le texte des autres lignes.

Dans une ligne, les éléments remplacés (ex. images) peuvent agrandir la boîte de ligne si son sommet (espacements, bordures et marges inclus) est plus haut que le sommet de la partie texte ou si son bas est en dessous du bas de ce même texte.

En temps normal, quand il n'y a qu'une seule valeur pour 'line-height' dans tout un paragraphe, sans images trop hautes, cette définition garantie que la base du texte des lignes successives est dissociée de 'line-height'. C'est important quand des colonnes de texte avec différentes polices doivent être alignées, dans une table par exemple.

Noter que ceci n'empêche pas le texte sur deux lignes adjacentes de se recouvrir. La valeur de 'line-height' peut être plus petite que la hauteur du texte ce qui traduit un interlignage négatif. Cela peut être utile si on sait que le texte ne contient pas de caractères avec jambage (ex. texte tout en capitales), on peut ainsi rapprocher les lignes entre elles.

4.5 Le canevas

On appelle canevas la partie de la surface affichée par l'agent utilisateur sur laquelle le document est représenté. Aucun élément de structure ne correspond à cette définition, ce qui amène deux questions au moment de la mise en forme d'un document :

  • quel est le repère à partir duquel établir les dimensions du canevas ?
  • si un document ne recouvre pas le canevas en son entier, comment rendre cet espace non occupé ?

À la première question, la raison veut que la largeur initiale du canevas soit basée sur la largeur de la fenêtre, cependant CSS1 ne répond pas à cette interrogation laissant l'agent utilisateur décider. On peut attendre de l'agent utilisateur qu'il modifie la largeur du canevas quand on redimensionne la fenêtre, mais ce n'est pas le but de CSS1 non plus.

À la deuxième question, on a le précédent des extensions HTML : les attributs de l'élément 'BODY' qui fixent les valeurs de fond de tout le canevas. Pour répondre aux souhaits des auteurs, CSS1 introduit une règle spéciale pour trouver le fond du canevas :

Utiliser la valeur de la propriété 'background' de l'élément 'HTML' si elle est différente de 'transparent', sinon prendre la valeur de 'background' de l'élément 'BODY'. Si cette valeur est 'transparent', alors le rendu n'est pas défini.

Cette règle permet cette construction :

<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">

Ici, le canevas est couvert par l'image "marble.png". Le fond de l'élément 'BODY' (qui recouvre complètement ou non le canevas) est rouge.

Comme on ne dispose pas encore de moyen pour adresser directement le canevas, il est recommandé de reporter les propriétés souhaitées pour celui-ci sur l'élément 'BODY'.

4.6 L'élément 'BR'

Le comportement de l'élément 'BR' n'est pas décrit par les propriétés et valeurs de CSS1. En HTML, 'BR' équivaut à un saut de ligne entre des mots. En fait, l'élément est remplacé par une fin de ligne. Les versions ultérieures de CSS prendront peut-être en compte un contenu ajouté ou remplacé, dans l'immédiat les interpréteurs CSS1 doivent traiter 'BR' spécifiquement.

5 Les propriétés de CSS1

Les feuilles de style agissent sur la présentation des documents par assignation de valeurs aux propriétés de style. Ce chapitre dresse la liste des définitions de ces propriétés ainsi que les valeurs qui peuvent leur être associées selon CSS1.

5.1 La notation des valeurs de propriété

La liste des valeurs autorisées pour chaque propriété suit une syntaxe de ce genre :

Valeur : N | NW | NE
Valeur : [ <longueur> | thick | thin ]{1,4}
Valeur : [<nom de la famille> , ]* <nom de la famille>
Valeur : <url>? <couleur> [ / <couleur> ]?
Valeur : <url> || <couleur>

Les mots entre "<" et ">" indiquent le type de la valeur. Les plus communs sont <longueur>, <pourcentage>, <url>, <nombre> et <couleur> qui sont définis au chapitre 6. Ceux d'un type plus spécialisé (ex. <famille-nom> et <bordure-style>) sont décrits dans la propriété correspondante.

Les autres mots sont des mots-clés devant apparaître littéralement, sans guillemets, tout comme la barre oblique (/) et la virgule (,).

Si plusieurs items sont juxtaposés, alors tous doivent survenir dans l'ordre donné. La barre (|) sépare les choix possibles, cela signifie qu'un parmi ceux-ci doit être choisi. La double barre (A || B) signifie le choix de A ou B ou des deux, dans n'importe quel ordre. Les crochets ([ ]) servent au regroupement. La juxtaposition a un poids plus grand que la double barre, et la double barre que la barre simple. Ainsi "a b | c || d e" équivaut à "[ a b ] | [ c || [ d e ]]".

Chaque type, mot-clé ou groupe entre crochets peut être suivi par l'un des modificateurs suivants :

  • L'astérisque (*) signifie que ce qui précède se répète zéro ou plusieurs fois.
  • Le plus (+), ce qui précède se répète une ou plusieurs fois.
  • Le point d'interrogation (?), ce qui précède est facultatif.
  • Une paire de nombre dans des accolades ({A,B}), ce qui précède se répète au moins A fois et au plus B fois.

5.2 Les propriétés des polices

Agir sur les propriétés des polices est un des usages les plus communs des feuilles de style. Malheureusement, il n'existe pas de taxonomie bien définie et universellement reconnue pour classer les polices, les termes appropriés à une famille de police ne s'appliquent pas forcément à d'autres familles. Par exemple, 'italic' est souvent utilisé pour désigner un texte en italique, mais un texte en italique est aussi qualifié d'écriture Oblique, Penchée, Inclinée, Cursive voire Kursiv. Ce qui rend difficile la relation entre les propriétés typiques de la police sélectionnée et une police spécifique.

CSS1 définit les propriétés 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size' et 'font'.

5.2.1 L'ajustement des polices

Du fait d'une taxonomie des polices non universelle, l'ajustement des propriétés à l'aspect des polices requiert un soin particulier. Elles sont ajustées dans un ordre bien déterminé pour assurer un rendu aussi consistant que possible entre agents utilisateurs (en supposant que la même librairie de polices leur soit présentée).

  1. L'agent utilisateur construit (ou accède à) une base de données des propriétés concernées de CSS1 pour toutes les polices dont l'existence lui est connue. Une police peut être connue parce qu'elle est déjà installée localement ou parce qu'elle a été téléchargée du Web un peu plus tôt. Si deux polices ont exactement les mêmes caractéristiques, l'une d'elles est ignorée.
  2. L'agent utilisateur réunit les propriétés de texte qui s'applique à un élément donné et pour chaque caractère de cet élément. Celui-ci, à l'aide du jeu complet des propriétés, applique la propriété 'font-family' pour y choisir une police et l'essayer. Pour chacune des autres propriétés, une vérification de concordance est faite avec celle-ci. Si toutes les propriétés sont concordantes, cette police est retenue pour cet élément.
  3. Si cette précédente étape échoue à faire correspondre la police désignée par 'font-family' et une police disponible, alors cette étape est reconduite avec la police suivante spécifiée dans 'font-family' tant qu'il y en a une.
  4. Si une police est trouvée mais qu'un caractère ne dispose pas d'un glyphe dans celle-ci, on répète le processus de correspondance avec la police suivante désignée par 'font-family', s'il y en a une. Voir l'annexe C pour des renseignements sur les polices et le codage des caractères.
  5. Si aucune police ne correspond à la famille spécifiée par 'font-family', alors l'agent utilisateur recommence les tests à partir de ses propres polices par défaut jusqu'à trouver le meilleur compromis parmi celles-ci.

(Cet algorithme peut être amélioré en évitant de tester chaque caractère avec l'ensemble des propriétés CSS1).

Les tests de correspondance de l'étape 2 ci-dessus se fondent sur les règles suivantes :

  1. Le test sur 'font-style' est essayé en premier. La valeur 'italic' est retenue si la base de données des polices de l'agent utilisateur contient une police marquée avec les mots-clés 'italic' (préférable) ou bien 'oblique'. Autrement les valeurs doivent correspondre exactement sinon le test sur 'font-style' échoue.
  2. Puis vient le test sur 'font-variant'. La valeur 'normal' retient une police qui n'est pas marquée 'small-caps'. La valeur 'small-caps' retient (1) une police marquée 'small-caps' ou (2) une police dans laquelle les petites capitales sont synthétisées ou (3) une police dont toutes les minuscules sont remplacées par des capitales. On peut synthétiser électroniquement les petites capitales en jouant sur l'échelle des capitales d'une police normale.
  3. Le test sur 'font-weight' n'échoue jamais. (Voir 'font-weight' plus loin).
  4. Le résultat du test sur 'font-size' doit s'inscrire dans une marge de valeurs qui dépend de l'agent utilisateur (typiquement, la taille des polices variables est arrondie au pixel entier le plus proche alors que la tolérance sur la taille des polices fixes peut aller jusqu'à 20%). Les calculs supplémentaires (p.ex. sur les valeurs exprimées en 'em' pour les autres propriétés) se basent alors sur la valeur établie pour 'font-size' et non sur la valeur qui y est spécifiée.

5.2.2 'font-family'

Valeur : [[<famille-nom> | <famille-générique>],]* [<famille-nom> | <famille-générique>]
Valeur initiale : propre à l'agent
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

Valeur représente une liste par ordre de priorité de noms de famille de polices et/ou de noms de famille génériques. Différence avec la plupart des autres propriétés CSS1, on sépare les valeurs avec une virgule pour montrer les choix possibles :

BODY { font-family: gill, helvetica, sans-serif }

On a deux types de liste de valeurs :

<famille-nom>
C'est le nom de la famille de police choisie. Dans l'exemple, "gill" et "helvetica" sont des familles de polices.
<famille-générique>
Toujours dans l'exemple, la dernière valeur est le nom d'une famille générique. Voici celles qui sont définies :
  • 'serif' (ex. Times)
  • 'sans-serif' (ex. Helvetica)
  • 'cursive' (ex. Zapf-Chancery)
  • 'fantasy' (ex. Western)
  • 'monospace' (ex. Courier)

On encourage les auteurs à proposer en dernier ressort une famille générique.

Si le nom d'une police contient un espace, on l'écrit entre guillemets :

BODY { font-family: "new century schoolbook", serif }

<BODY STYLE="font-family: 'Ma jolie police', fantasy">

Si on ne met pas les guillemets, les blancs situés avant et après le nom de la police sont ignorés et toute séquence de blancs à l'intérieur du nom se réduit à un seul.

5.2.3 'font-style'

Valeur : normal | italic | oblique
Valeur initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

La propriété 'font-style' effectue une sélection entre les déclinaisons d'une police, soit normale (qu'on qualifie aussi de "romaine"), italique et oblique.

La valeur 'normal' sélectionne une police dans la base de données des polices de l'agent utilisateur classée 'normal', et 'oblique' une police marquée 'oblique'. La valeur 'italic' recherche une police marquée 'italic' ou, si non disponible, 'oblique'.

Une police marquée 'oblique' dans la base de données de l'agent utilisateur peut en fait être une police normale qui a été penchée électroniquement.

Les polices dont le nom contient "Oblique", "Slanted" ou "Incline" sont typiquement considérées comme 'oblique' dans la base de données de l'agent utilisateur et celles dont le nom contient "Italic", "Cursive" ou "Kursiv" comme 'italic'.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

Dans cet exemple, le texte mis en exergue à l'intérieur de 'H1' prend un style normal.

5.2.4 'font-variant'

Valeur : normal | small-caps
Valeur initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

Les petites capitales (N.D.T. small-caps) sont un autre genre de variation dans une famille de police. Les minuscules d'une police en petites capitales ressemblent aux capitales avec une taille réduite et des proportions légèrement différentes. La propriété 'font-variant' sélectionne une telle police.

La valeur 'normal' retient une police qui n'est pas en petites capitales et 'small-caps' une police en petites capitales. CSS1 tolère (mais n'impose pas) que les petites capitales soient créées à partir des majuscules d'une police normale. Les majuscules se substituent aux petites capitales en dernier ressort.

Cet exemple montre un élément 'H3' en petites capitales avec des mots mis en exergue en petites capitales italiques :

H3 { font-variant: small-caps }
EM { font-style: oblique }

D'autres variations sont possibles dans une famille de police, telles les polices avec des chiffres de style ancien, des chiffres en petites capitales, des lettres au style condensé ou étendu, etc. CSS1 n'a pas de propriétés pour cela.

CSS1 de base : dans la mesure où cette propriété change le texte en capitales, ces considérations sont aussi valables pour 'text-transform'.

5.2.5 'font-weight'

Valeur : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Valeur initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

La propriété 'font-weight' donne la graisse (N.D.T. weight) de la police. Les valeurs de '100' à '900' forment une séquence ordonnée où chacune indique une graisse au moins aussi noire que la précédente. Le mot-clé 'normal' équivaut à '400' et 'bold' à '700'. Les mots-clés autres que ces derniers étaient souvent confondus avec le nom des polices, c'est pourquoi une échelle numérique a été préférée pour cette liste de 9 valeurs.

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */

Les valeurs 'bolder' et 'lighter' donnent un résultat relatif à la graisse héritée du parent :

STRONG { font-weight: bolder }

Les enfants héritent de la graisse résultante et non de la valeur du mot-clé.

Les polices (les données) ont typiquement une ou plusieurs propriétés dont le nom est révélateur de leur "graisse". Il n'existe pas de nomenclature universellement acceptée pour les dénominations des graisses. Elles servent principalement à distinguer les déclinaisons des graisses d'une même police. L'usage est très variable selon les familles de police. Vous pourriez par exemple considérer un texte écrit en gras alors qu'on le dit Regular, Roman, Book, Medium, Semi- ou DemiBold, Bold ou Black, dans la mise en page en fonction de la graisse de la police "normale". En l'absence d'une dénomination standard, CSS1 indique des valeurs pour la propriété de graisse sur une échelle graduée dans laquelle la valeur '400' ('normal') correspond au dessin de la police normale dans la famille. On associe couramment à celle-ci le nom de graisse Book, Regular, Roman, Normal ou parfois Medium.

Les autres valeurs de graisse disponibles dans l'échelle numérique ne sont présentes que pour conserver une certaine graduation de la graisse dans une famille de police. Voici quelques pistes qui montrent comment traiter certains cas typiques :

  • Si la famille de police utilise déjà une échelle de neuf valeurs (comme OpenType), les graisses devraient avoir une correspondance directe avec ces valeurs.
  • S'il existe à la fois une police marquée Medium et une marquée Book, Regular, Roman ou Normal, alors on fait correspondre la Medium à '500'.
  • La police marquée "Bold" correspond souvent à la valeur de graisse '700'.
  • S'il y a moins de 9 graisses dans la famille, un algorithme par défaut peut combler les "manques" comme ceci : si '500' n'a pas de police correspondante, on fait alors correspondre cette graisse à la même police qui correspond déjà à '400'. Si une parmi les valeurs '600', '700', '800' ou '900' n'a pas de police correspondante, alors cette valeur partage la même police correspondante, si elle existe, que celle du mot-clé 'bolder', ou sinon, que celle qui correspond à 'lighter'. Si une parmi les valeurs '300', '200' ou '100' n'a pas de correspondance, alors cette valeur partage la même correspondance, si elle existe, que celle du mot-clé 'lighter', ou sinon, que celle qui correspond à 'bolder'.

Les deux exemples suivants illustrent le processus. Supposons, allant du plus maigre au plus gras, que la famille "Exemple1" dispose des quatre graisses : Regular, Medium, Bold, Heavy. Et la famille "Exemple2" des six graisses : Book, Medium, Bold, Heavy, Black, ExtraBlack. Pour la famille "Exemple2", noter que "Exemple2 ExtraBlack" dans le deuxième exemple n'a pas de correspondance.

 Polices disponibles  | Corresp.     |  En comblant
----------------------+--------------+-------------------
"Exemple1 Regular"    | 400          |  100, 200, 300
"Exemple1 Medium"     | 500          |
"Exemple1 Bold"       | 700          |  600
"Exemple1 Heavy"      | 800          |  900

 Polices disponibles  | Corresp.     |  En comblant
----------------------+--------------+-------------------
"Example2 Book"       | 400          |  100, 200, 300
"Example2 Medium"     | 500          |
"Example2 Bold"       | 700          |  600
"Example2 Heavy"      | 800          |
"Example2 Black"      | 900          |
"Example2 ExtraBlack" | (...)        |

L'action des mots-clés relatifs 'bolder' et 'lighter' a pour effet de d'épaissir ou d'amaigrir une police dans une même famille. Quand une famille n'a pas de correspondant pour chacune des valeurs de graisse numériques, 'bolder' va être assigné à la police de graisse supérieure disponible pour l'agent utilisateur, et 'lighter' à la police de graisse inférieure. Suit la signification précise des mots-clés relatifs 'bolder' et 'lighter' :

  • 'bolder' prend la valeur de la graisse supérieure à celle qui est spécifiée. S'il manque la police correspondante, sa valeur prend simplement celle au-dessus dans l'échelle numérique (et la police ne change pas d'aspect), à moins que cette valeur ne soit déjà à '900', valeur qui, auquel cas, est conservée.
  • 'lighter' fonctionne de la même façon dans le sens inverse. La sélection se porte sur la police de graisse inférieure à celle qui est spécifiée, et, s'il manque la police correspondante, elle se fait sur la valeur numérique inférieure dans l'échelle (et la police ne change pas d'aspect).

L'existence d'une graisse plus épaisse pour toutes les valeurs de 'font-weight' n'est pas garantie. Par exemple, certaines familles de police n'ont que les graisses normale et grasse, d'autres peuvent avoir huit neuf graisses différentes. On ne sait jamais comment un agent utilisateur va faire correspondre les polices d'une famille avec les valeurs de graisse. La seule garantie est qu'une police pour une valeur de graisse donnée ne sera pas moins grasse qu'une police de valeur de graisse moindre.

5.2.6 'font-size'

Valeur : <taille absolue> | <taille relative> | <longueur> | <pourcentage>
Valeur initiale : medium
S'applique à : tous les éléments
Héritée : oui
Pourcentage : relatif à la taille de police du parent

<taille absolue>
Le mot-clé <taille absolue> est un index pointant sur la table des tailles de police qui est calculée et maintenue par l'agent utilisateur. Les valeurs possibles : [ xx-small | x-small | small | medium | large | x-large | xx-large ]. Pour un écran d'ordinateur, il est suggéré un facteur d'échelle de 1.5 entre deux index adjacents ; si pour 'medium' la taille de la police fait 10pt, pour 'large', elle fait 15pt. Ce facteur nécessite sûrement une adaption aux différents médias. L'agent utilisateur peut aussi considérer la qualité et la disponibilité des polices au moment de dresser cette table. Cette table peut être différente d'une famille de police à l'autre.
<taille relative>
Le mot-clé <taille relative> s'entend relatif à la table des tailles de police et à la taille de police du parent. Les valeurs possibles sont : [ larger | smaller ]. Par exemple, admettons que le parent ait une taille de police 'medium', la valeur 'larger' fera passer la taille de police de l'enfant à 'large'. Si la taille de la police du parent est trop éloignée d'une des entrées de la table, l'agent utilisateur est libre d'interpoler entre différentes entrées ou d'arrondir au plus proche. Il peut y être contraint si les mots-clés provoquent une sortie du champs de valeur de la table.

Les valeurs de longueur et de pourcentage ne devraient pas dépendre de la table des tailles de police pour le calcul de la taille de police d'un élément.

Les valeurs négatives sont interdites.

Pour toutes les autres propriétés, les valeurs en 'em' et 'ex' dépendent de la taille de police de l'élément même. Pour la propriété 'font-size', ces unités de longueur se réfèrent à la taille de police de l'élément parent.

Noter qu'une application peut redéfinir une taille explicite selon le contexte. Exemple, une scène en Réalité Virtuelle où la taille de la police peut varier avec la perspective.

Exemples :

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

Avec le facteur d'échelle 1.5 suggéré, les trois dernières déclarations sont identiques.

5.2.7 'font'

Valeur : [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Valeur initiale : non défini pour les propriétés génériques
S'applique à : tous les éléments
Héritée : oui
Pourcentage : admis sur <font-size> et <line-height>

La propriété générique 'font' est un raccourci pour regrouper 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' et 'font-family' dans la feuille de style. Sa syntaxe est basée sur une notation traditionnelle écourtée dans le but d'adresser plusieurs propriétés liées aux polices.

Pour leurs valeurs admises et leur valeur initiale, voir les propriétés déjà définies. Les propriétés dont aucune valeur n'apparaît prennent leur valeur initiale.

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

Dans la deuxième règle, la valeur exprimée en pourcentage se réfère à la taille de la police de l'élément parent. Dans la troisième règle, la hauteur de ligne exprimée en pourcentage se réfère à la taille de police de l'élément lui-même.

Dans les trois premières règles, les propriétés 'font-style', 'font-variant' et 'font-weight' ne sont pas mentionnées explicitement, cela signifie qu'elles gardent leur valeur initiale ('normal'). La quatrième règle spécifie implicitement les valeurs 'bold' pour 'font-weight', 'italic' pour 'font-style' et 'normal' pour 'font-variant'.

La cinquième règle fixe les valeurs des propriétés 'font-variant' ('small-caps'), 'font-size' (120% du parent), 'line-height' (120% de la taille de la police) et 'font-family' ('fantasy'). Leur valeur initiale qui est 'normal' est donc appliquée aux deux propriétés restantes, 'font-style' et 'font-weight'.

5.3 Les propriétés de couleur et de fond

Ces propriétés décrivent la couleur (souvent appelé couleur de premier plan) et le fond d'un élément (c.-à-d., la surface sur laquelle le contenu est rendu). On peut donner une couleur et/ou une image au fond. On peut aussi préciser la position de cette image, si elle doit se répéter et comment, et dire si elle doit rester fixe ou défiler avec le canevas.

La propriété 'color' s'hérite normalement. Les propriétés de fond n'héritent pas, cependant le fond du parent sera visible par défaut car la propriété 'background-color' a pour valeur initiale 'transparent'.

5.3.1 'color'

Valeur : <couleur>
Valeur initiale : selon l'agent
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

Cette propriété décrit la couleur du texte d'un élément. On peut spécifier la couleur rouge de plusieurs façons :

EM { color: red }              /* langage naturel */
EM { color: rgb(255,0,0) }     /* valeurs RGB de 0 à 255 */

Voir au chapitre 6.3 pour les valeurs de couleur possibles.

5.3.2 'background-color'

Valeur : <couleur> | transparent
Valeur initiale : transparent
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété fixe la couleur du fond d'un élément.

H1 { background-color: #F00 }

5.3.3 'background-image'

Valeur : <url> | none
Valeur initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété précise l'image de fond d'un élément. Quand on a une image de fond, il est aussi souhaitable de donner une couleur de fond qui reste visible quand l'image n'est pas disponible. Celle ci s'affiche par dessus la couleur de fond dès qu'elle est disponible.

BODY { background-image: url(marble.gif) }
P { background-image: none }

5.3.4 'background-repeat'

Valeur : repeat | repeat-x | repeat-y | no-repeat
Valeur initiale : repeat
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Quand on a une image de fond, la propriété 'background-repeat' détermine si l'image doit se répéter et le cas échéant la manière dont elle se répète.

L'image est répétée à la fois dans les sens horizontal et vertical pour la valeur 'repeat', dans le sens horizontal pour la valeur 'repeat-x', ce qui produit une bande d'images d'un bord à l'autre. Idem pour 'repeat-y' dans le sens vertical. La valeur 'no-repeat' supprime toute répétition.

BODY {
  background: red url(pendant.gif);
  background-repeat: repeat-y;
}

Ici, l'image est répétée verticalement.

5.3.5 'background-attachment'

Valeur : scroll | fixed
Valeur initiale : scroll
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Si on a une image de fond, la valeur de 'background-attachment' détermine si celle-ci est fixe par rapport au canevas ('fixed') ou si elle défile en même temps que le contenu ('scroll').

BODY {
  background: red url(pendant.gif);
  background-repeat: repeat-y;
  background-attachment: fixed;
}

CSS1 de base : L'agent utilisateur peut substituer la valeur 'scroll' à 'fixed'. Néanmoins, 'fixed' doit être interprété correctement, au moins pour les éléments 'HTML' et 'BODY', l'auteur n'ayant aucun moyen de fournir une image uniquement aux navigateurs comprenant cette valeur. (Cf. chapitre 7).

5.3.6 'background-position'

Valeur : [<pourcentage> | <longueur>]{1,2} | [top | center | bottom] || [left | center | right]
Valeur initiale : 0% 0%
S'applique à : ceux des éléments de type bloc et remplacés
Héritée : non
Pourcentage : relatif à la taille de l'élément lui-même

Si on a une image de fond, la valeur de 'background-position' en précise la position initiale.

Avec la paire de valeur '0% 0%', le coin en haut à gauche de l'image est aligné sur celui de la boîte qui entoure le contenu de l'élément (pas la boîte qui englobe l'espacement, la bordure et la marge). La paire de valeur '100% 100%' positionne le coin en bas à droite de l'image sur celui de l'élément. Avec la paire de valeur '14% 84%', le point situé 14% vers la droite et 84% vers le bas dans l'image est placé sur le point situé 14% vers la droite et 84% vers le bas dans l'élément.

Avec la paire de valeur '2cm 2cm', le coin en haut à gauche de l'image est placé 2cm vers la droite et 2cm sous le coin en haut à gauche de l'élément.

Si une seule valeur de pourcentage ou de longueur est fournie, celle-ci ne donne que la position horizontale, la position verticale sera 50%. Si on fournit deux valeurs, la première est la position horizontale. Les combinaisons de valeurs exprimées en longueur et en pourcentage sont admises, ex. '50% 2cm'. Les positions négatives ne le sont pas.

On peut aussi utiliser des mots-clés pour indiquer la position de l'image de fond. Les combinaisons avec des mots-clés et des valeurs en pourcentage ou longueur ne sont pas permises. Voici les combinaisons possibles de mots-clés et leurs interprétations :

  • 'top left' et 'left top' <==> '0% 0%'.
  • 'top', 'top center' et 'center top' <==> '50% 0%'.
  • 'right top' et 'top right' <==> '100% 0%'.
  • 'left', 'left center' et 'center left' <==> '0% 50%'.
  • 'center' et 'center center' <==> '50% 50%'.
  • 'right', 'right center' et 'center right' <==> '100% 50%'.
  • 'bottom left' et 'left bottom' <==> '0% 100%'.
  • 'bottom', 'bottom center' et 'center bottom' <==> '50% 100%'.
  • 'bottom right' et 'right bottom' <==> '100% 100%'.

Exemples :

BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
BODY { background: url(banner.jpeg) center }       /*  50%  50% */
BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

Si l'image de fond est fixe par rapport au canevas (cf. 'background-attachment' plus haut), l'image se place relativement à celui-ci et non à l'élément. Exemple :

BODY {
  background-image: url(logo.png);
  background-attachment: fixed;
  background-position: 100% 100%;
}

Ici, l'image bute dans le coin en bas à droite du canevas.

5.3.7 'background'

Valeur : <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Valeur initiale : non définie pour les propriétés génériques
S'applique à : tous les éléments
Héritée : non
Pourcentage : admis pour <background-position>

La propriété générique 'background' est un raccourci pour regrouper les propriétés de fond individuelles ('background-color', 'background-image', 'background-repeat', 'background-attachment' et 'background-position') dans la feuille de style.

Les valeurs de la propriété 'background' sont formées d'un jeu des valeurs possibles pour ces propriétés individuelles.

BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }

La propriété 'background' fixe toutes les propriétés de fond individuelles. Dans l'exemple ci-dessus, la première règle spécifie juste une valeur pour 'background-color', les valeurs initiales des autres propriétés individuelles sont implicites. Dans la seconde règle, les valeurs sont spécifiées pour chacune des propriétés individuelles.

5.4 Les propriétés du texte

5.4.1 'word-spacing'

Valeur : normal | <longueur>
Valeur initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

La valeur indiquée par <longueur> s'ajoute à celle de l'espace normal entre les mots. Cette valeur peut être négative, mais son interprétation s'inscrira dans des limites spécifiques à l'agent utilisateur. Celui-ci est libre de calculer l'espace exact. L'espace-mot (N.D.T. word-spacing) peut aussi subir l'influence de la justification (qui est une valeur de la propriété 'text-align').

H1 { word-spacing: 1em }

Ici, l'espace-mot des éléments 'H1' est augmenté de 1em.

CSS1 de base : L'agent utilisateur peut substituer la valeur de longueur de 'word-spacing' par 'normal'. Cf. chapitre 7.

5.4.2 'letter-spacing'

Valeur : normal | <longueur>
Valeur initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

La valeur indiquée par <longueur> s'ajoute à l'interlettrage par défaut. Cette valeur peut être négative, mais son interprétation s'inscrira dans des limites spécifiques à l'agent utilisateur. L'agent utilisateur est libre de calculer l'espace exact. L'interlettrage peut subir l'influence de la justification (une des valeurs de la propriété 'text-align').

BLOCKQUOTE { letter-spacing: 0.1em }

Ici, l'interlettrage des éléments 'BLOCKQUOTE' est augmenté de 0.1em.

La valeur 'normal' autorise l'agent utilisateur à modifier l'interlettrage pour la justification du texte. Si 'letter-spacing' a une valeur de longueur, ce n'est plus le cas :

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

L'agent utilisateur ne peut utiliser de ligatures si l'interlettrage a été modifié.

CSS1 de base : L'agent utilisateur peut interpréter une valeur de longueur de 'letter-spacing' par 'normal'. Cf. chapitre 7.

5.4.3 'text-decoration'

Valeur : none | [ underline || overline || line-through || blink ]
Valeur initiale : none
S'applique à : tous les éléments
Héritée : non, voir explication plus bas
Pourcentage : sans objet

Cette propriété décrit les décorations ajoutées au texte d'un élément. Elle n'a aucun effet sur les éléments dépourvus de texte (ex. 'IMG' en HTML) ou sur les éléments vides (ex. '<EM></EM>'). La valeur 'blink' fait clignoter le texte.

La(les) couleur(s) requise(s) pour la décoration devrai(en)t être issue(s) de la valeur de la propriété 'color'.

La propriété ne s'hérite pas, cependant les éléments doivent tenir de leur parent. Un exemple, les enfants d'un élément souligné devraient aussi l'être. La couleur de soulignage doit se perpétuer même si les descendants ont d'autres valeurs pour 'color'.

A:link, A:visited, A:active { text-decoration: underline }

Dans l'exemple, le texte de tous les liens (les éléments 'A' avec un attribut 'HREF') est souligné.

Les agents utilisateurs doivent reconnaître le mot-clé 'blink' mais ne sont pas tenus d'en réaliser l'effet.

5.4.4 'vertical-align'

Valeur : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Valeur initiale : baseline
S'applique à : les éléments en-ligne
Héritée : non
Pourcentage : selon la valeur de 'line-height' de l'élément lui-même

La propriété agit sur le positionnement vertical de l'élément. Un jeu de mots-clés est relatif à l'élément parent :

'baseline'
aligne la ligne de base d'un élément (ou le bas, si l'élément n'a pas de ligne de base) sur celle de son parent.
'middle'
aligne le milieu vertical d'un élément (en général une image) sur le milieu vertical de l'élément parent, c.à.d., sa ligne de base relevée de la moitié de sa hauteur.
met l'élément en indice.
'sub'
met l'élément en indice.
'super'
met l'élément en exposant.
'text-top'
aligne le sommet d'un élément avec celui du texte du parent.
'text-bottom'
aligne le bas d'un élément avec le bas du texte du parent.

Un autre jeu est relatif à la ligne dont fait partie l'élément :

'top'
aligne le sommet de l'élément avec celui de l'élément le plus haut dans la ligne.
'bottom'
aligne le bas de l'élément avec celui de l'élément le plus bas dans la ligne.

L'utilisation conjointe de 'top' et 'bottom' peuvent conduire à des situations sans issues en cas de références circulaires.

Les valeurs en pourcentage se réfèrent à la valeur de la propriété 'line-height' de l'élément en question. Ces valeurs montent la ligne de base de élément (ou le bas, s'il n'en a pas) au-dessus de celle du parent de la quantité déterminée. Les valeurs négatives sont admises. Par exemple, une valeur de '-100%' abaisse l'élément de telle manière que sa ligne de base prend la place de celle de la ligne suivante. Ceci permet un contrôle précis du positionnement vertical des éléments qui n'ont pas de ligne de base (comme avec l'utilisation d'images en lieu de texte).

Une version ultérieure de CSS autorisera sans doute les valeurs de <longueur> pour cette propriété.

5.4.5 'text-transform'

Valeur : capitalize | uppercase | lowercase | none
Valeur initiale : none
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet

'capitalize'
met la première lettre de chaque mot en majuscule
'uppercase'
met en majuscule toutes les lettres de l'élément
'lowercase'
met en minuscule toutes les lettres de l'élément
'none'
neutralise la valeur héritée.

Dans chaque cas, la transformation effectuée dépend de la langue. Voir en [4] la façon de déterminer la langue pour un élément.

H1 { text-transform: uppercase }

Le contenu de 'H1' est en majuscule.

CSS1 de base : Les agents utilisateurs peuvent ignorer 'text-transform' et le traiter comme 'none' pour les caractères qui ne font pas partie du répertoire Latin-1 ou pour les éléments avec des langues dont la transformation serait différente par rapport à celle prévue dans les tables de conversion Unicode [8].

5.4.6 'text-align'

Valeur : left | right | center | justify
Valeur initiale : selon l'agent utilisateur
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : sans objet

Cette propriété décrit l'alignement du texte d'un élément. L'algorithme de justification appliqué dépend de l'agent utilisateur et de la langue.

Exemple :

DIV.center { text-align: center }

Comme la propriété 'text-align' est héritée, toutes les boîtes de ligne de tous les sous-éléments de type bloc de 'DIV' dont la classe est 'center' sont centrés. Noter que l'alignement est appliqué relativement à la largeur de l'élément et non au canevas. L'agent utilisateur doit remplacer la valeur 'justify' s'il ne reconnaît pas celle-ci. C'est en général 'left' pour les langues occidentales.

CSS1 de base : L'agent utilisateur peut interpréter 'justify' respectivement comme 'left' ou 'right' selon que le sens d'écriture est de la gauche vers la droite ou de la droite vers la gauche.

5.4.7 'text-indent'

Valeur : <longueur> | <pourcentage>
Valeur initiale : 0
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : relatif à la largeur du parent

La propriété spécifie l'alinéa (N.D.T. indent) appliqué sur la première ligne formatée. La valeur de 'text-indent peut être négative, mais son interprétation est soumise aux limites de tel ou tel agent utilisateur. L'alinéa ne peut apparaître au milieu d'un élément coupé par un autre (ainsi 'BR' en HTML).

Exemple:

P { text-indent: 3em }

5.4.8 'line-height'

Valeur : normal | <nombre> | <longueur> | <pourcentage>
Valeur initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : relatif à la taille de la police de l'élément lui-même

Cette propriété fixe l'écart entre les lignes de base de deux lignes adjacentes.

Si on spécifie une valeur numérique, la hauteur de ligne est obtenue en multipliant la taille de police de l'élément en question avec cette valeur-là. Ce qui est différent d'une valeur en pourcentage qui est héritée car les enfants héritent de la valeur numérique elle-même et non pas de la valeur résultante (comme c'est le cas pour le pourcentage et d'autres unités).

On n'admet pas de valeurs négatives.

Les trois règles suivantes donnent une même hauteur de ligne :

DIV { line-height: 1.2; font-size: 10pt }     /* nombre */
DIV { line-height: 1.2em; font-size: 10pt }   /* longueur */
DIV { line-height: 120%; font-size: 10pt }    /* pourcentage */

La valeur 'normal' met la hauteur de ligne dans un rapport raisonnable avec la police de l'élément. De préférence, l'agent utilisateur établit une valeur dans un rapport de 1.0 à 1.2.

Voir le chapitre 4.4 pour une description de l'influence de 'line-height' sur le format d'un élément de type bloc.

5.5 Propriétés de boîte

Ces propriétés fixent la taille, les contours et la position des boîtes qui représentent les éléments. Voir le modèle de mise en forme (chapitre 4) pour des exemples d'application.

Les propriétés de marge spécifient les marges d'un élément. La propriété 'margin' fixe les marges sur les quatre bords, les propriétés de marge spécifiques fixent leur côté respectif.

Les propriétés d'espacement spécifient l'espace entre la bordure et le contenu (ex. texte ou image). La propriété 'padding' fixe l'espacement sur les quatre bords, les propriétés d'espacement spécifiques de leur côté respectif.

Les propriétés de bordure spécifient les bordures d'un propriété. Chaque élément possède quatre bordures définies par leur largeur, couleur et style.

Les propriétés 'width' et 'height' spécifient la taille de la boîte. Les propriétés 'float' et 'clear' peuvent modifier la position des éléments.

5.5.1 'margin-top'

Valeur : <longueur> | <pourcentage> | auto
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne la marge du haut d'un élément :

H1 { margin-top: 2em }

On admet une valeur négative, mais son interprétation est soumise aux limites de l'agent utilisateur.

5.5.2 'margin-right'

Valeur : <longueur> | <pourcentage> | auto
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne la marge de droite d'un élément :

H1 { margin-right: 12.3% }

On admet une valeur négative, mais son interprétation est soumise aux limites de l'agent utilisateur.

5.5.3 'margin-bottom'

Valeur : <longueur> | <pourcentage> | auto
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne la marge du bas d'un élément :

H1 { margin-bottom: 3px }

On admet une valeur négative, mais son interprétation est soumise aux limites de l'agent utilisateur.

5.5.4 'margin-left'

Valeur : <longueur> | <pourcentage> | auto
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne la marge de gauche d'un élément :

H1 { margin-left: 2em }

On admet une valeur négative, mais son interprétation est soumise aux limites de l'agent utilisateur.

5.5.5 'margin'

Valeur : [ <longueur> | <pourcentage> | auto ]{1,4}
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

La propriété 'margin' est un raccourci pour fixer et regrouper les propriétés 'margin-top', 'margin-right', 'margin-bottom' et 'margin-left' dans la feuille de style.

Si on spécifie quatre valeurs de longueur, celles-ci correspondent respectivement aux marges haute, droite, basse et gauche. Si on ne spécifie qu'une valeur, elle s'applique aux quatre côtés et s'il y en a deux ou trois, on déduit les valeurs manquantes de celles des côtés opposés.

BODY { margin: 2em }         /* toutes les marges ont 2em */
BODY { margin: 1em 2em }     /* haut et bas = 1em, droite et gauche = 2em */
BODY { margin: 1em 2em 3em } /* haut = 1em, droite = 2em, bas = 3em, gauche = 2em */

La dernière règle de cet exemple est équivalente à :

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;    /* pris du côté opposé (droit) */
}

On admet les valeurs négatives, mais leur interprétation est soumise aux limites de l'agent utilisateur.

5.5.6 'padding-top'

Valeur : <longueur> | <pourcentage>
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne l'espacement du haut d'un élément.

BLOCKQUOTE { padding-top: 0.3em }

Les valeurs d'espacement ne sont jamais négatives.

5.5.7 'padding-right'

Valeur : <longueur> | <pourcentage>
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne l'espacement de droite d'un élément.

BLOCKQUOTE { padding-right: 10px }

Les valeurs d'espacement ne sont jamais négatives.

5.5.8 'padding-bottom'

Valeur : <longueur> | <pourcentage>
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne l'espacement du bas d'un élément.

BLOCKQUOTE { padding-bottom: 2em }

Les valeurs d'espacement ne sont jamais négatives.

5.5.9 'padding-left'

Valeur : <longueur> | <pourcentage>
Valeur initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

Cette propriété concerne l'espacement de gauche d'un élément.

BLOCKQUOTE { padding-left: 20% }

Les valeurs d'espacement ne sont jamais négatives.

5.5.10 'padding'

Valeur : [ <longueur> | <pourcentage> ]{1,4}
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : relatif à la dimension du parent de type bloc le plus proche

La propriété 'padding' est un raccourci pour fixer et regrouper les propriétés 'padding-top', 'padding-right', 'padding-bottom' et 'padding-left' dans la feuille de style.

Si on spécifie quatre valeurs de longueur, celles-ci correspondent respectivement aux espacements haut, droit, bas et gauche. Si on ne spécifie qu'une valeur, elle s'applique aux quatre côtés et s'il y en a deux ou trois, on déduit les valeurs manquantes de celles des côtés opposés.

Le fond de la surface d'espacement est spécifié par la propriété 'background' :

H1 {
  background: white;
  padding: 1em 2em;
}

Cet exemple montre un espacement vertical de 1em ('padding-top' et 'padding-bottom') et un espacement horizontal de 2em ('padding-right' et 'padding-left'). L'unité 'em' est relative à la taille de la police de l'élément, ainsi '1em' correspond à la taille de cette police.

Les valeurs d'espacement ne sont jamais négatives.

5.5.11 'border-top-width'

Valeur : thin | medium | thick | <longueur>
Valeur initiale : 'medium'
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété spécifie l'épaisseur de la bordure du haut d'un élément. La dimension donnée par les mots-clés dépend de l'agent utilisateur, mais ceci est toujours vérifié : 'thin' <= 'medium' <= 'thick'.

Les valeurs issues des mots-clés sont constantes pour un document :

H1 { border: solid thick red }
P  { border: solid thick blue }

Ici, les éléments 'H1' et 'P' ont une mème épaisseur indépendamment de la taille de la police. On peut obtenir des dimensions relatives en utilisant l'unité 'em' :

H1 { border: solid 0.5em }

Les bordures n'ont pas de valeurs négatives.

5.5.12 'border-right-width'

Valeur : thin | medium | thick | <longueur>
Valeur initiale : 'medium'
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété spécifie l'épaisseur de la bordure de droite d'un élément. Sinon, elle équivaut à 'border-top-width'.

5.5.13 'border-bottom-width'

Valeur : thin | medium | thick | <length>
Valeur initiale : 'medium'
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété spécifie l'épaisseur de la bordure du bas d'un élément. Sinon, elle équivaut à 'border-top-width'.

5.5.14 'border-left-width'

Valeur : thin | medium | thick | <length>
Valeur initiale : 'medium'
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété spécifie l'épaisseur de la bordure de gauche d'un élément. Sinon, elle équivaut à 'border-top-width'.

5.5.15 'border-width'

Valeur : [thin | medium | thick | <longueur>]{1,4}
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Pourcentage : sans objet

Cette propriété est un raccourci pour fixer et regrouper 'border-width-top', 'border-width-right', 'border-width-bottom' et 'border-width-left' 'border-top-width', 'border-right-width', 'border-bottom-width' et 'border-left-width' dans la feuille de style.

Elle se compose d'une à quatre valeurs qu'on interprète ainsi :

  • une valeur : les quatre bordures ont la mème épaisseur
  • deux valeurs : la première valeur est attribuée aux bordures du haut et du bas, la deuxième valeur à celles de droite et de gauche
  • trois valeurs : la première pour le haut, la deuxième pour la droite et la gauche la troisième pour le bas
  • quatre valeurs : le haut, la droite, le bas et la gauche respectivement.

Dans cet exemple, les commentaires indique les valeurs attribuées dans l'ordre haut, droite, bas et gauche :

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thin thick */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */

Les bordures n'ont pas de valeurs négatives.

5.5.16 'border-color'

Valeur : <couleur>{1,4}
Valeur initiale : la valeur de la propriété 'color'
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

La propriété 'border-color' spécifie la couleur des quatres bordures. Elle se compose d'une à quatre valeurs de la même façon que pour 'border-width' au-dessus.

Si on ne spécifie aucune couleur, 'border-color' prend la valeur de la propriété 'color' de l'élément lui-même :

P {
  color: black;
  background: white;
  border: solid;
}

Ici, la bordure forme un cadre noir.

5.5.17 'border-style'

Valeur : [none | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}
Valeur initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

La propriété 'border-color' spécifie le style des quatre bordures. Elle se compose d'une à quatre valeurs de la même façon que pour 'border-width' au-dessus.

#xy34 { border-style: solid dotted }

Ici, les bordures horizontales sont en trait plein et les verticales en trait pointillé.

La valeur initiale de la propriété étant 'none', les bordures sont invisibles tant qu'aucune autre valeur n'est spécifiée.

Les valeurs de style de bordure signifient :

none
aucune bordure n'apparaît (indépendamment de la valeur de 'border-width')
dotted
la bordure est une ligne pointillée tracée sur le fond de l'élément
dashed
la bordure est une ligne en tirets tracée sur le fond de l'élément
solid
la bordure est un trait plein
double
la bordure est un trait double tracé sur le fond de l'élément. La somme des épaisseurs des deux traits simples et de l'espace entre eux est égale à la valeur de <border-width>
groove
une cannelure en 3D est dessinée d'après la valeur de <color>.
ridge
une strie en 3D est dessinée d'après la valeur de <color>.
inset
une incrustation en 3D est dessinée d'après la valeur de <color>.
outset
une extrusion en 3D est dessinée d'après la valeur de <color>.

CSS1 de base : L'agent utilisateur peut interpréter 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' et 'outset' comme un trait plein ('solid').

5.5.18 'border-top'

Valeur : <border-top-width> || <border-style> || <couleur>
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété est un raccourci pour spécifier l'épaisseur, le style et la couleur de la bordure du haut d'un élément.

H1 { border-top: thick solid red }

La règle ci-dessus indique l'épaisseur, le style et la couleur de la bordure au-dessus de 'H1'. Les valeurs omises prennent leur valeur initiale :

H1 { border-top: thick solid }

Comme ici la valeur de la couleur est omise, la bordure prend la valeur de 'color' de l'élément lui-même.

Noter que cette propriété n'a qu'une seule valeur de style alors que 'border-style' en accepte jusqu'à quatre.

5.5.19 'border-right'

Valeur : <border-right-width> || <border-style> || <couleur>
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété est un raccourci pour spécifier l'épaisseur, le style et la couleur de la bordure de droite d'un élément. Sinon, elle équivaut à 'border-top'.

5.5.20 'border-bottom'

Value: <border-bottom-width> || <border-style> || <color>
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété est un raccourci pour spécifier l'épaisseur, le style et la couleur de la bordure du bas d'un élément. Sinon, elle équivaut à 'border-top'.

5.5.21 'border-left'

Valeur : <border-left-width> || <border-style> || <couleur>
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété est un raccourci pour spécifier l'épaisseur, le style et la couleur de la bordure de gauche d'un élément. Sinon, elle équivaut à 'border-top'.

5.5.22 'border'

Valeur : <border-width> || <border-style> || <couleur>
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Pourcentage : sans objet

La propriété 'border' est un raccourci pour donner la même valeur d'épaisseur, de couleur et de style aux quatre bordures d'un élément. Ainsi dans l'exemple, la première règle produit le même effet que le jeu de quatre règles qui la suit :

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

À l'inverse des propriétés raccourcies 'margin' et 'padding', 'border' ne peut pas donner des valeurs différentes aux quatre bordures. Pour ce faire, il faut utiliser une ou plusieurs des autres propriétés de bordure.

Les fonctions de ces propriétés peuvent se recouper, aussi l'ordre d'écriture des règles devient important. Considérons ce qui suit :

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black;
}

Dans cet exemple, la bordure gauche est noire tandis que les autres sont rouges. C'est le fait de 'border-left', la valeur de la couleur n'étant pas spécifiée, qui va prendre la valeur de la propriété 'color'. Le fait que cette dernière soit fixée après la propriété 'border-left' ne fait pas de différence.

La propriété 'border' n'accepte qu'une seule valeur, bien que 'border-width' puisse en avoir jusqu'à quatre.

5.5.23 'width'

Valeur : <longueur> | <pourcentage> | auto
Valeur initiale : auto
S'applique à : ceux des éléments de type bloc et remplacés
Héritée : non
Pourcentage : relatif à la largeur du parent

On peut appliquer cette propriété au texte, elle est cependant bien plus utile avec les éléments remplacés comme les images. Si nécessaire, on peut contraindre la largeur d'une image. Dans un changement d'échelle, le ratio de l'image rendue est conservé si la propriété 'height' a la valeur 'auto'.

Exemple :

IMG.icon { width: 100px }

Pour un élément remplacé, les dimensions intrinsèques de l'objet qui le remplace sont assignées aux propriétés 'width' et 'height' si leur valeur initiale était 'auto'.

Les valeurs négatives ne sont pas admises.

Voir le modèle de mise en forme (chapitre 4) pour les relations existants entre cette propriété et la marge et l'espacement.

5.5.24 'height'

Valeur : <longueur> | auto
Valeur initiale : auto
S'applique à : ceux des éléments de type bloc et remplacés
Héritée : non
Pourcentage : sans objet

On peut appliquer cette propriété au texte, elle est cependant bien plus utile avec les éléments remplacés comme les images. Si nécessaire, on peut contraindre la hauteur d'une image. Dans un changement d'échelle, le ratio de l'image rendue est conservé si la propriété 'width' a la valeur 'auto'.

Exemple :

IMG.icon { height: 100px }

Quand les valeurs des propriétés 'width' et 'height' d'un élément remplacé sont à leur valeur par défaut 'auto', celles-ci adoptent les dimensions intrinsèques de l'objet qui le remplace.

On peut l'appliquer à un élément textuel et ainsi contraindre sa hauteur (ex. barre de défilement).

Les valeurs négatives ne sont pas admises.

CSS1 de base : L'agent utilisateur peut ignorer la propriété 'height' (c.-à-d., considérer sa valeur étant 'auto'), si elle est appliquée à un élément qui ne soit pas remplacé.

5.5.25 'float'

Valeur : left | right | none
Valeur initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Pour une valeur 'none', l'élément s'affiche dans le flux normal du texte. Pour une valeur 'left' (ou 'right'), l'élément se place sur la gauche (ou droite) et le texte épouse son côté droit (ou gauche). Avec les valeurs 'left' ou 'right', l'élément acquiert un type bloc (c.-à-d. que la propriété 'display' est ignorée). Voir le chapitre 4.1.4 pour une explication complète.

IMG.icon {
  float: left;
  margin-left: 0;
}

Dans cet exemple, les éléments 'IMG' avec un attribut 'CLASS="icon"' sont positionnés au côté gauche de leur parent.

On utilise le plus souvent 'float' avec des images en ligne, mais on l'applique aussi aux éléments avec du texte.

5.5.26 'clear'

Valeur : none | left | right | both
Valeur initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété spécifie si un élément accepte des éléments flottants contre ses bords. Plus précisément, la valeur de la propriété indique les côtés contre lesquels ceux-ci ne peuvent venir. L'élément dont la propriété 'clear' a la valeur 'left' ira se placer en-dessous de tout élément flottant qui serait à sa gauche. Avec une valeur 'none', les éléments flottants sont admis sur chacun de ses côtés. Exemple :

H1 { clear: left }

5.6 Les propriétés de classification

Ces propriétés ont plus d'intérêt pour classer des éléments en catégories que pour la spécification de paramètres visuels.

Les propriétés de liste décrivent la mise en forme des items d'une liste (les éléments avec une valeur 'list-item' pour la propriété 'display'). Ces propriétés s'appliquent à tout élément, leurs descendants en héritent mais uniquement ceux dont la propriété 'display' a pour valeur 'list-item'. En HTML, il s'agit typiquement de l'élément 'LI'.

5.6.1 'display'

Valeur : block | inline | list-item | none
Valeur initiale : block
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet

Cette propriété spécifie si et comment un élément doit s'afficher dans le canevas (que ce soit une page, un moniteur, etc.).

Un élément dont la valeur pour 'display' est 'block' crée une nouvelle boîte. Celle-ci se positionne par rapport aux boîtes adjacentes selon le modèle de mise en forme de CSS. Les éléments' 'H1' et 'P' ont typiquement la valeur 'block'. La valeur 'list-item' confère un comportement similaire à celui de la valeur 'block', à la différence qu'une marque de liste se rajoute. En HTML, c'est la valeur typique de l'élément 'LI'.

Un élément dont la valeur pour 'display' est 'inline' crée une boîte dans le prolongement de la ligne du contenu qui précède. La boîte prend la dimension voulue pour la mise en forme de son contenu. Un contenu textuel peut s'étendre sur plusieurs lignes avec autant de boîtes de ligne. Les propriétés de marge, bordure et espacement s'appliquent aux éléments ainsi créés mais n'ont aucun effet à l'endroit des sauts de ligne.

La valeur 'none' supprime l'affichage d'un élément et de sa boîte ainsi que des éléments qu'il contient.

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

La dernière règle supprime l'affichage des images.

La valeur initiale de 'display' est 'block', cependant l'agent utilisateur peut n'appliquer que des valeurs par défaut typiques à chacun des éléments HTML, en accord avec leur rendu suggéré dans la spécification du HTML [2].

CSS1 de base : L'agent utilisateur peut ignorer 'display' et n'utiliser que ses valeurs par défaut (cf. chapitre 7).

5.6.2 'white-space'

Valeur : normal | pre | nowrap
Valeur initiale : normal
S'applique à : éléments de type bloc tous les éléments
Héritée : oui
Pourcentage : sans objet

Cette propriété précise la façon dont sont traités les blancs dans un élément : ainsi la valeur 'normal' (les blancs fusionnent), 'pre' (qui se comporte comme l'élément 'PRE' de HTML) ou 'nowrap' (la mise à la ligne a lieu uniquement avec des éléments 'BR') :

PRE { white-space: pre }
P   { white-space: normal }

La valeur initiale de 'white-space' est 'normal', cependant l'agent utilisateur peut n'appliquer que des valeurs par défaut typiques à chacun des éléments HTML, en accord avec leur rendu suggéré dans la spécification du HTML [2].

CSS1 de base : L'agent utilisateur peut ignorer 'white-space' dans la feuille de style de l'auteur ou du lecteur et n'utiliser que des valeurs par défaut à la place (cf. chapitre 7).

5.6.3 'list-style-type'

Valeur : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Valeur initiale : disc
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list-item'
Héritée : oui
Pourcentage : sans objet

Cette propriété détermine l'apparence de la marque de liste dans le cas où la propriété 'list-style-image' a pour valeur 'none' ou quand l'image désignée par celle-ci n'est pas disponible.

OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha }   /* a b c d e etc. */
OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

5.6.4 'list-style-image'

Valeur : <url> | none
Valeur initiale : none
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list-item'
Héritée : oui
Pourcentage : sans objet

Cette propriété désigne l'image utilisée comme marque de liste. Si l'image est disponible, elle remplace le type de marque spécifié dans 'list-type-marker'.

UL { list-style-image: url(http://png.com/ellipse.png) }

5.6.5 'list-style-position'

Valeur : inside | outside
Valeur initiale : outside
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list-item'
Héritée : oui
Pourcentage : sans objet

La valeur de 'list-style-position' détermine la position de la marque de liste en regard de l'item en question. Voir un exemple de mise en forme au chapitre 4.1.3.

5.6.6 'list-style'

Valeur : [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Valeur initiale : non définie pour les propriétés raccourcies
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list-item'
Héritée : oui
Pourcentage : sans objet

La propriété 'list-style' est un raccourci pour fixer et regrouper les trois propriétés 'list-style-type', 'list-style-image' et 'list-style-position' dans la feuille de style.

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }

Des résultats inattendus peuvent survenir quand on applique 'list-style' directement sur l'élément 'LI'. Ainsi :

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>niveau 1
      <UL>
         <LI>niveau 2
      </UL>
    </OL>
  </BODY>

La spécificité (telle que définie dans l'ordre de cascade) étant plus grande pour la première règle, celle-ci annule la deuxième règle pour tous les éléments 'LI', seule la valeur 'lower-alpha' est retenue. Il est donc recommandé de n'appliquer 'list-style' que sur les éléments de liste eux-mêmes :

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

Ci-dessus, les éléments 'LI' héritent des valeurs de 'list-style' des éléments 'OL' et 'UL'.

On peut combiner une valeur d'adresse URL avec chacune des autres valeurs :

UL { list-style: url(http://png.com/ellipse.png) disc }

Dans cet exemple, la valeur 'disc' est choisie si l'image n'est pas disponible.

6 Les unités

6.1 Les unités de longueur

Une valeur de longueur est formée d'un caractère optionnel ('+' ou '-', '+' par défaut) immédiatement suivi par un nombre décimal puis immédiatement encore par un identifiant d'unité (abrégé en deux lettres). L'identifiant d'unité est facultatif pour une valeur 0.

Quelques propriétés admettent des unités de longueur négatives, ce qui peut compliquer la mise en forme et qui dépend des limites propres à un agent utilisateur. Si une valeur de longueur négative n'est pas gérée, il faudrait la ramener à la plus proche valeur qui le soit.

Il y a deux genres d'unités de longueur, relatives et absolues. Les relatives se rapportent à une autre propriété de longueur. Les feuilles de styles basées sur ce genre-ci vont s'adapter plus facilement d'un média à un autre (p.ex. d'un moniteur vers une imprimante laser). Les unités de pourcentage (décrites plus bas) ainsi que les valeurs de mot-clé (ex. 'x-large') offrent les mêmes avantages.

Voici les unités relatives reconnues :

H1 { margin: 0.5em }      /* em : la taille de la police de l'élément */
H1 { margin: 1ex }        /* x-height : la hauteur de la lettre 'x' de la police de l'élément */
P  { font-size: 12px }    /* pixel : relative au canevas */

Les unités relatives 'em' et 'ex' sont relatives à la taille de la police de l'élément lui-même. La seule exception à cette règle de CSS1 est la propriété 'font-size' où les valeurs en 'em' et 'ex' sont calculées à partir de l'élément parent.

Les valeurs en pixels, telle que dans la dernière règle, sont relatives à la résolution du canevas, c.-à-d. le plus souvent celle d'un moniteur. Si la densité en pixels d'un périphérique de sortie est trop différente de celle d'un moniteur habituel, l'agent utilisateur doit adapter l'échelle des valeurs de pixel. On suggère un pixel de référence calculé ainsi : c'est l'angle visuel formé par un pixel sur un appareil de densité 90 dpi 96 dpi (ppp) situé à une longueur de bras. Ce qui donne, pour une longueur nominale de bras de 28 pouces (71 cm), un angle de 0.0227 0.0213 degrés.

L'élément enfant hérite de la valeur calculée, non de la valeur relative :

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* c.-à-d. 36pt */
}
H1 { font-size: 15pt }

Dans l'exemple précédent, la valeur de 'text-indent' pour 'H1' est de 36pt et non 45pt.

Les unités de longueur absolues ne sont vraiment utiles que si on connaît les propriétés physiques du média de sortie. Voici celles qui sont reconnues :

H1 { margin: 0.5in }      /* inch (pouce) 1in = 2.54cm */
H2 { line-height: 3cm }   /* centimètre */
H3 { word-spacing: 4mm }  /* millimètre */
H4 { font-size: 12pt }    /* point 1pt = 1/72in */
H4 { font-size: 1pc }     /* pica 1pc = 12pt */

Si l'agent utilisateur ne gère pas les longueurs spécifiées, il doit essayer d'en calculer une valeur par approximation. Pour chacune des propriétés CSS1, les calculs ultérieurs ainsi que l'héritage doivent s'appuyer sur cette valeur.

6.2 Les unités de pourcentage

Une valeur en pourcentage est formée d'un caractère optionnel ('+' ou '-', '+' par défaut) immédiatement suivi par un nombre avec ou sans point décimal puis immédiatement encore par '%'.

Les valeurs de pourcentage sont toujours relatives à une autre valeur, par exemple une unité de longueur. Chacune des propriétés admettant une valeur en pourcentage définit aussi la valeur à laquelle se rapporte celui-ci. La plupart du temps, c'est la taille de la police de l'élément lui-même :

P { line-height: 120% }   /* 120% de la propriété 'font-size' de 'P' */

En CSS1 pour toutes les propriétés héritées, si leur valeur est spécifiée en pourcentage, les enfants héritent de la valeur résultante et non du pourcentage.

6.3 Les unités de couleur

Une couleur est représentée soit par un mot-clé soit par une valeur numérique de RGB.

Voici la liste suggérée des mots-clés pour les couleurs : 'aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white' et 'yellow'. Ils sont issus de la palette VGA de Windows, leurs valeurs RGB ne sont pas définies dans la présente spécification.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Le modèle de couleur RGB est utilisé pour les valeurs de couleur numériques. Ces règles produisent la même couleur :

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* un entier de 0 à 255 */
EM { color: rgb(100%, 0%, 0%) } /* un pourcentage de 0.0% à 100.0% */

En notation hexadécimale, le format d'une valeur RGB se compose d'un '#' immédiatement suivi par trois ou bien six caractères hexadécimaux. La notation en trois caractères (#rgb) est convertie vers la forme en six caractères (#rrggbb) par réplication et non par l'ajout de zéros. Ainsi '#fb0' devient '#ffbb00'. Ceci assure la notation du blanc (#ffffff) en trois caractères (#fff) et en supprime la dépendance avec la profondeur de couleur de l'écran.

En notation fonctionnelle, le format d'une valeur RGB se compose de 'rgb(' suivi d'une séquence de trois valeurs numériques séparée par des virgules (soit trois entiers ayant des valeurs de 0 à 255, soit trois valeurs de pourcentage de 0 à 100%) avec un ')' final. Les blancs sont admis avant ou après les valeurs numériques.

On ramène les valeurs numériques hors-limites dans la plage autorisée. Ainsi, les trois règles suivantes sont équivalentes :

EM { color: rgb(255,0,0) }       /* entier dans la plage 0 - 255 */
EM { color: rgb(300,0,0) }       /* ramené à 255 */
EM { color: rgb(110%, 0%, 0%) }  /* ramené à 100% */

Les couleurs RGB sont spécifiées dans l'espace de couleur sRGB [9]. La conformité des agents utilisateurs dans la représentation des couleurs est variable, aussi l'utilisation de l'espace sRGB en fournit une définition objective et sans ambiguïté qui est liée à des standards internationaux [10].

Les agents utilisateurs peuvent se limiter à effectuer une correction du gamma sur les couleurs. sRGB spécifie un gamma de 2.2 pour un écran selon certaines conditions. L'agent utilisateur ajuste les couleurs spécifiées en CSS en relation avec le gamma produit "naturellement" par un dispositif d'affichage pour obtenir un gamma effectif de 2.2. L'Annexe D donne plus de détails. Noter que seules les couleurs spécifiées dans la feuille de style sont affectées, ainsi les images sont censées contenir leurs propres informations de couleur.

6.4 Les adresses URL

On identifie une adresse URL (Uniform Resource Locator) par une notation fonctionnelle :

BODY { background: url(http://www.bg.com/pinkish.gif) }

Le format d'une valeur d'adresse URL se compose de la chaîne 'url(' suivie d'un blanc optionnel puis d'un guillemet simple ('), ou double ("), optionnel aussi, vient ensuite l'adresse URL proprement dite (tel que définie dans [11]), puis à nouveau un guillemet simple, ou double, le cas échéant, un blanc optionnel et la parenthèse ')' finale. On doit apparier les marques de citation qui ne font pas partie de l'adresse URL même.

On doit masquer les parenthèses (()), les virgules (,), les blancs ( ) et les guillemets simples (') ou doubles (") contenus dans une adresse URL à l'aide du caractère oblique inverse : '\(', '\)', '\,', etc.

Une adresse URL partielle s'entend relativement à la source de la feuille de style et non au document :

BODY { background: url(yellow.png) }

7 La conformité à CSS1

Pour être déclaré conforme à la spécification CSS1, un agent utilisateur qui se sert de CSS1 pour le rendu d'un document doit :

  • charger toutes les feuilles référencées dans le document et les interpréter en accord avec cette spécification
  • classer les déclarations selon l'ordre de cascade
  • utiliser les fonctionnalités de CSS1 dans les limites imposées par le média (voir l'explication plus bas).

Un agent utilisateur qui produit des feuilles de style est conforme à la spécification CSS1 s'il :

  • produit des feuilles de style CSS1 valides

Un agent utilisateur qui utilise CSS1 pour le rendu de documents et pour la production de feuilles de style CSS1 est conforme à cette spécification s'il satisfait à ces deux conditions.

Un agent utilisateur n'est pas tenu de gérer toutes les fonctions de CSS1 mais est néanmoins considéré conforme s'il en assure les fonctions de base. Les fonctionnalités de base consistent en la totalité de la spécification CSS1 à l'exception de ce qui est explicitement exclu. Dans ce document, les passages marqués "CSS1 de base :" précisent les fonctions exclues. On les appelle aussi fonctions avancées de CSS1.

Ce chapitre ne fait que définir la conformité par rapport à CSS1. Les évolutions des feuilles de style pourront imposer la gestion d'un autre jeu de fonctions de la part des agents utilisateurs pour prétendre à une nouvelle conformité.

Quelques exemples de contraintes liées au média : des ressources limitées (polices, couleur) et une résolution réduite (ainsi les marges peuvent être imprécises). Dans ces cas, l'agent utilisateur prendra les valeurs les plus proches de celles de la feuille de style. Également, les différents paradigmes de l'interface utilisateur peuvent avoir des contraintes propres : un navigateur en Réalité Virtuelle peut redimensionner un document selon la perspective de l'utilisateur.

Les agents utilisateurs peuvent offrir des alternatives de présentation au lecteur. Par exemple, l'agent utilisateur peut fournir des options aux lecteurs handicapés visuels ou encore donner la possibilité de désactiver le clignotement.

Noter que CSS1 ne contrôle pas tous les aspects de la mise en forme. Par exemple, l'agent utilisateur est libre d'interpréter l'interlettrage.

Cette spécification recommande mais sans l'imposer qu'un agent utilisateur :

  • permette au lecteur de choisir une feuille de style personnelle
  • permette d'activer ou de désactiver les feuilles de style individuelles.

Les règles de conformité ci-dessus ne décrivent que des fonctionnalités et non l'interface utilisateur.

7.1 La compatibilité ascendante de l'interprétation

Il s'agit ici de la spécification CSS de niveau 1. Une évolution des niveaux de CSS incorporant des fonctions supplémentaires est très probable. Ce chapitre décrit ce qu'un agent utilisateur, simplement conforme à CSS1, doit faire quand celui-ci rencontrera des constructions non valides pour CSS1 dans une feuille de style.

  • une déclaration contenant une propriété inconnue est ignorée. Par exemple, pour une telle feuille de style :
      H1 { color: red; rotation: 70deg }

    l'agent utilisateur devra réagir comme si elle avait été :

    H1 { color: red; }
  • une déclaration contenant une valeur illégale ou une partie de celle-ci étant illégale est ignorée :
    IMG { float: left }       /* CSS1 */
IMG { float: left top }   /* "top" n'est pas une valeur de 'float' */
IMG { background: "red" } /* les mots-clés n'ont pas de guillemets en CSS1 */
IMG { border-width: 3 }   /* une valeur de longueur requiert une unité */

    Dans cet exemple, la première règle est interprétée en CSS1 et les autres ignorées, comme si la feuille de style avait été :

    IMG { float: left }
IMG { }
IMG { }
IMG { }

    Un agent utilisateur qui voudrait se conformer à une future spécification peut accepter une ou plusieurs des autre règles suivantes.

  • un mot-clé at (N.D.T. at-keyword) invalide est ignoré comme tout ce qui le suit jusqu'au prochain point-virgule (;) inclus ou encore la prochaine paire d'accolades ({...}), selon ce qui survient en premier. Par exemple, supposons la feuille de style suivante :
    @three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 {color: blue}

    Pour CSS1 '@three-dee' n'est pas valide. En conséquence, la règle at (N.D.T. at-rule) en entier est ignorée (jusqu'à la troisième accolade droite incluse). L'agent utilisateur CSS1 passe sur cette instruction, ce qui réduit en fait la feuille de style à :

    H1 {color: blue}

En détail :

Quelle qu'en soit la version CSS, une feuille de style est une liste de déclarations. Celles-ci sont de deux sortes : les règles at (N.D.T. at-rule) et les ensembles de règles (N.D.T. ruleset). Il peut y avoir des blancs (espaces, caractères de tabulation ou de nouvelle ligne) autour des déclarations.

Les feuilles de style sont souvent insérées dans le document HTML. Il peut être nécessaire de les cacher aux agents utilisateurs anciens en les englobant dans des commentaires HTML. Les marques de commentaire HTML "<!--" et "-->" peuvent apparaître avant, après ou entre les déclarations. Il peut y avoir des blancs autour des commentaires.

Les règles at commencent avec un mot-clé at, un identifiant avec un '@' initial (ex. '@import', '@page'). Un identifiant est formé de lettres, chiffres, tirets et caractères masqués (voir plus bas).

Une règle at consiste en tout ce qui suit jusqu'au premier point-virgule (;) inclus ou au premier bloc (défini plus loin) qui se présente. L'interprétateur CSS1 ignore l'ensemble d'une règle at qui ne commence pas par le mot-clé at '@import' et poursuit le traitement après celle-ci. Si '@import' n'apparaît pas au début d'une feuille de style, cette règle at n'est pas interprétée, c.-à-d. si celle-ci se présente après d'autres règles (même si celles-ci sont ignorées).

Supposons un interpréteur CSS1 face à la feuille de style :

@import "subs.css";
H1 { color: blue }
@import "list.css";

Le deuxième '@import' n'est pas valide en CSS1. L'interprétation élimine celui-ci, réduisant en fait la feuille de style à :

@import "subs.css";
H1 {color: blue}

Un bloc commence par une accolade gauche ({) et se termine par une accolade correspondante droite (}). Tous caractères peuvent survenir entre celles-ci, cependant les parenthèses (()), crochets ([]) et accolades ({}) doivent toujours être appariés. On peut aussi les inclure dans une construction. De même pour les guillemets simples (') et doubles (") dont le contenu est considéré comme une chaîne (voir l'analyseur dans l'annexe B pour la définition d'une chaîne). Voici un exemple de bloc, noter que l'accolade droite entre les guillemets n'est pas appariée à l'accolade ouvrante du bloc et que le deuxième guillemet simple est masqué, il ne correspond donc pas avec le guillemet ouvrant :

{ causta: "}" + ({7} * '\'') }

Une règle se compose d'une chaîne de sélection (N.D.T. selector-string) suivie d'un bloc de déclaration. La chaîne de sélection consiste en tout ce qui précède la première accolade gauche ({), celle-ci exclue. La règle n'est pas exécutée si sa chaîne de sélection n'est pas valide pour CSS1.

Par exemple, un interpréteur CSS1 avec cette feuille de style :

H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }

La deuxième ligne a une chaîne de sélection invalide pour CSS1. Cette instruction est sautée, réduisant la feuille de style à :

H1 { color: blue }
P EM { font-weight: bold }

Un bloc de déclaration commence par une accolade gauche ({) et finit avec l'accolade correspondante droite (}). Celui-ci contient ou non une liste de déclarations séparées par des points-virgules (;).

Une déclaration est formée d'une propriété, du caractère deux-points (:) et d'une valeur. Il peut y avoir des blancs entre chacun d'eux. Une propriété est un identifiant tel que défini plus haut. La valeur peut contenir n'importe quel caractère, cependant les parenthèses (()), crochets ([]), accolades ({}) et guillemets (' ") doivent aller de pair. Les parenthèses, crochets et accolades peuvent en faire partie. Les caractères entre guillemets sont considérés comme des chaînes.

Pour que l'ajout de futures propriétés et valeurs à celles existantes soit possible, un agent utilisateur doit ignorer une déclaration dont la propriété ou la valeur sont invalides. Les valeurs de chaque propriétés CSS1 sont soumises à des restrictions syntaxiques et sémantiques.

Pour un agent utilisateur CSS1, supposons la feuille de style :

H1 { color: red; font-style: 12pt }
P { color: blue;  font-vendor: any;  font-variant: small-caps }
EM EM { font-style: normal }

La seconde déclaration de la première règle comporte une valeur '12pt' incorrecte. La deuxième déclaration de la règle suivante indique une propriété 'font-vendor' indéfinie. L'agent utilisateur CSS1 saute ces instructions, réduisant dans les faits la feuille de style à :

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

On peut placer des commentaires (cf. chapitre 1.7) partout où les blancs sont autorisés, ils seront considérés comme des blancs. CSS1 définit ces emplacements (comme à l'intérieur des valeurs) qui concernent aussi les commentaires.

Les règles suivantes sont toujours vérifiées :

  • aucune feuille de style n'est sensible à la casse, sauf pour les parties qui ne sont pas régies par CSS, c.-à-d. pour CSS1, les noms des familles de police et les adresses URL. Cela ne s'applique pas non plus aux attributs CLASS et ID qui dépendent de HTML [2].
  • en CSS1, les sélecteurs (nom de l'élément, classes et ID) ne peuvent être formés que des caractères allant de A à Z et 0 à 9, des caractères Unicode 161 à 255, du tiret (-) ainsi que des caractères masqués et tous les caractères Unicode sous forme de code numérique (voir suivant). Ils ne peuvent pas commencer par un tiret ou un chiffre.
  • une barre oblique inverse suivie par au plus quatre hexadécimaux (0..9A..F) équivaut au caractère Unicode qui revêt ce nombre.
  • chaque caractère sauf un hexadécimal peut être masqué avec une barre oblique inverse pour annuler son sens particulier. Exemple : "\"" est une chaîne composée d'un seul guillemet double.
  • les deux articles précédents définissent le masquage par un caractère oblique inverse. Le masquage fait toujours partie d'un identifiant, sauf à l'intérieur d'une chaîne (c.-à-d., "\7B", la représentation hexadécimale du caractère ({), n'est pas une ponctuation alors que "{" l'est, tout comme "\32" est permis au début du nom d'une classe et "2" ne l'est pas).

Note : l'attribut CLASS en HTML admet plus de caractères pour le nom de la classe que pour celui des sélecteurs. En CSS1, ces caractères doivent être masqués ou prendre le modèle d'écriture Unicode : "B&W?" doit s'écrire "B\&W\?" ou "B\26W\3F" et "κουρος" ("kouros" en grec) "\3BA\3BF\3C5\3C1\3BF\3C2". Les versions ultérieures de CSS autoriseront sans doute l'introduction directe d'un plus grand nombre de caractères.

La grammaire de CSS1 se trouve à l'annexe B.

8 Références

[1] W3C resource page on web style sheets (http://www.w3.org/Style)

[2] "HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, December 1997. Available at http://www.w3.org/TR/REC-html40/.

[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC1866, MIT/W3C, November 1995. The specification is also available in hypertext form (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html)

[4] F Yergeau, G Nicol, G Adams, M Dürst: "Internationalization of the Hypertext Markup Language" (ftp://ds.internic.net/rfc/rfc2070.txt).

[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)

[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL).

[7] ISO/IEC 9899:1990 Programming languages -- C.

[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.

[9] "A Standard Default color Space for the Internet", version 1.10, M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 November 1996.

[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)

[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, December 1994

[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (http://www.w3.org/TR/REC-png-multi.html)

[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)

[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)

[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975

[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213

9 Remerciements

Dans la courte existence de HTML, il y a eu plusieurs propositions de feuilles de style, la présente en est l'aboutissement. Les avis de Robert Raisch, Joe English et Pei Wei ont été déterminants.

De nombreuses personnes ont contribué au développement de CSS1. Parmi celles-ci, nous remercions particulièrement : Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood et Stephen Zilles.

Trois personnes méritent des mentions spéciales : Dave Raggett (pour ses encouragements et son travail sur HTML3), Chris Lilley (pour ses contributions incessantes, surtout dans le domaine de la couleur et des polices) et Steven Pemberton (pour ses talents d'organisateur et sa créativité).

Annexe A: Exemple de feuille de style pour HTML 2.0

(Cette annexe est informative et pas normative).

Cet exemple de feuille de style a été écrit en accord avec les principes de rendu de la spécification du HTML 2.0 [3]. Quelques styles ont été rajoutés par souci d'exhaustivité. Pour établir la feuille de style par défaut d'un agent utilisateur, il est suggéré de s'en inspirer.

BODY {
  margin: 1em;
  font-family: serif;
  line-height: 1.1;
  background: white;
  color: black;
}

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
  display: block }

B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }

LI { display: list-item }

H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }

H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }

B, STRONG { font-weight: bolder }  /* relatif au parent */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }

PRE { white-space: pre }

ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 }              /* formatage serré */
LI { margin-left: 3em }

DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }

HR { border-top: solid }        /* 'border-bottom' est aussi possible */

A:link { color: blue }          /* liens non visités */
A:visited { color: red }        /* liens visités */
A:active { color: lime }        /* liens activés */

/* sélecteurs contextuels requis pour la bordure indiquant un lien autour des éléments IMG */

A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }

Annexe B: Grammaire de CSS1

(Cette annexe est normative).

La grammaire minimale CSS (pour toutes les versions de CSS) que doit suivre chacune des implémentations est définie au chapitre 7. La grammaire ci-dessous définit en des termes beaucoup plus réduits le langage qui décrit la syntaxe de CSS1.

C'est en quelque sorte encore un dérivé de CSS1, les contraintes de sémantique venant en plus ne sont pas exprimées dans celle-ci. Un agent utilisateur conforme doit aussi adhérer aux règles de compatibilité ascendante (chapitre 7.1), de notation des propriétés et des valeurs (chapitre 5) et de notation des unités (chapitre 6). En plus des restrictions imposées par HTML, ex. les valeurs possibles de l'attribut CLASS.

La grammaire ci-dessous est LL(1) (noter que la plupart des agents utilisateurs ne devraient pas l'utiliser directement car elle ne suit pas les conventions d'interprétation mais seulement la syntaxe CSS1). Le format des productions facilite un usage humain et quelques raccourcis de notation ne faisant pas partie de yacc [15] sont employés :

*  : 0 ou plus
+  : 1 ou plus
?  : 0 ou 1
|  : alternatives
[] : regroupement

Les productions sont :

stylesheet
 : [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
 ;
import
 : IMPORT_SYM [STRING|URL] ';'		/* ex., @import url(fun.css); */
 ;
unary_operator
 : '-' | '+'
 ;
operator
 : '/' | ',' | /* vide */
 ;
property
 : IDENT
 ;
ruleset
 : selector [ ',' selector ]*
   '{' declaration [ ';' declaration ]* '}'
 ;
selector
 : simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
 | solitary_pseudo_element
 ;
    /* Un "id" est un ID attaché à un type d'élément
    ** sur sa gauche comme dans : P#p007.
    ** Un "solitary_id" est un ID moins lié
    ** comme dans : #p007
    ** De même pour les classes et pseudo-classes.
    */
simple_selector
 : element_name id? class? pseudo_class?	/* ex. : H1.subject */
 | solitary_id class? pseudo_class?		/* ex. : #xyz33 */
 | solitary_class pseudo_class?			/* ex. : .author */
 | solitary_pseudo_class			/* ex. : :link */
 ;
element_name
 : IDENT
 ;
pseudo_class					/* comme dans :  A:link */
 : LINK_PSCLASS_AFTER_IDENT
 | VISITED_PSCLASS_AFTER_IDENT
 | ACTIVE_PSCLASS_AFTER_IDENT
 ;
solitary_pseudo_class				/* comme dans :  :link */
 : LINK_PSCLASS
 | VISITED_PSCLASS
 | ACTIVE_PSCLASS
 ;
class						/* comme dans :  P.note */
 : CLASS_AFTER_IDENT
 ;
solitary_class					/* comme dans :  .note */
 : CLASS
 ;
pseudo_element					/* comme dans :  P:first-line */
 : FIRST_LETTER_AFTER_IDENT
 | FIRST_LINE_AFTER_IDENT
 ;
solitary_pseudo_element				/* comme dans :  :first-line */
 : FIRST_LETTER
 | FIRST_LINE
 ;
    /* Il y a une contrainte sur id et solitary_id telle que
    ** la partie située après "#" soit une valeur ID HTML valide ;
    ** ex., "#x77" est OK, mais pas "#77".
    */
id
 : HASH_AFTER_IDENT
 ;
solitary_id
 : HASH
 ;
declaration
 : property ':' expr prio?
 | /* empty */				/* Évite les erreurs de syntaxe... */
 ;
prio
 : IMPORTANT_SYM	 		/* !important */
 ;
expr
 : term [ operator term ]*
 ;
term
 : unary_operator?
   [ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
   | IDENT | hexcolor | URL | RGB ]
 ;
    /* Il y a une contrainte sur la couleur telle que celle-ci
    ** ait 3 ou 6 hexadécimaux (c.-à-d., [0-9a-fA-F])
    ** après "#"; ex., "#000" est OK, mais non "#abcd".
    */
hexcolor
 : HASH | HASH_AFTER_IDENT
 ;

Maintenant l'analyseur, écrit en notation flex [16]. Noter que cela suppose une mise en œuvre 8 bits de flex. L'analyseur est insensible à la casse (option -i en ligne de commande flex).

unicode		\\[0-9a-f]{1,4}
latin1		[¡-ÿ]
escape		{unicode}|\\[ -~¡-ÿ]
stringchar	{escape}|{latin1}|[ !#$%&(-~]
nmstrt		[a-z]|{latin1}|{escape}
nmchar		[-a-z0-9]|{latin1}|{escape}
ident		{nmstrt}{nmchar}*
name		{nmchar}+
d		[0-9]
notnm		[^-a-z0-9\\]|{latin1}
w		[ \t\n]*
num		{d}+|{d}*\.{d}+
string		\"({stringchar}|\')*\"|\'({stringchar}|\")*\'

%x COMMENT
%s AFTER_IDENT

%%
"/*"				{BEGIN(COMMENT);}
<COMMENT>"*/"			{BEGIN(0);}
<COMMENT>\n			{/* ignore */}
<COMMENT>.			{/* ignore */}
@import				{BEGIN(0); return IMPORT_SYM;}
"!"{w}important			{BEGIN(0); return IMPORTANT_SYM;}
{ident}				{BEGIN(AFTER_IDENT); return IDENT;}
{string}			{BEGIN(0); return STRING;}

{num}				{BEGIN(0); return NUMBER;}
{num}"%"			{BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm}			{BEGIN(0); return LENGTH;}
{num}mm/{notnm}			{BEGIN(0); return LENGTH;}
{num}cm/{notnm}			{BEGIN(0); return LENGTH;}
{num}pc/{notnm}			{BEGIN(0); return LENGTH;}
{num}in/{notnm}			{BEGIN(0); return LENGTH;}
{num}px/{notnm}			{BEGIN(0); return LENGTH;}
{num}em/{notnm}			{BEGIN(0); return EMS;}
{num}ex/{notnm}			{BEGIN(0); return EXS;}

<AFTER_IDENT>":"link		{return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited	{return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active	{return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line	{return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter	{return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name}		{return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name}		{return CLASS_AFTER_IDENT;}

":"link				{BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited			{BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active			{BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line			{BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter			{BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name}			{BEGIN(AFTER_IDENT); return HASH;}
"."{name}			{BEGIN(AFTER_IDENT); return CLASS;}

url\({w}{string}{w}\)					|
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)		{BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)	{BEGIN(0); return RGB;}

[-/+{};,#:]			{BEGIN(0); return *yytext;}
[ \t]+				{BEGIN(0); /* ignore les blancs */}
\n				{BEGIN(0); /* ignore les blancs */}
\<\!\-\-			{BEGIN(0); return CDO;}
\-\-\>				{BEGIN(0); return CDC;}
.				{fprintf(stderr, "%d: Illegal character (%d)\n",
                 lineno, *yytext);}

Annexe C: Codage

(Cette annexe est informative et pas normative).

Les documents HTML peuvent inclure tous les caractères Unicode parmi les quelques 30000 définis. Beaucoup de documents n'en utilisent que quelques centaines. Beaucoup de polices n'ont aussi que quelques centaines de glyphes. Cette annexe explique de pair avec le chapitre 5.2 la correspondance entre les caractères d'un document et les glyphes d'une police.

Codage des caractères

Le contenu d'un document HTML est une séquence de caractères avec un balisage. Pour la transmettre "au travers du fil", elle est encodée dans une séquence d'octets à l'aide d'un ou de plusieurs codages possibles. Le document HTML passe par une étape de décodage pour obtenir le caractère. Par exemple, en Europe occidentale, l'octet 224 est habituellement utilisé pour représenter un a-accent grave (à), mais en hébreu, cet octet représente couramment un aleph. En japonais, la signification d'un octet dépend de celui qui le précède. Dans certains codages, deux (ou plus) octets sont nécessaires pour représenter un caractère.

L'agent utilisateur s'appuie sur le paramètre de "charset" (jeu de caractères) dans l'en-tête HTTP pour décoder l'octet. "ASCII" (pour l'anglais), "ISO-8859-1" (pour l'Europe occidentale), "ISO-8859-8" (pour l'hébreu), "Shift-JIS" (pour le japonais) sont des codages (ou valeurs de charset) typiques.

HTML [2] [4] admet quelques 30000 caractères, nommément ceux définis par Unicode. Peu de documents utilisent autant de caractères différents et le choix du bon codage est généralement suffisant pour indiquer que le document ne nécessite qu'un octet par caractère. Certains caractères hors du champs de codage peuvent encore apparaître sous une forme numérique référençant le caractère : '&#928;' représentera toujours la lettre Pi majuscule, indépendamment du codage utilisé. Cela sous-entend que les agents utilisateurs doivent reconnaître chacun des caractères Unicode, même s'ils ne peuvent honorer que peu de codages.

Codage de police

Une police ne contient pas de caractères mais leurs images qu'on nomme glyphes. Sous la forme de contours ou de points, les glyphes constituent une représentation particulière du caractère. Implicitement ou explicitement, chaque police est associée à une table, la table de codage de la police, qui indique de quel caractère chaque glyphe est une représentation. Pour les polices de Type 1, on parle de la table comme du vecteur de codage.

En fait, de nombreuses polices ont plusieurs glyphes pour le même caractère. Le glyphe qui est utilisé dépend soit des règles d'usage de la langue ou soit des préférences de l'auteur.

En arabe, par exemple, chaque lettre dispose de quatre formes différentes, selon qu'elle est utilisée au début, au milieu, à la fin d'un mot ou bien isolément. Il s'agit du même caractère dans tous les cas, c'est pourquoi un seul caractère apparaît dans le document HTML, mais il semble à chaque fois différent à l'impression.

Il existe aussi des polices dont le graphiste est libre de choisir une forme entre plusieurs options possibles. Malheureusement, CSS1 ne fournit aucun moyen de les sélectionner. Seule la forme standard de ces polices est retenue pour le moment.

Jeux de polices

CSS1 autorise l'usage de jeux de polices pour obtenir l'affichage de tous les caractères dans un document ou même dans un seul élément, pour lequel parfois, une seule police ne suffit pas.

En CSS1, un jeu de police est une liste de polices, toutes de même style et taille et qui sont essayées l'une à la suite de l'autre pour y trouver un glyphe correspondant à un caractère donné. Un élément contenant du texte et des symboles mathématiques peut avoir besoin d'un jeu de deux polices, l'une avec des chiffres et des lettres, l'autre avec des symboles mathématiques. Voir au chapitre 5.2 pour une explication en détail du mécanisme de sélection des jeux de polices.

Voici un exemple de jeu de polices pour un texte censé contenir des caractères latins, japonais et des symboles mathématiques :

BODY { font-family: Baskerville, Mincho, Symbol, serif }

Les caractères latins disponibles dans la police Baskerville seront tirés de celle-ci, les japonais de Mincho et les symboles de Symbol. Tout autre caractère sera issu (heureusement) de la famille de police générique 'serif'. Cette famille de police 'serif' est utilisée si une ou plus des autres polices ne sont pas disponibles.

Annexe D: Correction du gamma

(Cette annexe est informative et pas normative).

Voir le tutoriel sur le gamma dans la spécification de PNG [12] pour ceux qui ne sont pas familiers avec ces questions.

Lors des calculs pour l'affichage sur un écran cathodique (N.D.T. CRT), l'agent utilisateur peut considérer un moniteur idéal et ignorer les effets du gamma apparent dus à la superposition du signal (N.D.T. dithering). Cela veut dire que le calcul minimum requis pour les plates-formes actuelles est :

PC avec MS-Windows
aucun
Unix avec X11
aucun
Mac avec QuickDraw
appliquer un gamma 1.39 [13] (Les applications travaillant avec ColorSync peuvent simplement passer le profil ICC sRGB [14] à celui-ci pour effectuer la correction de couleur)
SGI avec X
appliquer la valeur de gamma avec /etc/config/system.glGammaVal (la valeur par défaut étant 1.70, les applications tournant sur Irix, 6.2 ou plus, peuvent simplement passer le profil ICC sRGB au système de gestion de couleur)
NeXT avec NeXTStep
appliquer un gamma 2.22

"Appliquer le gamma" signifie la conversion de chacune des valeurs R, G et B en R'=Rgamma, G'=Ggamma, B'=Bgamma avant de les passer au système.

Cela peut être fait rapidement en construisant une table de consultation (N.D.T. lookup table) de 256 éléments au lancement du navigateur ainsi :

for i := 0 to 255 do
  raw := i / 255;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

ce qui évite des calculs astronomiques sur chaque attribut de couleur, et à plus forte raison sur chaque pixel.

Annexe E: Conditions d'application et capacité d'extension de CSS1

(Cette annexe est informative et pas normative).

Le travail effectué pour CSS1 a eu pour but la création d'un mécanisme simple de feuille de style pour les documents HTML. La spécification actuelle représente un équilibre entre la simplicité voulue pour réaliser des feuilles de style pour le Web et la pression des auteurs pour un controle visuel plus riche. CSS1 offre :

  • le remplacement du balisage visuel : les feuilles de style CSS1 remplace facilement les extensions HTML, ex. "CENTER", "FONT" et "SPACER".
  • un balisage plus élégant : au lieu d'utiliser l'élément "FONT" pour obtenir des petites capitales, une déclaration dans la feuille de style suffit. Comparons le balisage visuel :
    <H1>G<FONT SIZE=-1>ROS TITRE</FONT></H1>

    avec la feuille de style :

    H1 { font-style font-variant: small-caps }

<H1>Gros titre</H1>
  • divers niveaux d'intégration : les règles de style CSS1 peuvent provenir d'une feuille de style externe, être incluses dans l'élément 'STYLE' ou mises dans l'attribut 'STYLE'. Cette dernière option pour faciliter la transition à partir des extensions HTML vers CSS.
  • des nouveaux effets : quelques effets visuels ont été ajoutés pour la joie des utilisateurs : les pseudo-éléments typographiques et les autres valeurs de la propriété 'background' en font partie.
  • l'adaptabilité : CSS1 agit utilement sur une gamme d'appareils allant du terminal en mode texte à la station de travail en couleur haute résolution. Les auteurs peuvent écrire une feuille de style dont on peut raisonnablement penser qu'elle s'appliquera au mieux de la façon voulue.

CSS1 n'offre pas :

  • un contrôle au pixel : CSS1 favorise la simplicité sur le niveau de contrôle. Bien que l'utilisation conjointe des images de fond et des styles soit forte de possibilités, le contrôle au pixel près n'est pas possible.
  • un contrôle par l'auteur : l'auteur ne peut pas imposer l'utilisation de telle feuille de style, seulement la suggérer.
  • un langage de mise en page : CSS1 n'offre pas le multi-colonnage avec le transvasement automatique du texte, des cadres qui se superposent, etc.
  • un langage de recherche riche dans l'arborescence du document : CSS1 peut seulement remonter aux éléments parents dans l'arborescence, même si d'autres langages de feuille de style (ex. DSSSL [6]) sont dotés de capacités de recherche complètes.

CSS va s'étendre dans plusieurs directions :

  • le papier : une meilleure prise en compte de l'impression des documents HTML
  • la gestion des médias non visuels : l'ajout de nouvelles propriétés et leurs valeurs sont étudiées pour la gestion des sorties vocales et braille
  • les noms de couleur : la liste actuelle va peut être s'allonger
  • les polices : on attend des systèmes de spécification des polices plus précis pour compléter les propriétés de police existantes.
  • les valeurs et propriétés : on attend que les éditeurs proposent des améliorations au jeu des propriétés et valeurs de CSS1. La spécification peut être facilement étendue, mais l'interopérabilité entre différents agents utilisateurs est une autre histoire
  • un langage de mise en page : prise en compte de la mise en page en deux dimensions dans la tradition des applications de publication numérique.
  • d'autres DTDs : CSS1 comporte des parties spécifiquement HTML (ex. le statut particulier des attributs 'CLASS' et 'ID') qui pourraient aussi être facilement portés sur d'autres DTDs.

Ce que CSS ne risque pas de devenir :

  • un langage de programmation.

Annexe F: Changements depuis la version du 17 décembre 1996

(Cette annexe est informative et pas normative).

Ce document est une révision de la recommandation CSS1 publiée initialement le 17 décembre 1996 et la liste ci-dessous mentionne les changements apportés. En choisissant la feuille de style alterne "errata", les changements apparaissent surlignés.

Nos remerciements à Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch et Tantek Çelik pour leur aide dans cette version révisée.

Erreurs orthographiques et typographiques

  • typo1 [section 1.1] The sentence:
    As as result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such.

    has been changed to:

    As a result, old UAs will ignore the 'STYLE' element, but its content will be treated as part of the document body, and rendered as such.
  • typo2 [section 1.6] The sentence:
    The second selector matches matches all 'H1' elements that have an ancestor of class 'reddish'.

    has been changed to:

    The second selector matches all 'H1' elements that have an ancestor of class 'reddish'.
  • typo3 [section 2.1] The sentence:
    E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger that a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.

    has been changed to:

    E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger than a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.
  • typo4, typo5 [section 2.3-2.4] A trailing quote mark has been added to 'vertical-align'.
  • typo6 [section 4] A missing right parenthesis has been added.
  • typo7 [section 4.1] A missing comma has been added.
  • typo8 [section 4.1.2] The text:
    "If more than one of the three is 'auto', and one of them is 'width', than the others..."

    has been changed to:

    "If more than one of the three is 'auto', and one of them is 'width', then the others..."
  • typo9 [section 5.3.6] The word "Examples" has been capitalized.
  • typo10 [section 5.4.4] An entity gone astray has been corrected (from "<length&t;" to "<length>").
  • typo11 [section 5.5] The text:
    The margin properties properties set the margin of an element.

    has been changed to:

    The margin properties set the margin of an element.
  • typo12 [section 5.5.25] Superfluous quote marks have been removed.

Erreurs

  • error1 [section 2.3] A previously invalid declaration (font-style: small-caps) has been replaced by a valid one.
  • error2 [section 4] This sentence:
    CSS1 assumes a simple box-oriented formatting model where each element results in one or more rectangular boxes.

    has been replaced with:

    CSS1 assumes a simple box-oriented formatting model where each formatted element results in one or more rectangular boxes.
  • error3 [section 4.1] In this sentence:
    The top is the top of the object including any padding, border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements.

    the word "object" has been replaced with "element" to use consistent terminology.

  • error4 [section 4.1.3] The alignment of the list items has been corrected.
  • error5 [section 4.1.4] There is only one P element in the example, and this sentence:
    Note that the margin of the 'P' elements enclose the floating 'IMG' element.

    has therefore been corrected to:

    Note that the margin of the 'P' element enclose the floating 'IMG' element.
  • error6, error7 [section 4.5] The window size can only influence one axis of the canvas, either the width or the height.
  • error8 [section 5.4.1] The text inside the parenthesis now refers to a CSS1 property.
  • error9 [section 5.4.1] To correspond with the following paragraph, the example has been corrected.
  • error10 [section 5.4.8] The section "The height of lines" is now correctly identified as section 4.4, not 4.7.
  • error11 [section 5.5] This sentence:
    The 'margin' property sets the border for all four sides while the other margin properties only set their respective side.

    has been corrected to:

    The 'margin' property sets the margin for all four sides while the other margin properties only set their respective side.
  • error12, error13, error14, error15, error16, error17, error18, error19, error20, error22 [section 5.5.1-5.5.10] Percentage values refer to width of the closest block-level ancestor, not the parent element (which can be inline) as previously stated.
  • error21 [section 5.5.10] Shorthand properties don't have initial values, and the previously specified '0' has therefore been corrected.
  • error23 [section 5.5.15] The last rule in the example previously contained an illegal value ('none').
  • error24 [section 5.6.6] The value specification on the 'list-style' property had been corrected, but there are no syntactic or semantic changes.
  • error25 [section 7.1] The numeric character references used to encode the Greek word "kouros" have been corrected.
  • error26 [Appendix A] These element types have been added to the list of selectors attached to the 'display: block' declaration: FORM DL.
  • error27 [Appendix B] A dead link to section 7 has been fixed.
  • error28 [Appendix D] This text:
    "Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, G'=Bgamma, before handing to the OS.

    has been changed to:

    "Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, B'=Bgamma, before handing to the OS.

Structure et Organisation

  • Appendix F, which lists all changes since the 17 December 1996 version has been added.
  • A paragraph in the status section has been added to inform readers that this is a revised version.
  • The style sheet has changed.
  • The reference to a future HTML specification with support for style sheets has been updated to reference HTML 4.0.
  • Les adresses URL in the References have been updated, and dead links have been removed.
  • The underlying HTML markup has been revised.


Les feuilles de style en cascade, niveau 2

W3C REC-CSS2-19980512

Les feuilles de style en cascade, niveau 2
Spécification CSS2

Recommandation du W3C du 12 mai 1998

Cette version :
http://www.w3.org/TR/1998/REC-CSS2-19980512
Dernière version :
http://www.w3.org/TR/REC-CSS2
Version précédente :
http://www.w3.org/TR/1998/PR-CSS2-19980324
Rédacteurs :
Bert Bos <bbos@w3.org>
Håkon Wium Lie <howcome@w3.org>
Chris Lilley <chris@w3.org>
Ian Jacobs <ij@w3.org>

Résumé

Cette spécification définit CSS2 : les feuilles de style en cascade, niveau 2. CSS2 est un langage de feuille de style qui permet aux auteurs et aux lecteurs de lier du style (ex. les polices de caractères, l'espacement et un signal auditif) aux documents structurés (ex. documents HTML et applications XML). En séparant la présentation du style du contenu des documents, CSS2 simplifie l'édition pour le Web et la maintenance d'un site.

CSS2 est construit sur CSS1 (voir [CSS1]), ainsi toute feuille de style valide en CSS1 est également valide en CSS2 à très peu d'exceptions près. CSS2 prévoit des feuilles de style liées à un média spécifique ce qui autorise les auteurs à présenter des documents sur mesure pour les navigateurs visuels, les synthétiseurs de parole, les imprimantes, les lecteurs en Braille, les appareils portatifs, etc. Cette spécification introduit aussi les notions de positionnement du contenu, de téléchargement des polices, de mise en forme des tables, de fonctions d'internationalisation, de compteurs et numérotage automatiques et quelques propriétés concernant l'interface utilisateur.

Statut de ce document

Ce document a été vérifié par les membres du W3C et d'autres parties intéressées et le Directeur l'a approuvé comme Recommandation du W3C. C'est un document stable qui peut être utilisé comme document de référence ou cité comme norme de référence par un autre document. En produisant cette Recommandation, le W3C entend attirer l'attention sur une spécification et en promouvoir un large déploiement. Ceci multiplie la fonctionnalité et l'interopérabilité du Web.

Une liste des Recommandations actuelles du W3C et d'autres documents techniques peut être trouvée à http://www.w3.org/TR.

Les discussions publiques sur les fonctions de CSS ont lieu sur la liste www-style@w3.org.

Formats disponibles

La spécification CSS2 est disponible dans les formats suivants :

HTML :
http://www.w3.org/TR/1998/REC-CSS2-19980512
fichier texte entier :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt,
HTML sous la forme d'un fichier compressé .tgz :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz,
HTML sous la forme d'un fichier .zip (ce n'est pas un fichier '.exe') :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip,
sous la forme d'un fichier PostScript .ps.gz :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz,
et sous la forme d'un fichier PDF :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.

Pour toute contestation sur les diverses formes de la spécification, on considère http://www.w3.org/TR/1998/REC-CSS2-19980512 le lieu de la version définitive.

Langues disponibles

La version anglaise de la spécification est la seule version officielle. Cependant, pour des versions traduites en d'autres langues voir http://www.w3.org/Style/css2-updates/translations.html.

Errata

La liste des erreurs connues de cette spécification se trouve à http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html. Merci de faire part d'erreurs éventuelles dans ce document à css2-editors@w3.org.

Sommaire général

  • 1 À propos de la spécification CSS2
  • 2 Introduction à CSS2
  • 3 La conformité : obligations et recommandations
  • 4 La syntaxe de CSS2 et les types de données de base
  • 5 Les sélecteurs
  • 6 L'assignation des valeurs des propriétés, la cascade et l'héritage
  • 7 Les types de médias
  • 8 Le modèle des boîtes
  • 9 Le modèle de mise en forme visuel
  • 10 Détails du modèle de mise en forme visuel
  • 11 Le rendu visuel
  • 12 Le contenu généré, le numérotage automatique et les listes
  • 13 Les médias paginés
  • 14 Les couleurs et les arrière-plans
  • 15 Les polices
  • 16 Le texte
  • 17 Les tables
  • 18 L'interface utilisateur
  • 19 Les feuilles de style auditives
  • Annexe A : Un exemple de feuille de style pour HTML 4.0
  • Annexe B : Changements depuis CSS1
  • Annexe C : Mise en œuvre et notes d'évaluation des polices
  • Annexe D : La grammaire de CSS2
  • Annexe E : Références
  • Annexe F : Index des propriétés
  • Annexe G : Index des descripteurs
  • Annexe H : Index

Sommaire détaillé

  • 1 À propos de la spécification CSS2
    • 1.1 Lire la spécification
    • 1.2 Organisation de la spécification
    • 1.3 Conventions
      • 1.3.1 Les conventions pour les éléments et attributs dans le langage du document
      • 1.3.2 La définition des propriétés CSS
        • Valeur
        • Valeur initiale
        • S'applique à
        • Héritée
        • Pourcentage
        • Groupe de médias
      • 1.3.3 Les propriétés raccourcies
      • 1.3.4 Les notes et les exemples
      • 1.3.5 Les images et les descriptions longues
    • 1.4 Remerciements
    • 1.5 Notice de copyright
  • 2 Introduction à CSS2
    • 2.1 Un bref tutoriel de CSS2 pour HTML
    • 2.2 Un bref tutoriel de CSS2 pour XML
    • 2.3 Le modèle de traitement de CSS2
      • 2.3.1 Le canevas
      • 2.3.2 Le modèle d'adressage de CSS2
    • 2.4 Les principes de construction de CSS
  • 3 La conformité : obligations et recommandations
    • 3.1 Définitions
    • 3.2 La conformité
    • 3.3 Les conditions d'erreur
    • 3.4 Le type de contenu "text/css"
  • 4 La syntaxe de CSS2 et les types de données de base
    • 4.1 La syntaxe
      • 4.1.1 L'atomisation
      • 4.1.2 Les mots-clés
      • 4.1.3 Les caractères et la casse
      • 4.1.4 Les déclarations
      • 4.1.5 Les règles-at
      • 4.1.6 Les blocs
      • 4.1.7 Les jeux de règles, les blocs de déclaration et les sélecteurs
      • 4.1.8 Les déclarations et les propriétés
      • 4.1.9 Les commentaires
    • 4.2 Les règles de traitement des erreurs d'interprétation
    • 4.3 Les valeurs
      • 4.3.1 Les entiers et les nombres
      • 4.3.2 Les longueurs
      • 4.3.3 Les pourcentages
      • 4.3.4 URL + URN = URI
      • 4.3.5 Les compteurs
      • 4.3.6 Les couleurs
      • 4.3.7 Les angles
      • 4.3.8 Les durées
      • 4.3.9 Les fréquences
      • 4.3.10 Les chaînes
    • 4.4 La représentation du document par CSS
      • 4.4.1 L'appel des caractères absents d'un codage
  • 5 Les sélecteurs
    • 5.1 La reconnaissance d'un motif
    • 5.2 La syntaxe des sélecteurs
      • 5.2.1 Le regroupement
    • 5.3 Le sélecteur universel
    • 5.4 Les sélecteurs de type
    • 5.5 Les sélecteurs descendants
    • 5.6 Les sélecteurs d'enfant
    • 5.7 Les sélecteurs d'enfants adjacents
    • 5.8 Les sélecteurs d'attribut
      • 5.8.1 La correspondance entre les attributs et leurs valeurs
      • 5.8.2 Les valeurs par défaut des attributs dans les définitions de type de document (DTD)
      • 5.8.3 Les sélecteurs de classe
    • 5.9 Les sélecteurs d'ID
    • 5.10 Les pseudo-éléments et les pseudo-classes
    • 5.11 Les pseudo-classes
      • 5.11.1 La pseudo-classe :first-child
      • 5.11.2 Les pseudo-classes d'ancre : :link et :visited
      • 5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus
      • 5.11.4 La pseudo-classe de langue : :lang
    • 5.12 Les pseudo-éléments
      • 5.12.1 Le pseudo-élément :first-line
      • 5.12.2 Le pseudo-élément :first-letter
      • 5.12.3 Les pseudo-éléments :before et :after
  • 6 L'assignation des valeurs des propriétés, la cascade et l'héritage
    • 6.1 Les valeurs spécifiées, calculées et réelles
      • 6.1.1 Les valeurs spécifiées
      • 6.1.2 Les valeurs calculées
      • 6.1.3 Les valeurs réelles
    • 6.2 L'héritage
      • 6.2.1 La valeur 'inherit'
    • 6.3 La règle @import
    • 6.4 La cascade
      • 6.4.1 L'ordre de cascade
      • 6.4.2 Les règles avec la valeur !important
      • 6.4.3 Le calcul de la spécificité d'un sélecteur
      • 6.4.4 L'ordre de priorité des indications de présentation en dehors de CSS
  • 7 Les types de médias
    • 7.1 Introduction aux types de médias
    • 7.2 La spécification des feuilles de style en fonction du média
      • 7.2.1 La règle @media
    • 7.3 Les types de médias reconnus
      • 7.3.1 Les groupes de médias
  • 8 Le modèle des boîtes
    • 8.1 Les dimensions des boîtes
    • 8.2 Exemples de marges, d'espacements et de bordures
    • 8.3 Les propriétés de marge : 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' et 'margin'
      • 8.3.1 La fusion des marges
    • 8.4 Les propriétés d'espacement : 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' et 'padding'
    • 8.5 Les propriétés de bordure
      • 8.5.1 L'épaisseur de bordure : les propriétés 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' et 'border-width'
      • 8.5.2 La couleur de bordure : les propriétés 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' et 'border-color'
      • 8.5.3 Le style de bordure : les propriétés 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' et 'border-style'
      • 8.5.4 Les propriétés raccourcies de bordure : 'border-top', 'border-bottom', 'border-right', 'border-left' et 'border'
  • 9 Le modèle de mise en forme visuel
    • 9.1 Introduction au modèle de mise en forme visuel
      • 9.1.1 La zone de visualisation
      • 9.1.2 Les blocs conteneurs
    • 9.2 Le contrôle de la génération de la boîte
      • 9.2.1 Les éléments de type bloc et leurs boîtes
        • Les boîtes de bloc anonymes
      • 9.2.2 Les éléments de type en-ligne et leurs boîtes
        • Les boîtes en-ligne anonymes
      • 9.2.3 Les boîtes compactes
      • 9.2.4 Les boîtes en enfilade
      • 9.2.5 La propriété 'display'
    • 9.3 Les schémas de positionnement
      • 9.3.1 Le choix d'un schéma de positionnement : la propriété 'position'
      • 9.3.2 Les décalages des boîtes : les propriétés 'top', 'right', 'bottom', 'left'
    • 9.4 Le flux normal
      • 9.4.1 Le contexte de mise en forme bloc
      • 9.4.2 Le contexte de mise en forme en-ligne
      • 9.4.3 Le positionnement relatif
    • 9.5 Les flottants
      • 9.5.1 Le positionnement des flottants : la propriété 'float'
      • 9.5.2 Le contrôle du flux autour des flottants : la propriété 'clear'
    • 9.6 Le positionnement absolu
      • 9.6.1 Le positionnement fixe
    • 9.7 Les relations entre les propriétés 'display', 'position' et 'float'
    • 9.8 Comparaison entre les positionnements en flux normal, flottant et absolu
      • 9.8.1 Le flux normal
      • 9.8.2 Le positionnement relatif
      • 9.8.3 Faire flotter une boîte
      • 9.8.4 Le positionnement absolu
    • 9.9 La présentation en couches
      • 9.9.1 La spécification du niveau dans l'empilement : la propriété 'z-index'
    • 9.10 Le sens du texte : les propriétés 'direction' et 'unicode-bidi'
  • 10 Détails du modèle de mise en forme visuel
    • 10.1 La définition du "bloc conteneur"
    • 10.2 La largeur du contenu : la propriété 'width'
    • 10.3 Le calcul des largeurs et des marges
      • 10.3.1 Les éléments de type en-ligne non remplacés
      • 10.3.2 Les éléments de type en-ligne remplacés
      • 10.3.3 Les éléments de type bloc non remplacés dans un flux normal
      • 10.3.4 Les éléments de type bloc remplacés dans un flux normal
      • 10.3.5 Les éléments flottants non remplacés
      • 10.3.6 Les éléments flottants remplacés
      • 10.3.7 Les éléments non remplacés en position absolue
      • 10.3.8 Les éléments remplacés en position absolue
    • 10.4 Les largeurs minimales et maximales : 'min-width' et 'max-width'
    • 10.5 La hauteur du contenu : la propriété 'height'
    • 10.6 Le calcul des hauteurs et des marges
      • 10.6.1 Les éléments de type en-ligne non remplacés
      • 10.6.2 Les éléments de types en-ligne et bloc remplacés dans un flux normal et éléments flottants remplacés
      • 10.6.3 Les éléments de type bloc non remplacés dans un flux normal et éléments flottants non remplacés
      • 10.6.4 Les éléments non remplacés en position absolue
      • 10.6.5 Les éléments remplacés en position absolue
    • 10.7 Les hauteurs minimales et maximales : 'min-height' and 'max-height'
    • 10.8 Le calcul de la hauteur de ligne : les propriétés 'line-height' et 'vertical-align'
      • 10.8.1 L'interlignage et le demi-interlignage
  • 11 Les effets visuels
    • 11.1 Le débordement et le rognage
      • 11.1.1 Le débordement : la propriété 'overflow'
      • 11.1.2 Le rognage : la propriété 'clip'
    • 11.2 La visibilité : la propriété 'visibility'
  • 12 Le contenu généré, le numérotage automatique et les listes
    • 12.1 Les pseudo-éléments :before et :after
    • 12.2 La propriété 'content'
    • 12.3 L'interaction de :before et :after avec les éléments ayant les valeurs 'compact' et 'run-in'
    • 12.4 Les guillemets
      • 12.4.1 Spécifier des guillemets avec la propriété 'quotes'
      • 12.4.2 Insérer des guillemets avec la propriété 'content'
    • 12.5 Compteurs et numérotage automatiques
      • 12.5.1 Les compteurs imbriqués et leur portée
      • 12.5.2 Les styles des compteurs
      • 12.5.3 Les compteurs dans les éléments avec 'display: none'
    • 12.6 Les marqueurs et les listes
      • 12.6.1 Les marqueurs : la propriété 'marker-offset'
      • 12.6.2 Les listes : les propriétés 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'
  • 13 Les médias paginés
    • 13.1 Introduction aux médias paginés
    • 13.2 Les boîtes de page : la règle @page
      • 13.2.1 Les marges de la page
      • 13.2.2 La taille de la page : la propriété 'size'
        • Le rendu d'une boîte de page qui ne tient pas sur une feuille cible
        • Le positionnement de la boîte de la page sur la feuille
      • 13.2.3 Les repères de coupe : la propriété 'marks'
      • 13.2.4 Les pages de gauche, de droite et de couverture
      • 13.2.5 Le contenu en dehors de la boîte de page
    • 13.3 Les sauts de page
      • 13.3.1 Les propriétés de coupure avant et après : 'page-break-before', 'page-break-after', 'page-break-inside'
      • 13.3.2 L'utilisation des pages nommées : 'page'
      • 13.3.3 Les coupures à l'intérieur des éléments : 'orphans', 'widows'
      • 13.3.4 Les sauts de page permis
      • 13.3.5 Les sauts de page forcés
      • 13.3.6 Les sauts de page "au mieux"
    • 13.4 La cascade dans un contexte de page
  • 14 Les couleurs et les arrière-plans
    • 14.1 La couleur d'avant-plan : la propriété 'color'
    • 14.2 L'arrière plan
      • 14.2.1 Les propriétés d'arrière-plan : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' et 'background'
    • 14.3 La correction du gamma
  • 15 Les polices
    • 15.1 Introduction
    • 15.2 La spécification des polices
      • 15.2.1 Les propriétés de spécification de police
      • 15.2.2 La famille de polices : la propriété 'font-family'
      • 15.2.3 Le style de police : les propriétés 'font-style', 'font-variant', 'font-weight' et 'font-stretch'
      • 15.2.4 La taille de police : les propriétés 'font-size' et 'font-size-adjust'
      • 15.2.5 La propriété raccourcie de police : la propriété 'font'
      • 15.2.6 Les familles de polices génériques
        • serif
        • sans-serif
        • cursive
        • fantasy
        • monospace
    • 15.3 La sélection des polices
      • 15.3.1 Les descriptions des polices et @font-face
      • 15.3.2 Les descripteurs de sélection de police : 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' et 'font-size'
      • 15.3.3 Le descripteur de qualification des données de police : 'unicode-range'
      • 15.3.4 Le descripteur des valeurs numériques : 'units-per-em'
      • 15.3.5 Le descripteur de référencement : 'src'
      • 15.3.6 Les descripteurs de correspondance : 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' et 'descent'
      • 15.3.7 Les descripteurs de synthèse : 'widths', 'bbox' et 'definition-src'
      • 15.3.8 Les descripteurs d'alignement : 'baseline', 'centerline', 'mathline' et 'topline'
      • 15.3.9 Exemples
    • 15.4 Les caractéristiques des polices
      • 15.4.1 Introduction aux caractéristiques des polices
      • 15.4.2 Le nom entier d'une police
      • 15.4.3 Les unités de coordonnée dans le carré em
      • 15.4.4 La ligne de base centrale
      • 15.4.5 Le codage des polices
      • 15.4.6 Le nom de famille de polices
      • 15.4.7 Les dimensions des glyphes
      • 15.4.8 L'épaisseur de tige horizontale
      • 15.4.9 La hauteur des glyphes majuscules
      • 15.4.10 La hauteur des glyphes minuscules
      • 15.4.11 La ligne de base inférieure
      • 15.4.12 La ligne de base mathématique
      • 15.4.13 La boîte de circonscription maximale
      • 15.4.14 La hauteur maximale sans accent
      • 15.4.15 La profondeur maximale sans accent
      • 15.4.16 Le nombre Panose-1
      • 15.4.17 L'étendue des caractères ISO 10646
      • 15.4.18 La ligne de base supérieure
      • 15.4.19 L'épaisseur de tige verticale
      • 15.4.20 L'angle d'inclinaison vertical
    • 15.5 L'algorithme de correspondance de police
      • 15.5.1 Les correspondances entre valeurs de graisse et les noms de police
      • 15.5.2 Exemples de correspondances de police
  • 16 Le texte
    • 16.1 L'alinéa : la propriété 'text-indent'
    • 16.2 L'alignement : la propriété 'text-align'
    • 16.3 La décoration
      • 16.3.1 Trait en-dessous, trait au-dessus, rayure et clignotement : la propriété 'text-decoration'
      • 16.3.2 Les ombrages de texte : la propriété 'text-shadow'
    • 16.4 L'interlettrage et l'espace-mot : les propriétés 'letter-spacing' et 'word-spacing'
    • 16.5 La capitalisation : la propriété 'text-transform'
    • 16.6 Les caractères blancs : la propriété 'white-space'
  • 17 Les tables
    • 17.1 Introduction aux tables
    • 17.2 Le modèle de table de CSS
      • 17.2.1 Les objets de table anonymes
    • 17.3 Les sélecteurs de colonne
    • 17.4 Les tables dans le modèle de mise en forme visuel
      • 17.4.1 La position et l'alignement de la légende
    • 17.5 La disposition visuelle des contenus de la table
      • 17.5.1 Les couches de la table et la transparence
      • 17.5.2 Les algorithmes de largeur de table : la propriété 'table-layout'
        • La disposition de table fixe
        • La disposition de table automatique
      • 17.5.3 Les algorithmes de la hauteur de table
      • 17.5.4 L'alignement horizontal dans une colonne
      • 17.5.5 Les effets dynamiques des rangées et colonnes
    • 17.6 Les bordures
      • 17.6.1 Le modèle des bordures séparées
        • Les bordures autour des cellules vides : la propriété 'empty-cells'
      • 17.6.2 Le modèle des bordures fusionnées
        • La résolution des conflits de bordure
      • 17.6.3 Les styles de bordure
    • 17.7 Le rendu auditif des tables
      • 17.7.1 Les en-têtes parlées : la propriété 'speak-header'
  • 18 L'interface utilisateur
    • 18.1 Les curseurs : la propriété 'cursor'
    • 18.2 Les préférences de couleur de l'utilisateur
    • 18.3 Les préférences de police de l'utilisateur
    • 18.4 Les contours dynamiques : la propriété 'outline'
      • 18.4.1 Les contours et la sélection (N.D.T. focus)
    • 18.5 Le grossissement
  • 19 Les feuilles de styles auditives
    • 19.1 Introduction aux feuilles de styles auditives
    • 19.2 La propriété de volume : 'volume'
    • 19.3 La propriété de parole : 'speak'
    • 19.4 Les propriétés de pause : 'pause-before', 'pause-after' et 'pause'
    • 19.5 Les propriétés de signal : 'cue-before', 'cue-after' et 'cue'
    • 19.6 La propriété de mixage : 'play-during'
    • 19.7 Les propriétés spatiales : 'azimuth' et 'elevation'
    • 19.8 Les propriétés des caractéristiques des voix : 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' et 'richness'
    • 19.9 Les propriétés de diction : 'speak-punctuation' et 'speak-numeral'
  • Annexe A : Un exemple de feuille de style pour HTML 4.0
  • Annexe B : Les changements depuis CSS1
    • B.1 Les nouvelles fonctionnalités
    • B.2 La mise à jour des descriptions
    • B.3 Les changements sémantiques depuis CSS1
  • Annexe C : Les notes de mise en œuvre et d'optimisation des polices
    • C.1 Un glossaire pour les polices
    • C.2 Le téléchargement des polices
    • C.3 La signification des chiffres Panose
    • C.4 La déduction des étendues Unicode pour TrueType
    • C.5 La génération automatique des descripteurs
  • Annexe D : La grammaire de CSS2
    • D.1 La grammaire
    • D.2 Le scanner lexical
    • D.3 La comparaison entre les atomisations de CSS2 et CSS1
  • Annexe E : Références
    • E.1 Les références normatives
    • E.2 Les références informatives
  • Annexe F : Index des propriétés
  • Annexe G : Index des descripteurs
  • Annexe H : Index

Copyright © 1998 W3C (MIT, INRIA, Keio ), Tous droits réservés.


Accueil

Accueil CHM


Premiers pas en CSS

Premiers pas avec les CSS

Table des matières

  • I. L'ancienne façon d'appliquer des styles aux contenus
  • II. Comment fonctionnent les CSS
    • II-A. Les CSS dans le corps du code (X)HTML (à utiliser avec modération)
    • II-B. Les CSS dans l'en-tête de la page
    • II-C. Les CSS dans une feuille de style totalement séparée du code (X)HTML
    • II-D. Avantages des feuilles de styles séparées
  • III. Comment les CSS s'appliquent aux éléments (X)HTML
    • III-A. Comment appliquer un style aux balises (X)HTML standards
    • III-B. Comment utiliser des classes pour appliquer un style
    • III-C. Les éléments (X)HTML peuvent avoir plusieurs classes
    • III-D. Comment utiliser des "ID" pour appliquer un style
  • IV. Priorité des styles, les uns par rapports aux autres
    • IV-A. Styles par défaut, styles standards, classes et id
    • IV-B. Emboîtement de balises
  • Remerciements

Qu'est-ce que c'est ? Comment les utiliser ?

Les CSS (Cascading Style Sheets, c'est à dire "feuilles de styles en cascade") permettent de définir la présentation des pages Web.

Désormais, votre code HTML ne vous servira qu'à définir la structure de vos contenus tandis que les CSS vous permettront de créer vos styles et votre mise en page.

I. L'ancienne façon d'appliquer des styles aux contenus

Au début de l'histoire du Web, lorsque vous souhaitiez modifier le type de caractère d'une portion de texte, vous deviez utiliser la balise <font> en écrivant par exemple <font face="Times">.

Si vous souhaitiez définir la couleur de l'arrière plan et la bordure d'un tableau ainsi que le retrait (padding) de chacune de ses colonnes, vous auriez défini votre tableau par le code suivant :

Sélectionnez
<table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">
Cette approche présentait cependant de nombreux inconvénients :
  1. Vos styles étant définis à l'intérieur même de votre contenu, ils étaient fastidieux à définir ;
  2. Vous deviez répéter la même définition de style à chaque fois que vous souhaitiez l'utiliser dans votre page où dans les diverses pages de votre site ;
  3. A chaque fois que vous souhaitiez modifier ce style, vous deviez reparcourir le contenu de toutes vos pages pour mettre à jour, une par une, les diverses définitions qu'elles contenaient ;
  4. Ces répétitions augmentaient la taille de vos pages ;
  5. Vos styles étaient figés, les contenus se présentaient de la même façon pour tous les usages possibles : écran, imprimante, PDA, lecteurs vocaux, etc..

II. Comment fonctionnent les CSS

Les CSS représentent une nouvelle façon très efficace d'appliquer des styles aux éléments (X)HTML.

Elles vous permettent de définir n'importe quelle propriété de style comme la bordure, le type de caractère, la couleur de fond, l'espace entre les lettres, etc. (nous reviendrons plus tard sur la manière d'y parvenir).

Il y a trois façons principales d'appliquer des styles CSS :
  1. Dans le corps du code (X)HTML ;
  2. Dans l'en-tête de la page ;
  3. Dans une feuille de style totalement séparée du code (X)HTML.

II-A. Les CSS dans le corps du code (X)HTML (à utiliser avec modération)

Vous pouvez définir des styles CSS directement dans la définition d'une balise (X)HTML. Dans l'exemple ci-dessous, nous utilisons une balise <div> qui permet de définir une "boîte" à l'intérieur d'un contenu :

Exemple de code
Sélectionnez

<div style="background-color:orange; border:1px solid black; color:yellow; font-size:150%; padding:1em;">
  Cette balise div a du style !
</div>

Ce qui donne :
Image non disponible

Cette approche est extrêmement proche de l'ancienne façon de définir des styles et présente les mêmes inconvénients.

Elle ne présente un intérêt que lorsque vous êtes certain que le style défini ne sera utilisé à aucun autre endroit ni sur aucune autre de vos pages. S'il y a la moindre chance pour que vous ayez à nouveau besoin de ce style à un autre endroit, vous devriez absolument utiliser l'une des deux autres méthodes proposées plus bas, afin de faciliter la maintenance et l'évolution de votre site.

II-B. Les CSS dans l'en-tête de la page

Plutôt que par la méthode précédente, il est préférable de définir vos styles CSS une fois pour toute dans une section particulière de votre page Web (on utilise normalement la section <head>).

Sélectionnez

<head>
  <style type="text/css">
    div
    {
      background-color:#339;
      color:#fff;
      padding:15px;
      border-bottom:5px solid red;
      margin-bottom:15px;
    }
  </style>
</head>

<body>
  <div>
    Cette phrase est présentée en fonction du style défini dans l'en-tête
  </div>
  <div>
    Cette phrase aussi, est pourtant le style n'a été défini qu'une fois !
  </div>
</body>

Ce qui donne :
Image non disponible

Grâce à cette nouvelle façon de procéder, vous n'avez besoin de définir votre style qu'une seule fois. Dans notre exemple, le style défini s'appliquera automatiquement à toutes les balises <div> de la page.

Avec cette méthode, vous pouvez appliquer le même style plusieurs fois dans la même page, mais pas à plusieurs pages d'un coup. Pour aller plus loin dans la standardisation de vos pages, vous devrez utiliser la troisième méthode.

II-C. Les CSS dans une feuille de style totalement séparée du code (X)HTML

La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages (X)HTML. Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.

Un autre intérêt de cette méthode est de pouvoir définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.). Nous reviendrons plus tard sur cet aspect.

Une page (X)HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles.

Voici un exemple de styles définis dans un document séparé :

Document 'mes-styles.css'
Sélectionnez

body
{
  background-color:#ccf;
  letter-spacing:.1em;
}

p
{
  font-style:italic;
  font-family:times,serif;
}
Document 'ma-page.html'
Sélectionnez

<head>
  <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
  <p>Voici un exemple de paragraphe.</p>
  <p>Et voici un deuxième paragraphe.</p>
</body>

Et voici le résultat :
Image non disponible

Comme dans la méthode précédente (CSS dans l'en-tête de la page), le style n'a été défini qu'une seule fois mais peut être utilisé plusieurs fois. La différence entre cette méthode et la précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages. Il suffira d'ajouter la mention <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" /> dans ces pages pour que notre feuille de style s'y applique.

Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la feuille de styles à laquelle cette page fait référence. Cette feuille de style sera gardée en mémoire par le navigateur et n'aura pas besoin d'être rechargée lors de la lecture des pages suivantes. Le résultat est un gain de temps de chargement global et une économie de bande passante pour le serveur de votre site.

La méthode "<link href=..." permet également de mettre en place plusieurs feuilles de styles destinées aux différents medias (imprimante, navigateurs de PDA, etc.).

Vous pouvez en effet souhaiter mettre en place une présentation particulière (sans les menus, par exemple) destinée à l'impression de vos documents. Voici une liste des valeurs les plus couramment utilisées pour link :

<link href="general.css" rel="stylesheet" type="text/css" media="all"> | Remplacez general.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style commune à tous les medias.
<link href="ecran.css" rel="stylesheet" type="text/css" media="screen, projection"> | Remplacez ecran.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux écrans.
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld"> | Remplacez mobile.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux PDA et téléphones mobiles.
<link href="impression.css" rel="stylesheet" type="text/css" media="print"> | Remplacez impression.css par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux imprimantes.

Note : Le site blog-and-blues pourra vous apporter des détails sur ces sélecteurs de media.

Pour clore ce chapitre, précisons enfin que la déclaration "<link href=..." n'est pas la seule façon de faire appel à une feuille de style séparée. On peut également utiliser la formulation suivante :

Cette définition de style est à placer dans la section <head> de votre page.
Sélectionnez

<style type="text/css">
  @import url(styles.css) all;
</style>

Vous devrez remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style. Vous pouvez également remplacer "all" par le type de média auquel se destine votre feuille de style.

Le résultat sera exactement le même que si vous aviez déclaré <link href="styles.css" media="all" rel="stylesheet" type="text/css" />, à deux nuances près :

  • Internet Explorer (versions 6 ou inférieures) ne reconnaît pas le type de média avec "@import". La feuille de style ne sera ni importée ni appliquée si vous avez précisé un média. Utilisez la formulation suivante : <style type="text/css">@import url(styles.css)</style> si vous voulez que votre déclaration soit reconnue par IE6.
  • La règle "@import" permet d'importer une feuille de styles à l'intérieur d'une autre feuille de style. La déclaration aura alors la forme simple suivante : @import url(styles.css). Vous devrez seulement remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style.

II-D. Avantages des feuilles de styles séparées

Il y a de multiples avantages à séparer les feuilles de styles du contenu.

Citons en particulier :
  1. La réduction de la taille des pages : Les définitions de style ne sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois ;
  2. La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation ;
  3. Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site ;
  4. Scinder le travail de rédaction et le travail de présentation : Vous pouvez commencer à rédiger le contenu de vos pages sans vous soucier de leur présentation finale. Pensez simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes, classes et ID, etc.). Vous pourrez travailler votre mise en page et votre design plus tard.

III. Comment les CSS s'appliquent aux éléments (X)HTML

Quelques règles suffisent pour pouvoir séparer le contenu et sa présentation. L'essentiel est de comprendre comment établir le lien entre un style et la phrase à laquelle s'applique le style. Ce mécanisme est heureusement assez simple.

III-A. Comment appliquer un style aux balises (X)HTML standards

Avec les CSS, vous pouvez changer la présentation de toutes les balises (X)HTML standards. Il vous suffit de spécifier le nom de la balise et de faire figurer vos définitions comme suit :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.
Sélectionnez

p
{
  font-weight:bold;
  line-height:1.3em;
}
Code (X)HTML associé au CSS
Sélectionnez

<p>Ce style va s'appliquer à moi car je suis un paragraphe.</p>
<div>Mais il ne s'appliquera pas à moi.</div>

Le code ci-dessus aura pour effet de mettre en gras et d'augmenter la hauteur de ligne de tous les paragraphes

La syntaxe générale de définition est la suivante :
  1. Préciser le nom de la balise en premier ;
  2. Encadrer les définitions par des accolades { } ;
  3. Placer un point virgule ; derrière chaque définition.

III-B. Comment utiliser des classes pour appliquer un style

Vous pouvez attribuer à chaque élément (X)HTML une ou plusieurs classes. C'est vous qui définirez le nom de ces classes et qui déciderez de leurs styles.

Les styles définis dans les classes remplaceront les styles "normaux" des éléments auxquels ils s'appliquent.

Pour créer une classe, vous devez simplement faire figurer son nom précédé d'un point. Pour éviter toute ambiguïté, votre nom de classe ne doit pas comporter d'espace.

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.
Sélectionnez

.mon-style
{
  color:red;
}

Pour appliquer le style défini dans votre classe à un élément, ajouter la mention class="nom-du style" dans la définition de la balise :

Sélectionnez

<p class="mon-style">Le style s'applique à ce paragraphe</p>

<p>Mais pas à celui-là</p>

Cette façon de procéder est très pratique car elle permet d'appliquer les réglages de votre classe à de nombreux éléments, même s'ils ne sont pas du même type :

Sélectionnez

<p class="mon-style">Le style peut s'appliquer à ce paragraphe</p>

<div class="mon-style">Et aussi à cette balise !</div>

III-C. Les éléments (X)HTML peuvent avoir plusieurs classes

Chaque élément (X)HTML peut avoir aucune, une ou plusieurs classes. Pour appliquer plusieurs classes au même élément, précisez simplement la liste de classes en séparant leurs noms par un espace :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.
Sélectionnez

.mon-style1
{
  color:yellow;
}

.mon-style2
{
  background-color:#A0A0A0;
  font-weight:bold;
}
Code (X)HTML associé au CSS
Sélectionnez

<p class="mon-style1 mon-style2">Les styles des deux classes s'appliquent à ce paragraphe</p>

<p class="mon-style2">Alors que ce paragraphe n'a qu'une seule classe </p>

III-D. Comment utiliser des "ID" pour appliquer un style

Les éléments (X)HTML peuvent se voir attribuer un id (identification) en plus ou à la place d'une classe.

Le principe de l'id est très similaire à celui de la classe à une exception près :
  • Plusieurs éléments peuvent avoir la même classe ;
  • Il ne doit y avoir qu'un seul élément ayant un id donné.

Vous pourriez parfaitement vous contenter d'utiliser les classes pour tous vos styles et oublier complètement l'existence des id.

Leur utilisation permet simplement de clarifier les choses et de mieux structurer vos pages :
  • On utilise les classes pour définir l'aspect des mots, phrases et paragraphes ;
  • On utilise les id pour placer des blocs dans la page (sachant qu'on n'a généralement jamais deux blocs placés exactement au même endroit).

Pour créer un id, vous devez simplement faire précéder son nom d'un dièse #. Pour éviter toute ambiguïté, votre nom d'id ne doit pas comporter d'espace.

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.
Sélectionnez

#mon-style
{
  color:red;
}

Pour appliquer le style défini dans votre id à un élément, ajouter la mention id="nom-du style" dans la définition de la balise

Sélectionnez

<p id="mon-style">Le style s'applique à ce paragraphe</p>

<p>Mais pas à celui-là</p>

IV. Priorité des styles, les uns par rapports aux autres

IV-A. Styles par défaut, styles standards, classes et id

Par défaut, chaque type de balise a une présentation particulière dans chaque navigateur. Si vous n'avez défini aucun style particulier pour la balise <p>, il est possible que le texte contenu dans ces balises ne se présente pas exactement de la même façon dans tous les navigateurs.

Lorsque vous définissez vous-même le style d'une balise standard avec une définition telle que p {blablabla}, vous obligez tous les navigateurs à afficher votre texte de la même façon.

Si vous attribuez une classe à un paragraphe, les styles que vous aurez définis dans cette classe remplaceront également les styles standards du paragraphe et seront même prioritaires par rapport aux styles que vous aurez définis sous la forme p {blablabla}.

Si vous attribuez un id à un paragraphe, les styles définis dans l'id seront prioritaires par rapport à tous les autres styles pouvant s'appliquer à ce paragraphe.

Si vous définissez deux fois le même style dans 2 classes différentes et que les 2 classes s'appliquent à la même balise, c'est la dernière classe citée dans la déclaration class="classe1 classe2" qui sera prioritaire.

Si vous définissez 2 fois le même style pour la même balise standard, la même classe ou le même id, c'est la dernière définition qui sera prioritaire.

En résumé, voici l'ordre des priorités (ceci est valable pour toutes les balises (X)HTML) :

  1. Style standard défini par le navigateur

    Sélectionnez

.mon-style1
{
  color:brown;
  font-weight:bold;
}

.mon-style2
{
  color:green;
}

  2. Style standard redéfini en CSS (la dernière définition est prioritaire)

    CSS
    Sélectionnez

p
{
  color:brown;
}

.mon-style
{
  color:green;
  font-weight:bold;
}
    (X)HTML
    Sélectionnez

<p class="mon-style">
  Ce paragraphe s'affiche en vert parce que la classe est prioritaire par rapport au style standard de la balise
</p>

  3. Style de classe CSS (la dernière définition est prioritaire)

    CSS
    Sélectionnez

.mon-style
{
  color:brown;
  font-weight:bold;
}

.mon-style
{
  color:green;
}
    (X)HTML
    Sélectionnez

<p class="mon-style">Ce paragraphe s'affiche en vert parce que c'est la dernière (re)définition de style qui est prioritaire</p>

  4. Style d'id (la dernière définition est prioritaire)

    CSS
    Sélectionnez

#mon-style1
{
  color:green;
}

.mon-style2
{
  color:brown;
  font-weight:bold;
}
    (X)HTML
    Sélectionnez

<p id="mon-style1" class="mon-style2">
  Ce paragraphe s'affiche en vert parce que l'ID est prioritaire sur la classe
</p>

IV-B. Emboîtement de balises

Dans un cas d'emboîtement de balises tel que celui-ci :

Sélectionnez

<body>
  <div>
    <p>
      bla bla bla
    </p>
  </div>
</body>

Les différents styles attribués aux balises <body>, <div> et <p> vont se combiner pour définir quels sont les styles définitifs qui seront appliqués au texte "bla bla bla".

Si le même style est défini, puis redéfini dans ces différentes balises (la couleur du texte, par exemple), c'est la dernière définition qui l'emportera sur les autres.

Si un style particulier n'est défini que dans <body> il doit logiquement s'appliquer à l'ensemble du contenu de <body>.

En vérité, certains styles (tels que la couleur, par exemple) se transmettent automatiquement aux balises emboîtées, tandis que d'autres (tels que les marges, par exemple) ne se transmettent pas. Lorsqu'ils se transmettent, on dira que le contenu des balises <div> et <p> aura "hérité" des propriétés de <body>.


Feuilles de style en cascade

Un article de Wikipédia, l'encyclopédie libre.

Les feuilles de style en cascade[1], généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Sommaire

  • 1 Histoire de CSS
    • 1.1 Un concept parmi d'autres, présent dès l'origine du web
    • 1.2 Les premiers développements
    • 1.3 Vers une maturation difficile
      • 1.3.1 CSS1, des implémentations difficiles pendant la guerre des navigateurs
      • 1.3.2 CSS2, des ambitions précipitées
      • 1.3.3 CSS 2.1, retour aux implémentations
    • 1.4 CSS3
    • 1.5 CSS4
  • 2 Enjeux et principes
    • 2.1 Les enjeux
      • 2.1.1 Séparer la structure d'un document de ses styles de présentation
      • 2.1.2 Décliner les styles de présentation selon le récepteur
      • 2.1.3 Permettre la cascade des styles
    • 2.2 Principes techniques et syntaxe de CSS
      • 2.2.1 Les concepts fondamentaux : boîtes et flux CSS
      • 2.2.2 Propriétés et valeurs
      • 2.2.3 Sélecteurs et blocs de règles
  • 3 Limites de CSS
    • 3.1 Indépendance de la présentation et de la structure
    • 3.2 Accessibilité
    • 3.3 Simplicité
  • 4 Notes et références
    • 4.1 Notes
    • 4.2 Références
  • 5 Voir aussi
    • 5.1 Bibliographie
    • 5.2 Articles connexes
  • 6 Liens externes
    • 6.1 Recommandations du W3C

Histoire de CSS

Un concept parmi d'autres, présent dès l'origine du web

Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web (« WorldWideWeb », renommé par la suite « Nexus ») permet de mettre en forme les documents à l'aide de ce qui serait aujourd'hui considéré comme une « feuille de style utilisateur »[2]. De même, les navigateurs Viola en 1992 et Harmony en 1993 recourent à un mécanisme similaire permettant de déterminer le rendu des polices de caractères, des couleurs ou de l'alignement du texte.

Il ne s'agit cependant pas de styles déterminés par l'auteur du document. HTML ne comportant pas non plus d'éléments de présentation dans ses premières années, une pression croissante s'exerce alors pour que les navigateurs permettent aux auteurs de déterminer eux-mêmes la présentation des pages web [3], dans une démarche issue de la publication imprimée électronique. C'est dans ce contexte, en 1994-1995, que le tout nouveau Netscape Navigator introduit les premiers éléments HTML de présentation à l'initiative de Marc Andreessen, tandis qu'apparaissent concurremment les premières propositions de styles externes[n. 1] : le « stylesheet proposal » de Pei Wei (créateur de Viola)[4], les « Stylesheets for HTML » de Robert Raisch (O'Reilly)[5], et enfin les « Cascading HTML Style Sheets » (CHSS) d'Håkon Wium Lie

[6]. L'apparition de CSS répond à une volonté de « proposer une alternative à l'évolution du HTML d'un langage de structuration vers un langage de présentation »[7].

Une troisième voie de développement est également ouverte à la même époque : le langage de transformation DSSSL des documents SGML, élaboré par James Clark, suggère la possibilité d'un langage de styles qui ne soit pas seulement descriptif, et se rapproche d'un véritable langage de programmation [n. 2]. Cette voie est suivie par Netscape, qui propose en 1996 au W3C les « JavaScript-Based Style Sheets » (JSSS)[8], implémentées par Netscape Navigator 4 en 1997.

Les origines des CSS sont donc liées à trois alternatives majeures :

  • HTML est-il un langage de structuration ou un langage mixte de mise en forme et de structuration ?
  • Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?
  • La réponse aux besoins est-elle un langage de description de la mise en forme, ou un langage de transformation ?

Les premiers développements

La première proposition de Cascading HTML Style Sheets formulée par Håkon Wium Lie retient l'attention de Dave Raggett, qui est alors le principal éditeur du projet de spécification HTML 3.0. Partisan d'un HTML purement structurel, il encourage la publication d'un document de travail CHSS, afin que celui-ci puisse être présenté et discuté à la seconde conférence internationale sur le WWW (Mosaic and the Web, Chicago, 1994). Il modifie également avec Håkon Lie le navigateur Arena [n. 3], afin de permettre de tester ce langage, et en fait la démonstration lors de la troisième conférence WWW en 1995.

Parallèlement, Bert Bos, qui travaillait alors sur le navigateur Argo [9], et qui avait soumis au W3C son propre projet « Stream-based Style Sheet Proposal » (SSP), décide de joindre ses efforts à ceux d'Håkon Lie. SSP ayant été développé avec l'idée d'être applicable non seulement à HTML, mais aussi à d'autres langages de balisage, Bert Bos et Håkon Lie reprennent cet objectif, et en font une des caractéristiques clés de ce qui devient alors CSS proprement dit.

Un autre aspect de CSS s'avère alors déterminant face aux alternatives existantes : CSS est le premier langage à inclure l'idée de « cascade » (feuille de style en cascade), c'est-à-dire la possibilité pour le style d'un document d'être hérité à partir de plusieurs « feuilles de style ». Cela permet d'arbitrer entre plusieurs sources concurrentes de mise en forme d'un élément, et répond donc à la nécessité de composer entre les préférences stylistiques des auteurs et des utilisateurs.

Le World Wide Web Consortium (W3C) devient opérationnel en 1995, et la liste de discussion www-style est alors créée[10]. La même année se tient à Paris un « W3C style sheet workshop » décisif pour l'avenir des CSS[11]. Y est notamment affirmée la volonté de conserver les feuilles de style sous une forme simple, ce qui exclut l'hypothèse JSSS de Netscape. Par ailleurs, Thomas Reardon (Microsoft) y annonce le support à venir de CSS dans les futures versions d'Internet Explorer : dès lors, lorsque le W3C crée à la fin de l'année le « HTML Editorial Review Board » (HTML ERB) pour ratifier les futures spécifications HTML, DOM et CSS, Netscape, représenté par Lou Montulli, se rallie finalement au projet CSS mené par Bert Bos et Håkon Lie.

Vers une maturation difficile[

Contrairement aux logiciels, les spécifications CSS ne sont pas développées par versions successives, qui permettraient à un navigateur de se référer à une version en particulier. CSS est développé par « niveaux », ce qui contraint chaque nouveau niveau à intégrer le précédent, et chaque implémentation à être compatible avec la précédente : CSS1 est donc développé pour être un sous-ensemble de CSS2, qui est lui-même développé pour être un sous-ensemble de CSS3. Ceci explique en partie la lenteur de l'avancement normatif de CSS[12].

CSS1, des implémentations difficiles pendant la guerre des navigateurs

La spécification CSS1 finale est publiée le 17 décembre 1996, et définit une cinquantaine de propriétés. CSS1 se définit comme un « mécanisme de feuille de style simple, permettant aux auteurs et aux lecteurs d'attacher des styles (…) au document HTML »[13]. Cette simplicité se traduit par le choix d'un langage qui peut être aisément lu et écrit directement par ses utilisateurs humains, et d'une terminologie conforme aux usages courants dans la publication informatique. Le choix éventuel d'exprimer CSS dans une syntaxe XML ou SGML, régulièrement évoquée pour éviter l'implémentation d'un nouveau mode d'analyse syntaxique, est donc définitivement écartée[n. 4].

CSS1 ne décrit pas uniquement sa propre grammaire : ce premier niveau décrit en effet une grammaire destinée à permettre aux niveaux ultérieurs d'ajouter de nouvelles fonctionnalités, tout en autorisant la lecture de ces futures feuilles de styles par les implémentations d'origine. Ces nouvelles fonctionnalités ne seront pas comprises par les implémentations d'origine, mais pourront être identifiées en tant que telles, et ignorées. CSS garantit ainsi sa compatibilité descendante.

CSS1 définit essentiellement les propriétés de rendu typographique du texte : fontes (polices), couleur, taille des caractères, graisse, espacements, bordures et gestion des marqueurs de liste. Il n'est donc pas encore question de « mise en page » : la propriété float, qui sera par la suite massivement utilisée pour la mise en page CSS globale des designs web, n'est alors conçue que comme un moyen de placer localement, côte à côte, une portion réduite du contenu, tel qu'une image, et le reste du texte[14]. Compte tenu des implémentations problématiques de CSS1, le détournement de l'élément HTML table pour gérer la mise en page globale reste dans l'immédiat la solution la plus couramment retenue par les auteurs de contenu web.

En 1996, Internet Explorer 3.0 est le premier navigateur commercial à implémenter partiellement CSS alors que celle-ci est encore en cours de formulation. Cette implémentation anticipée, menée par Chris Wilson[15] ne correspond pas à la spécification finale. En 1997, Internet Explorer 4.0 voit la naissance d'un nouveau moteur de rendu, Trident, à l'origine du support croissant mais problématique de CSS dans les différentes versions de ce navigateur sous Windows, jusqu'à Internet Explorer 7 inclus[n. 5].

Netscape Navigator 4.0 suit le mouvement en 1997, malgré ses réticences historiques vis-à-vis de CSS[n. 6] : dans le contexte de la guerre des navigateurs, il s'agit alors principalement d'éviter que Microsoft ne puisse s'affirmer comme le navigateur le plus conforme. Cependant, cette implémentation précipitée, basée sur des méthodes JavaScript internes, se révèle finalement limitée et très peu fiable. Netscape Navigator 4.0 apporte également une implémentation JSSS, qui restera sans lendemain[n. 7]. Il faudra attendre le nouveau moteur de rendu Gecko du projet Mozilla pour parvenir à une véritable implémentation de CSS1.

En 1998, alors que s'achève la guerre des navigateurs opposant Netscape et Microsoft, Opera 3.5, dont Håkon Lie est entre-temps devenu le directeur technique, parvient à une implémentation plus complète de CSS1, facilitée par la publication de la première « Test suite for Cascading Style Sheets (CSS) Level 1 » créée principalement par Eric Meyer pour le W3C[16]. La présence de ces suites de test se révèle un atout majeur à la fois pour les implémentations dans les navigateurs et pour l'appropriation des techniques CSS par les auteurs (en fournissant des exemples détaillés des propriétés et de leurs valeurs).

Enfin, sous l'impulsion de Tantek Çelik, Internet Explorer 5.0 pour Macintosh lancé en mars 2000, basé sur Tasman, un moteur de rendu spécifique sans rapport avec Trident, est le premier navigateur à supporter complètement (à plus de 99 %) CSS1. Pour assurer la compatibilité avec les précédentes pratiques de codage propre à chaque implémentation (la « soupe de balises »), et permettre un affichage correct des documents web qu'ils soient respectueux ou non des standards CSS et HTML, il est également le premier à mettre en œuvre la technique du doctype switching. Adoptée par la suite par tous les navigateurs, celle-ci devient par la suite l'une des clés de l'implémentation progressive de CSS : elle permet en effet au navigateur de conserver d'anciennes implémentations propriétaires pour des raisons de compatibilité, tout en ayant la possibilité d'opter, en fonction de la syntaxe de la déclaration de type de document de la page, pour un mode de rendu conforme à de nouvelles implémentations standards[17].

Durant cette période de la fin des années 1990, la conception web est avant tout dépendante de l'utilisation d'HTML en tant que format de présentation. La défaite de Netscape à l'issue de la guerre des navigateurs, le renouveau qui s'ensuit via le projet Mozilla, l'apparition d'IE5 Mac, et à un moindre titre l'évolution d'Internet Explorer Windows 5.x, amorcent cependant au début des années 2000 une nouvelle étape dans l'évolution des pratiques de conception des sites web par les auteurs : ces navigateurs permettent en effet de montrer que les pratiques historiques datant de l'époque de la guerre des navigateurs, mêlant structure et présentation, peuvent réellement être abandonnées au profit d'une démarche fondée sur les feuilles de styles et le respect plus général des standards du web (au sens d'HTML et CSS). Jeffrey Zeldman, cofondateur du Web Standards Project et fondateur d'A List apart en 1998, apparaît alors comme la figure emblématique de ce mouvement de promotion des standards[n. 8]. Il est également l'inspirateur d'une démarche de conception « hybride », tirant profit des techniques CSS tout en demeurant temporairement dans le cadre d'une mise en forme des documents fondée sur les tableaux de présentation.

CSS2, des ambitions précipitées

Pour répondre aux besoins que la première spécification CSS1 ne couvrait pas encore, CSS est attribué en 1997 à un nouveau groupe de travail au sein du W3C, présidé par Chris Lilley. En 2007, ce groupe comporte notamment des représentants d'Apple, Google, IBM, Microsoft, Adobe, de la Fondation Mozilla et d'Opera

.

Publié comme une recommandation en mai 1998, le second niveau de CSS étend considérablement les possibilités théoriques des feuilles de styles en cascade, avec en particulier environ 70 propriétés supplémentaires. À la mise en forme typographique du texte initiée avec CSS1 s'ajoutent en effet notamment :

  • la déclinaison en styles propres aux différents média dans lesquels une page web peut être restituée (impression, rendu par une synthèse vocale, par un dispositif braille, par un dispositif de projection, un mobile, etc.)
  • de nouvelles propriétés de positionnement à l'écran pour permettre la réalisation de mise en pages avancées, issues d'un document élaboré conjointement par Microsoft et Netscape[18]
  • un jeu de propriétés autorisant le téléchargement de polices de caractères spécifiques
  • de nouvelles propriétés permettant de faire intervenir les préférences de l'utilisateur dans la mise en forme d'un site.

Cependant, cette richesse fonctionnelle ne rencontre qu'un écho limité dans ses implémentations :

  • La déclinaison par média est en partie un échec : les styles de rendus vocaux restent théoriques faute de prise en compte par les navigateurs vocaux et lecteurs d'écran. Ils s'avèrent par ailleurs incompatibles avec le standard d'interaction vocale SSML. Il en est de même de l'affichage et de l'impression braille. Les styles d'impression ne sont que très partiellement adoptés par les navigateurs graphiques, tandis qu'une partie des navigateurs pour mobiles ignorent encore au début des années 2000 le type de média CSS qui leur est dédié.
  • Seules quelques propriétés avancées de positionnement sont reconnues par l'ensemble des navigateurs graphiques, consolidant ainsi les pratiques de mise en page qui reposent sur des détournements de fonctionnalités CSS (système des blocs flottants ou positionnés) et HTML (tableaux de mises en page).
  • Le téléchargement de polices de caractères suscite des implémentations non conformes et divergentes entre Netscape et Internet Explorer, et rencontre l'opposition des éditeurs de fontes, soucieux de préserver leurs intérêts commerciaux[n. 9].

Plusieurs causes sont évoquées pour expliquer ces difficultés et la lenteur des implémentations CSS2 :

  • la « sous-spécification ou quasi-inimplémentabilité de certaines sections »[19]. Håkon Lie souligne lui-même dans sa thèse sur les feuilles de style en cascade, en 2005, les risques de non implémentation ou de perte d'interopérabilité liés à des « fonctionnalités excessives », telles que les marqueurs de liste, les repères de coupe pour l'impression ou le téléchargement de polices de caractères. De même, la complexité des sélecteurs avancés est difficilement conciliable avec la gestion de la cascade.
  • l'absence d'intérêt de la part des fabricants de navigateurs pour des fonctionnalités qui ne répondaient pas nécessairement à leurs objectifs stratégiques ou commerciaux.
  • l'interruption du développement d'Internet Explorer, navigateur dominant du marché, de 2001 à 2006. Håkon Lie écrivait en effet en 2005 : « 2001 est un tournant pour CSS. C'est l'année où Microsoft produit Internet Explorer 6.0 qui offre une prise en charge fonctionnelle, bien qu'incomplète et buggée, de CSS (…) Aucun autre navigateur n'a été capable de concurrencer WinIE en termes de nombre d'utilisateurs. WinIE a, de ce fait, déterminé le sous-ensemble de CSS utilisable par les auteurs. La prise en charge limitée de CSS par WinIE, combinée à un monopole de fait en matière de navigateur web, est actuellement le plus grave problème du déploiement de CSS. »[20]

CSS 2.1, retour aux implémentations

Les retours d'implémentation de CSS2 conduisent le groupe de travail CSS du W3C à rédiger à partir de 2001 une version révisée CSS 2.1 (« CSS Level 2, Revision 1 »), sur la base de ce qui était effectivement adopté par les différents navigateurs. Les objectifs de cette révision sont[21] :

  • de maintenir la compatibilité avec les parties de CSS2 qui sont largement acceptées et mises en application.
  • d'incorporer dans la norme tous les errata CSS2 déjà publiés.
  • Lorsque les implémentations diffèrent profondément de la spécification CSS2, de modifier la spécification pour qu'elle soit en accord avec les pratiques généralement admises.
  • de supprimer les dispositifs CSS2 qui ont été refusés par la communauté CSS, vu leur manque d'implémentation. CSS 2.1 vise à refléter les mécanismes CSS qui ont été raisonnablement et largement implémentés pour les langages HTML et XML en général (plutôt que pour un langage XML en particulier, ou pour HTML seul).
  • de supprimer les mécanismes CSS2 qui seront rendus obsolètes par CSS3, et encourager ainsi l'adoption de mécanismes CSS3 à leur place.
  • d'ajouter un (très) petit nombre de nouvelles valeurs de propriétés, lorsque l'expérience d'implémentation a montré qu'elles répondaient à un besoin pour la mise en application de CSS2.

CSS 2.1 corrige CSS2 sur de nombreux points de détail, en supprime certaines sections en tout ou partie (les styles vocaux définis sous le type de media « aural », les styles d'impression, les polices téléchargeables, dont les définitions plus probantes sont repoussées à la future CSS3), et l'explicite à partir des constats mis à jour lors des implémentations (la gestion avancée des blocs flottants via les « contextes de formatage »[22]).

Après avoir connu 8 versions successives, CSS 2.1 est en juillet 2007 une recommandation candidate, c'est-à-dire le standard que doivent suivre les implémentations[23].

En 2007, aucun navigateur n'a en effet achevé l'intégration de CSS 2.1 : celle-ci serait implémentée à 56 % par Internet Explorer 7, 91 % par Firefox 2 et 94 % par Opera 9[24]. Par ailleurs, seule une partie des navigateurs graphiques ont passé avec succès ou retenu comme objectif le test Acid2, lancé en 2005 par le Web Standards Project, à l'initiative d'Håkon Lie, pour favoriser notamment l'implémentation d'un choix de fonctionnalités CSS 2.1 considérées comme les principales avancées nécessaires : positionnement d'éléments lors de l'affichage, généralisation du modèle de rendu en tableau à tous les éléments, contenu généré via CSS. L'utilisation professionnelle de CSS reste donc limitée à un sous-ensemble arbitraire de celle-ci, déterminé par les implémentations communes.

CSS3

Le développement du troisième niveau des feuilles de styles en cascade commence dès 1999, parallèlement à celui de CSS 2.1.

CSS3 devient « modulaire », afin de faciliter ses mises à jour, mais aussi son implémentation par des agents utilisateurs aux capacités et aux besoins de plus en plus variés (navigateurs graphiques, navigateurs pour mobiles, navigateurs vocaux). Les navigateurs peuvent ainsi implémenter des sous-ensembles de CSS3[25].

Dès lors, le degré d'avancement de CSS3 varie selon les modules et le degré de priorité qui leur a été donné par le groupe de travail CSS[26]. En 2007, les modules les plus avancés (recommandations candidates) concernent la mise en forme des annotations ruby, la négociation de style entre serveurs et agents utilisateurs (« Media Queries »), le rendu web TV, la gestion des couleurs ou encore la prise en compte de la configuration de l'interface utilisateur. Dans d'autres cas, des modules peuvent atteindre le stade de recommandation candidate, mais être par la suite ramené au stade de document de travail en raison des difficultés mises à jour à la suite de l'appel à implémentation. C'est par exemple le cas du module de typographie « CSS Text ».

De même, les implémentations varient selon les stratégies et les besoins des différents navigateurs. Opera implémente par exemple les « Media Queries », qui répondent à ses besoins spécifiques de navigateur multiplate-forme embarqué sur des clients ayant des capacités d'affichage très variées. Firefox, davantage orienté vers le navigateur exploité en tant que plateforme, privilégie en revanche des modules appropriés à cet usage comme le module sélecteurs avancés.

Certains membres du groupe de travail CSS, ainsi que des développeurs web, ont soulevé le problème de la lenteur de l'avancement de CSS3 :

  • Pour Ian Hickson, « le groupe de travail CSS est aujourd'hui atteint de dysfonctionnements chroniques » : son caractère trop fermé le prive des contributeurs nécessaires pour l'édition des spécifications, leur relecture ou encore la rédaction des suites de test[27].
  • Pour Daniel Glazman, cette lenteur s'explique par 3 erreurs originelles : le choix de développer CSS par niveau et non pas par versions successives, la priorité accordée à la révision CSS 2.1 au détriment de CSS3, le nombre excessif de modules CSS3 et la complexité des propriétés qui y sont développées[28].

En 2008, aucun module n'est considéré comme terminé par le W3C, et l'implémentation dans les navigateurs est donc marginale, souvent à titre de test, comme les fonctions -moz-xxx du moteur Gecko, dont le préfixe limite l'utilisation aux seuls navigateurs basés sur Gecko.

CSS4

L'écriture quatrième niveau des feuilles de styles en cascade débute dès 2010[29], parallèlement aux modules CSS 3.

Certains modules étant figés ou en phase de l'être, des brouillons sont lancés pour continuer d'étendre les possibilités de ces derniers. Le travail se fait donc en complément de la couche précédente, voire en reprenant la couche inférieure pour les sélecteurs[30].

Enjeux et principes

Les enjeux

Séparer la structure d'un document de ses styles de présentation

L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de présentation, et de réduire la complexité de l'architecture d'un document.

Ainsi, les avantages des feuilles de style sont multiples :

  • La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
  • La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
  • Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel.
  • Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran. Certains navigateurs web permettent au visiteur de choisir un style parmi plusieurs.
  • Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation.

Décliner les styles de présentation selon le récepteur

CSS permet de définir le rendu d'un document en fonction du média de restitution et de ses capacités (type de moniteur ou de dispositif vocal), de celles du navigateur (texte ou graphique), ainsi que des préférences de son utilisateur.

Les feuilles de styles peuvent être différenciées pour les médias suivants, selon CSS2.1[31] :

  • all : quel que soit le média
  • screen : écrans d'ordinateur de bureau
  • print : pour l'impression papier
  • handheld : écrans de très petite taille et clients aux capacités limitées
  • projection : quand le document est projeté
  • tv : quand le document est affiché sur un appareil de type télévision
  • speech : pour le rendu via une synthèse vocale (remplaçant aural, initialement prévu par CSS2.0 puis déprécié par CSS2.1)

D'autres types de media sont théoriquement prévus par la spécification CSS2.1, mais ne sont pas implémentés par les agents utilisateurs : braille et embossed pour les tablettes brailles et les embosseuses, ainsi que tty pour les téléscripteurs.

Dans chaque média, les styles de présentation déterminés par l'auteur du document se combinent avec ceux par défaut de l'agent utilisateur et ceux issus des préférences de l'utilisateur et de sa configuration personnelle.

Les capacités du récepteur peuvent être prises en compte par les auteurs, à destination des agents utilisateurs implémentant le module CSS3 « media queries »[32] : celui-ci permet de conditionner la prise en compte d'une feuille de style à des contraintes concernant notamment la résolution ou la capacité de restitution des couleurs.

Permettre la cascade des styles

La « cascade » est la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner :

  • par origine des styles, issus de l'agent utilisateur, de l'auteur et de l'utilisateur. La priorité supérieure accordée aux styles de l'utilisateur est un des facteurs principaux de l'accessibilité des documents présentés à l'aide de CSS.
  • par média : une feuille de style générique peut s'appliquer à plusieurs média de restitution (affichage à l'écran, impression, projection) et être combinée avec des feuilles propres à chaque média.
  • selon l'architecture d'un ensemble de documents web : une feuille de style générique peut s'appliquer à la totalité des pages d'un site web, être combinée avec des feuilles propres à chaque rubrique de celui-ci, ainsi qu'avec des styles propres à telle ou telle page spécifique.
  • selon l'architecture des feuilles elles-mêmes : une feuille de style externe au document peut être combinée à une feuille de style interne et à des styles appliqués directement à chaque élément qui le compose (styles « en ligne »). Une feuille de style peut également importer une ou plusieurs autres feuilles externes.

Principes techniques et syntaxe de CSS

Les concepts fondamentaux : boîtes et flux CSS

Le rendu d'un document stylé est déterminé par les concepts de boîte et de flux. Le moteur de rendu CSS établit une « structure de formatage » reflétant l'arbre logique du document. Chaque élément de cette structure génère une ou plusieurs zones dotées de propriétés d'affichage ou de rendu vocal paramétrables. L'affichage ou la lecture s'effectuent à partir du flux des boîtes successivement générées pour chaque élément tel qu'il apparaît dans l'ordre linéaire de la structure de formatage.

Selon les cas de figures, ces différents types de boîtes :

  • peuvent avoir des propriétés de marges, de bordure, d'arrière-plan, de largeur ou de hauteur, etc. Dans un rendu vocal, des propriétés équivalentes permettent de déterminer des pauses dans la lecture avant ou après le contenu, de choisir une voix, de régler son débit ou son niveau sonore.
  • peuvent être déplacées par rapport à leur position par défaut dans le flux, ou avoir un comportement particulier dans celui-ci (permettre un rendu en colonnes adjacentes, se superposer aux boîtes voisines, ou être masquées par exemple).

Propriétés et valeurs

Les caractéristiques applicables aux boîtes CSS sont exprimées sous forme de couples propriété: valeur.

Les propriétés sont libellées à l'aide de mots-outils anglais tels que « width » (largeur), « font-size » (taille de la police de caractères) ou « voice-volume » (volume sonore du rendu vocal).

Les valeurs peuvent être selon les cas exprimées à l'aide d'unités normalisées par ailleurs, ou de mots-clés propres à CSS. Par exemple, une couleur de fond ou de texte peut être exprimée à l'aide du modèle RGB ou des mots clés black, blue, fuchsia, etc.

Les propriétés CSS ont été établies selon un compromis entre deux contraintes opposées : faciliter la lecture des feuilles de styles par les agents utilisateurs en multipliant les propriétés individuelles, ou faciliter leur écriture par les auteurs en recourant à un nombre plus réduit de propriétés combinées. Par exemple, la position d'une image d'arrière-plan est déterminée par une propriété unique (background-position), combinant les deux valeurs d'abscisse et d'ordonnée, et non par deux propriétés distinctes. De même, il existe des propriétés raccourcies permettant aux auteurs de simplifier l'écriture d'une série de propriétés : le raccourci font permet, par exemple, de résumer en une seule règle l'ensemble des propriétés de police de caractères, de taille, de hauteur de ligne, de casse, de graisse et d'italique. Mais l'utilisation du caractère « / » rend beaucoup plus complexe l'analyse syntaxique des feuilles de styles par les agents utilisateurs[33].

Sélecteurs et blocs de règles

Les propriétés sont regroupées par blocs de règles, délimités par les accolades {}. Chaque bloc est précédé d'un sélecteur désignant les éléments structurels auxquelles les propriétés concernées doivent être appliquées :

p { font-size: 110%; font-family: Helvetica, sans-serif; }

Bien que ce code CSS ne décrive pas la totalité de la présentation d'un document, il constitue à lui seul une feuille de style à part entière. Il fixe pour les éléments p (paragraphe), la propriété de taille de fonte à la valeur 110 %, et la propriété de famille de fonte à la valeur Helvetica, ou, si Helvetica est indisponible, une police générique sans serifs.

p est un exemple de sélecteur simple. D'autres sélecteurs simples peuvent cibler plus spécifiquement un ou plusieurs éléments en recourant aux identifiants et aux classes attribués aux éléments structurels : les identificateurs (attribut id) sont utilisés pour caractériser un élément unique (un menu, un mot…), tandis que les classes (attribut class) sont utilisées pour caractériser un ensemble d'éléments (comme des menus organisés de manière similaire).

Des sélecteurs contextuels, formés par combinaisons de sélecteurs simples, permettent de viser des éléments selon leur position dans le document : a img ne désignera par exemple que les images présentes dans des liens.

Pour permettre la cascade des styles, des règles de calcul de spécificité permettent au moteur de rendu CSS de déterminer le degré de priorité à appliquer à différents sélecteurs visant concurremment un même élément, et de trier ainsi les règles à lui appliquer[34]. Ce calcul repose sur la somme des valeurs données aux différents sélecteurs simples formant le sélecteur contextuel :

  • chaque type de sélecteur simple a sa valeur de priorité : 0,0,0,1 pour un élément, 0,0,1,0 pour une classe, 0,1,0,0 pour un identifiant unique id ;
  • la mention !important ajoutée dans la règle donne une spécificité de 1,0,0,0 ;
  • l'origine du style est déterminante en dernier ressort : un attribut style présent dans le document HTML a la priorité sur les autres sources de styles auteur, afin de permettre les surcharges locales des styles communs à une série de pages web. D'autre part, à priorités égales, un style utilisateur l'emporte sur un style auteur, qui l'emporte sur le style par défaut de l'agent utilisateur.

Les feuilles de styles sont donc des documents textuels, dont la syntaxe se veut simple et intuitive, pour permettre leur lecture et leur écriture aussi bien directement par l'auteur qu'à l'aide d'un logiciel.

Limites de CSS

Indépendance de la présentation et de la structure

CSS ambitionnait initialement l'indépendance entre structure et présentation d'un document.

Ainsi, le site du CSS Zen Garden, créé en 2003 par Dave Shea, se veut la démonstration de la possibilité de modifier librement le rendu affiché d'une même page web, uniquement grâce à CSS et sans aucune modification de son code HTML[35] : il présente, en décembre 2006, 986 désigns différents de sa page d'accueil[36]. Cependant, la plupart de ces designs reposent en tout ou partie sur le remplacement du contenu textuel de la page par des images CSS qui le reproduisent en enrichissant son aspect[37] : la liberté graphique repose toujours partiellement sur la transformation du texte en image. D'autre part, le CSS Zen Garden reste un exercice de style limité à un document unique, à la structure doublée d'éléments et attributs sémantiquement neutres, qui ne servent qu'à donner appui à des sélecteurs CSS[n. 10].

S'il existe de nombreux exemples de documents HTML pour lesquels plusieurs feuilles de style ont été développées, il n'existe que peu d'exemples de feuilles de style génériques, indépendantes de la structure du document. Les styles par défaut des agents utilisateurs en sont un exemple, mais limité à des effets typographiques simples, sans définition de mise en page[n. 11]. En général, les feuilles de style dépendent étroitement de la structure du document à styler et sont difficilement réutilisables sur des documents différemment structurés. C'est davantage à travers la création de patrons HTML CSS que s'exploite cette indépendance potentielle des styles envers la structure spécifique des documents.

Plus généralement :

  • les difficultés et le manque d'implémentation d'une partie des propriétés CSS limitent la liberté de mise en page, et conduisent à l'utilisation de propriétés contraignantes quant à la structure HTML (par exemple, la propriété float impose un ordre précis du contenu ainsi mis en colonne ; de nombreux effets de rendu reposent d'autre part sur une surcharge de balisage sémantiquement neutre, tel que div et span).
  • la réutilisation d'une structure unique sur des média ou des matériels différents grâce à des feuilles de styles est limitée par les contraintes liées aux contenus eux-mêmes et à la capacité des agents utilisateurs à restituer ceux-ci, et par la nécessité d'une négociation de présentation entre client et serveur. Des procédés d'adaptation spécifiques du contenu, de la structure et du rendu côté agent utilisateur se sont avérés nécessaires, tels, que, par exemple, la technologie ERA (Extensible Rendering Architecture) développée par Opera. Internet Explorer suit une voie similaire avec sa version 7 qui remodèle le rendu imprimé d'une page web afin de l'optimiser.

Accessibilité

CSS favorise l'accessibilité d'une page web en donnant en dernier ressort à l'utilisateur le contrôle du rendu d'un document dans son navigateur : il est ainsi possible de l'adapter à des contraintes ou à des préférences concernant par exemple la taille d'affichage des caractères ou les couleurs. En séparant structure et présentation, CSS favorise également l'écriture de documents structurés de manière sémantique, potentiellement plus exploitables par les aides techniques : la liberté de présentation des éléments de titrage permet par exemple de respecter strictement l'ordre hiérarchique formel de ceux-ci, ce qui permet en retour aux aides techniques d'en établir une table des matières navigable. Enfin, en donnant aux auteurs les moyens d'enr ichir la mise en forme du texte, CSS permet de limiter le recours aux textes mis en images[n. 12].

Cependant, certaines utilisations de CSS peuvent également compromettre l'accessibilité du contenu :

  • en substituant à celui-ci des pseudo-contenus qui ne sont accessibles qu'aux utilisateurs qui peuvent percevoir le rendu CSS visuel : c'est le cas par exemple des informations qui seraient véhiculées par des images d'arrière-plan.
  • en bouleversant la cohérence nécessaire entre l'ordre linéaire de l'information dans le contenu structuré et l'ordre visuel du rendu CSS affiché. Les aides techniques telles que les lecteurs d'écran n'ont en effet accès qu'à cet ordre linéaire : une information qui ne prendrait son sens qu'en fonction de son positionnement CSS n'est pas compréhensible pour leurs utilisateurs.
  • dans une démarche d'accessibilité fondée sur la pertinence de la structure HTML, l'éventail des possibilités de mise en forme de contenu avec CSS peut faire perdre de vue la nécessité de baliser le contenu à l'aide d'éléments signifiants. Il est par exemple possible de délimiter visuellement une citation en la mettant en italique ou en l'encadrant de guillemets, mais l'information sur l'origine de ce texte ne sera perceptible, au sens des normes d'accessibilité, que via l'utilisation des éléments q ou blockquote, qui sont les seuls permettant de définir une citation HTML et d'en indiquer la source via l'attribut approprié (cite).

Les méthodes d'application des directives d'accessibilité des contenus web (RGAA, UWEM par exemple) définissent donc des règles d'usages des styles CSS[38].

Simplicité

CSS répond à une volonté de disposer d'un format de présentation simple, tant dans ses fonctionnalités que dans sa syntaxe, afin d'en favoriser la manipulation directe par les auteurs et les utilisateurs. Cependant, cette simplicité est remise en cause par plusieurs facteurs :

  • la difficulté à déterminer et à contrôler le résultat de la cascade lorsque les sources de styles se multiplient. Le rendu final d'un contenu précis dépend de la combinaison de plusieurs feuilles et peut alors devenir malaisé à faire évoluer. L'interdépendance des feuilles de styles peut rendre difficilement anticipable le résultat d'une modification apportée à l'une d'elle. Les auteurs sont alors placés devant un choix entre cette interdépendance qui optimise la quantité de code et la redondance de styles qui facilite sa maintenance[39].
  • La difficulté à écrire des styles utilisateurs sans disposer de compétences avancées. Les utilisateurs sont en théorie les premiers bénéficiaires des CSS, qui leur donnent la possibilité d'adapter la présentation des pages web. Cependant, le mécanisme des styles se prête difficilement au développement d'environnements graphiques qui faciliteraient la manipulation des propriétés CSS[40]. Dans la pratique, le recours aux styles utilisateur reste dès lors marginal.

Notes et références

Notes

  1. ↑ Un grand nombre de propositions de techniques de styles ont été faites durant les premières années du web. Seules les trois principales sont citées dans l'article, mais toutes ont, à un degré variable, influencé le langage CSS. Voir http://www.w3.org/Style/History/.
  2. ↑ plus généralement, « De nombreuses participants à la liste de discussion www-talk, le lieu de rencontre électronique de la première communauté web, étaient d'accord sur le fait que le web tirerait profit des feuilles de styles. Cependant, il y avait un désaccord sur le point de savoir s'il avait besoin d'un nouveau langage de feuille de style, ou si l'un des langages déjà existants, créés au départ pour la publication imprimée, suffirait à ses besoins ». Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http://people.opera.com/howcome/2006/phd/#h-34
  3. ↑ Prédécesseur d'Amaya, Arena est le premier navigateur développé par le W3C, à l'origine à des fins de tests de HTML 3.0. Håkon Lie collabora à son développement à partir de 1994 et ce navigateur anticipa de nombreux développement ultérieurs de CSS2. Abandonné par le W3C en tant que plate-forme de test en 1996, Arena fut ensuite temporairement maintenu par le Yggdrasil Computing jusqu'en 1998. Voir http://www.w3.org/Arena/
  4. ↑ « Au bout du compte, la possibilité d'être lu et écrit par l'humain avait une valeur ajoutée plus élevée que la possibilité de réutiliser des analyseurs syntaxiques existants », Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http://people.opera.com/howcome/2006/phd/#ch-problems
  5. ↑ Le moteur de rendu Trident mêle en fait deux technologies de rendu graphique : CSS y est concurrencé par le mécanisme connu sous le nom de « haslayout », mis en évidence par reverse engineering en 2005 par un groupe de développeurs indépendants étudiants les bugs de rendu CSS d'Internet Explorer Voir On having layout par Ingo Chao, et "HasLayout" Overview (Markus Mielke, Microsoft)
  6. ↑ « Netscape retarde considérablement le développement des feuilles de styles sur le web en diffusant en 1996 ses extensions propriétaires d’HTML ; elles offrent la gestion de la couleur, de la fonte ou même du clignotement (…) Netscape prône la simplicité : les rédacteurs de documents HTML maîtrisent ce format car il est simple ; il suffit donc d’intégrer aux documents de nouveaux éléments HTML simples gérant la présentation. », Daniel Glazman, CSS2, des feuilles de styles pour le Web, décembre 1998, Éditions Eyrolles.
  7. ↑ « Since its inception Netscape had been sceptical towards style sheets, and the company's first implementation turned out to be a half-hearted attempt to stop Microsoft from claiming to be more standards-compliant than themselves. The Netscape implementation supports a broad range of features - for example, floating elements - but the Netscape developers did not have time to fully test all the features which are supposedly supported. The result is that many CSS properties cannot be used in Navigator 4 ». Bert Bos et Håkon Lie, Cascading Style Sheets, http://www.w3.org/Style/LieBos2e/history/
  8. ↑ « Une difficile prise de conscience est en effet possible, car le paysage des navigateurs a commencé à changer : même si Microsoft semble exercer un quasi-monopole de fait avec Internet Explorer, un renouveau est en cours. En effet, des navigateurs alternatifs voient le jour (…) Timidement amorcée avec Mozilla 0.6, Opera 4 et même Internet Explorer 5, l'adoption progressive par les navigateurs des standards HTML4, XHTML1, CSS, ECMASCRIPT (…) s'est avéré une nécessité après les excès de la période précédente », Tristan Nitot et Laurent Denis, préface de Zeldman 2006.
  9. ↑ « CSS2 offers a mechanism for describing and selecting fonts from the web. However, the feature is not much used. Two major reasons for this might be: First, there is no universal font format which all vendors support; and second, font designer want to be compensated for their work and no suitable payment mechanism is available», Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http://people.opera.com/howcome/2006/phd/#ch-problems
  10. ↑ « Depuis le lancement de CSS Zen Garden sont apparues des techniques de remplacement d'images sans recours à un span. De ce fait, la plupart des éléments span sont devenus inutiles. Et les classes supplémentaires n'étant pas exploitées dans 98 % des maquettes soumises, elles sont elles aussi redondantes. La liste d'éléments div et span vides à la fin du document est également superflue, sauf pour les possibilités d'ouverture offertes au designer. », Shea et Holzschlag 2005.
  11. ↑ CSS1 propose un exemple de styles destiné notamment aux navigateurs : Sample style sheet for HTML 2.0. CSS2 définit une feuille de style type mais indicative pour cet usage : Default style sheet for HTML 4. Avec XHTML2.0, ces styles types sont susceptibles de devenir normatifs : Style sheet for XHTML 2.
  12. ↑ « However, pictures were also a threat to the web. Designers started to encode text in images in order to achieve certain fonts or other special effects. In order for HTML to remain a logical markup language (as opposed to a presentational language) a style sheet language was needed. So, the motivation for developing style sheets was twofold: we wanted to give authors the presentational effects they craved, while stopping HTML from sliding down the ladder of abstraction to become a presentational language », Interview with Håkon Wium Lie, 31 mars 2005, http://www.webstandards.org/2005/03/31/interview-with-hkon-wium-lie/

Références

  1. ↑ « feuilles de style en cascade », sur Grand dictionnaire terminologique, Office québécois de la langue française
  2. ↑ Tim Berners-Lee, The WorldWideWeb browser
  3. ↑ Cascading Style Sheets, designing for the Web, Håkon Wium Lie et Bert Bos, ISBN 978-0-201-59625-0
  4. ↑ EMail Msg <9310222103.AA03264@sting.Berkeley.EDU>
  5. ↑ EMail Msg <199306101923.AA29318@ora.com>
  6. ↑ Cascading HTML Style Sheets -- A Proposal
  7. ↑ Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http://people.opera.com/howcome/2006/phd/#h-28
  8. ↑ JavaScript-Based Style Sheets
  9. ↑ Créé par Bert Bos en août 1994, Argo faisait partie d'un projet web de l'Université de Groningue. Voir http://www.w3.org/People/all#bert
  10. ↑ les archives de cette liste dédiée au développement des CSS sont accessibles sur http://lists.w3.org/Archives/Public/www-style/
  11. ↑ Report on the W3C style sheet workshop, Paris '95
  12. ↑ « You can Just Ship software with bugs in it to put out a new stable release because it's versioned. The next version replaces the old. You can always fix the leftover bugs in the next version. CSS doesn't have versions. Any problems there are in the way CSS2.1 defines things can't be fixed in CSS3 except maybe by adding really confusing sets of switches. CSS3 cannot change anything in CSS2.1, it can only build on top of it., What is the CSS Working Group Doing?, Cascading Style Sheets Working Group Blog », 2 juillet 2007
  13. ↑ Cascading Style Sheets, level 1, abstract, http://www.w3.org/TR/REC-CSS1
  14. ↑ « Floats were intended to be used to take small pieces of content out of the flow and let the rest of the text wrap around them. They were not intended to be used for the main content of a page, nor were they designed for it. Nevertheless, use of floats for the main content of a page is quite common today ». David Baron, membre du groupe de travail CSS du W3C, Overuse of floats considered harmful.
  15. ↑ « Program Manager » puis « Platform Architect of the Internet Explorer Platform team », Chris Wilson est à partir de 1996 un des acteurs majeurs du développement CSS. Voir http://blogs.msdn.com/cwilso/
  16. ↑ cf. CSS1 Test Suite, Version History, http://www.w3.org/Style/CSS/Test/CSS1/current/vhistory
  17. ↑ Henri Sivonen, Activating the Right Layout Mode Using the Doctype Declaration
  18. ↑ Positioning HTML Elements with Cascading Style Sheets, W3C Working Draft, 1997
  19. ↑ Daniel Glazman, « Les standards HTML et CSS des origines à mercredi dernier », http://disruptive-innovations.com/zoo/slides/20060922/
  20. ↑ Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http://people.opera.com/howcome/2006/phd/#h-339
  21. ↑ About the CSS 2.1 Specification, CSS 2.1 vs CSS 2, http://www.w3.org/TR/CSS21/about.html#css2.1-v-css2
  22. ↑ Float, clear et contextes de formatage, Blog & Blues, juin 2006
  23. ↑ « There is no doubt that we will still find (small) bugs in the specification, but given the type of errors we fixed recently, we have reason to believe that the spec is good enough for implementers and users alike. We want people to start implementing and using CSS 2.1 for real (and tell us about any remaining problems, of course) », Bert Bos, éditeur de CSS 2.1, http://www.w3.org/blog/CSS/2007/07/20/cssan2_1_is_a_candidate_recommendation
  24. ↑ Évaluations d'implémentation réalisées par David Hammond, web browser standards support
  25. ↑ « In such cases, a user agent may implement a subset of CSS. Subsets of CSS are limited to combining selected CSS modules, and once a module has been chosen, all of its features must be supported. », Introduction to CSS3, http://www.w3.org/TR/css3-roadmap/#whymods
  26. ↑ Cascading Style Sheets Current Work, http://www.w3.org/Style/CSS/current-work
  27. ↑ « An open group can iterate much faster than a closed group. With an open group we can get test implementations, feedback, tests, and discussion straight away, instead of waiting months and then pulling back the curtain and presenting a fait accompli, at which points comments are perceived more as a pain than a help. », Ian Hickson, http://ln.hixie.ch/?start=1181118077&count=1
  28. ↑ Daniel Glazman, Calling for a new CSS revolution
  29. ↑ CSS Backgrounds and Borders Module Level 4 (Editor's Draft 1 April 2010)
  30. ↑ Selectors Level 4
  31. ↑ (en) Recognized media types, Cascading Style Sheets Level 2 Revision 1 Specification
  32. ↑ Media Queries
  33. ↑ PhD Thesis: Cascading Style Sheets
  34. ↑ Cascade CSS et priorité des sélecteurs, Openweb, avril 2005
  35. ↑ CSS Zen Garden
  36. ↑ CSS Zen Garden Comprehensive Design List
  37. ↑ Shea et Holzschlag 2005, p. 14
  38. ↑ Par exemple, le test RGAA Accessibilité des informations affichées comme fonds d'éléments via les styles CSS.
  39. ↑ Dave Shea, (en) Redundancy vs. Dependency
  40. ↑ (en)Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http://people.opera.com/howcome/2006/phd/#h-337

Voir aussi

Bibliographie

Sur les autres projets Wikimedia :

· Feuilles de style en cascade, sur Wikiversity

· Feuilles de style en cascade, sur Wikibooks

  • Jeffrey Zeldman, Design web : utiliser les standards, Eyrolles,‎ novembre 2006 (ISBN 978-2-212-12026-4)
  • Dave Shea et Molly Holzschlag, Le Zen des CSS, Eyrolles,‎ 17 novembre 2005 (ISBN 978-2-212-11699-1)
  • Andy Budd, Cameron Mall et Simon Collison, Maîtrise des CSS, Pearson, coll. « Le Campus »,‎ 2010, 2e éd. (ISBN 978-2-7440-2400-9)
  • (en) Håkon Wium Lie, Cascading Style Sheets, Université d'Oslo,‎ 2005, thèse de doctorat (lire en ligne)
  • (en) Håkon Wium Lie et Bert Bos, Cascading Style Sheets : designing for the Web (ISBN 978-0-201-59625-0)
  • Raphaël Goetter, Mémento CSS3, Eyrolles (ISBN 978-2-212-13281-6)
  • (en) On the Analysis of Cascading Style Sheets, Pierre Geneves, Nabil Layaida, and Vincent Quint, Proceedings of the 21st International Conference on World Wide Web (WWW'12), p. 809-818, 2012.

Articles connexes

  • Feuille de style
  • Conception de site Web

Liens externes

  • (en) W3Schools' CSS reference, références, usage, tests et support par les navigateurs.

Recommandations du W3C

(en) Cascading Style Sheets, level 1, recommandation du W3C, 17 décembre 1996, revu le 11 janvier 1999

    • Les feuilles de style en cascade, niveau 1, traduction non officielle
  • (en) Cascading Style Sheets, level 2, CSS2 Specification, recommandation du W3C, 12 mai 1998
    • Les feuilles de style en cascade, niveau 2, Spécification CSS2, traduction non officielle
  • (en) Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, recommandation du W3C, 7 juin 2011


Tutoriel WEB

Règles d'application des styles CSS et gestion des conflits

Comprendre les notions de cascade, d'héritage et de spécificité

  • I. La cascade
    • I-A. En cas de conflit
  • II. L'héritage
    • II-A. En cas de conflit
  • III. La spécificité
    • III-A. Calcul du poids d'un sélecteur
    • III-B. En cas de conflit
    • III-C. Exemple
  • IV. Conclusion et remerciements
    • IV-A. Conclusion
    • IV-B. Remerciements

Lequel d'entre nous ne s'est jamais torturé l'esprit pendant des heures en se demandant pourquoi telle règle CSS ne s'appliquait pas aux éléments ciblés par un sélecteur ? Ou pire, pourquoi cette règle s'appliquait à certains éléments et pas à d'autres ?
Je pense que c'est arrivé à tout le monde, surtout en période d'apprentissage.

Cet article va vous expliquer les trois principes permettant d'appliquer des styles à un élément : la cascade, l'héritage et la spécificité.

I. La cascade

La cascade correspond à la possibilité pour une balise de définir des styles dans plusieurs règles distinctes.

Au fur et à mesure que vous allez rajouter du contenu et des fonctionnalités à votre site, le besoin de mise en forme va augmenter.
Vous allez donc devoir créer des styles spécifiques pour différents éléments, mais parmi ces éléments, certains devront aussi se voir appliquer des styles liés à d'autres besoins.
Grâce à la cascade, un même élément peut recevoir des styles à partir de plusieurs règles différentes.

Par exemple, vous souhaitez que toutes les balises ayant la classe surround possèdent une bordure fine et arrondie. Vous créez donc la règle CSS :

Sélectionnez
.surround{
    border: 1px solid gray;
    border-radius: 25px;
    margin: 10px 40px;
    padding: 10px;
}

Vous intégrez ensuite sur votre site une notion de type de contenu et souhaitez ajouter une couleur de fond en fonction de ce type. Vous créez donc deux nouvelles classes :

Sélectionnez
.info{
    background-color: #DDEEFF;
}
.idee{
    background-color: #FFFFDD;
}

Vous pouvez donc donner à vos éléments plusieurs de ces classes, les règles CSS de chacune de ces classes seront appliquées aux éléments ciblés :

Voici un message d'information. Il contient les styles de .surround et .info.

Voici un message d'idée. Il contient les styles de .surround et .idee.

Code de l'exemple
Sélectionnez
<p class="surround info">Voici un message d'information. Il contient les styles de <code>.surround</code> et <code>.info</code>.</p>
<p class="surround idee">Voici un message d'idée. Il contient les styles de <code>.surround</code> et <code>.idee</code>.</p>

I-A. En cas de conflit

Il existe un risque de conflit entre plusieurs règles CSS, par exemple, si vous donnez à un élément à la fois la classe info et idee, alors la même règle sera définie deux fois avec deux valeurs différentes.
Dans ce cas, c'est la dernière règle définie dans le code CSS qui sera appliquée :

Voici un message créant un conflit. Il contient les styles de .surround, .idee et .info.

Code de l'exemple
Sélectionnez
<p class="surround idee info">Voici un message créant un conflit. Il contient les styles de <code>.surround</code>, <code>.idee</code> et <code>.info</code>.</p>

Attention : on parle bien de la dernière règle définie dans les feuilles de style et non de la règle correspondant à la dernière classe précisée dans le code HTML.
Dans l'exemple précédent, la classe idee est précisée avant dans le code HTML de l'attribut class, mais c'est son style qui est appliqué, car il apparaît en dernier dans la balise <style>.

Notes.

Le moteur de rendu parse les feuilles de style de façon séquentielle, c'est-à-dire dans l'ordre où elles sont écrites dans le code.

Les styles dits inline, c'est-à-dire définis dans l'attribut HTML style, sont toujours prioritaires sur ceux définis dans les feuilles de style.

En revanche, il n'y a pas de notion de priorité entre les styles internes (balises <style>) et les styles externes (balises <link />). On peut assimiler les feuilles de style externes comme des balises <style> qui seraient présentes à cet emplacement et dont le contenu serait celui appelé par la balise <link />.

II. L'héritage

L'héritage correspond à la possibilité pour une balise de se voir appliquer les styles d'une balise ancêtre.

Rappel.

Les différentes normes HTML ont en commun la façon de dériver du XML, avec comme conséquence que deux balises ne peuvent pas se chevaucher : une balise ouverte à l'intérieur d'une autre doit être fermée avant la fermeture de la balise dans laquelle elle se trouve. Concrètement, cela signifie que vous pouvez faire :

Sélectionnez
<balise1>
    <balise2>
    </balise2>
</balise1>

mais pas :

Sélectionnez
<balise1>
    <balise2>
</balise1>
    </balise2>

De cette règle stricte découle une représentation arborescente de la structure du document (appelée DOMDocument Object Model) qui sera utilisée par CSS.

Dans cette structure, on distingue, par rapport à un élément référent :

  • ses ancêtres ;
  • son parent ;
  • ses frères ;
  • ses enfants ;
  • ses descendants.

Notez qu'une balise ne peut avoir qu'une seule balise parent, mais elle peut avoir zéro, une ou plusieurs balises des autres types.

Attention : en CSS, la notion de frère (et les sélecteurs d'éléments frères associés + et ~) correspond en fait aux frères suivants (following siblings), c'est-à-dire les balises se trouvant au même niveau de l'arborescence (même balise parent) mais après elle dans le code HTML.

Ainsi, à quelques exceptions près (lister ces exceptions sort du cadre de cet article), les styles appliqués à une balise seront aussi appliqués à toutes ses balises descendantes à moins qu'une règle spécifique annule cet héritage.

Par exemple, vous souhaitez introduire dans votre page la notion de message d'erreur. Ces messages devront être écrits en rouge et en gras avec un fond rouge pâle.
Vous pouvez donc déclarer des règles spécifiques pour ce type de message :

Sélectionnez
.erreur{
    background-color: #FFBCC5;
    color: red;
    font-weight: bold;
}

Tous les éléments descendants de la balise sur laquelle cette classe est définie hériteront de ce style :

Ceci est un message d'erreur (ne pas en abuser). Il contient des balises enfants qui héritent de la classe .erreur.

Code de l'exemple
Sélectionnez
<p class="surround erreur">Ceci est <i>un message</i> d'<del>erreur</del> (<small>ne pas en abuser</small>). Il contient des balises enfants qui héritent de la classe <code>.erreur</code>.</p>

Imaginons enfin que dans ce message, vous souhaitiez que la balise <code> soit écrite en noir normal avec un fond gris. Vous pouvez annuler l'héritage en définissant une classe pour cet élément :

Sélectionnez
.format-code{
    background-color: #F1F2F1;
    color: black;
    font-weight: normal;
}

Ceci est un message d'erreur (ne pas en abuser). Il contient des balises enfants qui héritent de la classe .erreur.

Code de l'exemple
Sélectionnez
<p class="surround erreur">Ceci est <i>un message</i> d'<del>erreur</del> (<small>ne pas en abuser</small>). Il contient des balises enfants qui héritent de la classe <code class="format-code">.erreur</code>.</p>
Note.

Dans l'exemple précédent (ainsi que dans les autres), il aurait été possible d'affecter les styles directement aux balises <code>, mais dans le cadre de cet article, nous sommes obligés d'utiliser une classe pour éviter d'impacter les autres éléments qui n'ont pas de rapport avec les exemples.

Il n'est pas possible d'indiquer en CSS que l'on veut empêcher l'héritage. La seule façon de le faire est donc de redéfinir les styles qui ne doivent plus être hérités.
Même si cela peut sembler contraignant au premier abord, c'est néanmoins tout à fait logique : la mise en forme d'une page se doit de respecter une cohérence (notamment visuelle) que l'héritage rend simple à mettre en place.

II-A. En cas de conflit

On peut considérer qu'il y a conflit lorsque plusieurs éléments ancêtres définissent des valeurs différentes pour une même règle.
Dans ce cas, ce sont les styles de l'élément le plus proche dans l'arborescence qui sont appliqués :

Voici un message créant un conflit. Il hérite à la fois de la classe .erreur et de la classe .info.
Code de l'exemple
Sélectionnez
<div class="surround erreur">
    <div class="info">
        <div>Voici un message créant un conflit. Il hérite à la fois de la classe <code class="format-code">.erreur</code> et de la classe <code class="format-code">.info</code>.</div>
    </div>
</div>

Dans l'exemple ci-dessus, l'ancêtre .erreur va faire hériter tous ses descendants de ses styles.
Puis les styles du parent .info vont être appliqués.
On remarque donc que les styles du message héritent du parent (couleur de fond), mais que ceux qui n'ont pas été redéfinis (couleur et graisse du texte) restent appliqués.

Note.

On remarque dans l'exemple précédent que les propriétés liées aux bordures ne sont pas concernées par l'héritage. Ce qui est souhaitable, car si tous les éléments descendants héritaient d'une bordure fine arrondie, le texte deviendrait vite illisible !

III. La spécificité

La spécificité va permettre de déterminer le poids d'un sélecteur pour affecter les styles qui entrent en conflit.

C'est vrai qu'il a été dit qu'en cas de conflit, c'est la dernière règle définie dans le code CSS qui est appliquée.

En réalité, ceci n'est appliqué que dans certains cas ultimes. Lorsqu'un même élément se voit attribuer plusieurs styles contradictoires, CSS va calculer le poids de chacun des sélecteurs ciblant cet élément.
C'est ensuite le style défini par le sélecteur ayant le poids le plus élevé (le plus spécifique) qui sera appliqué.

Note.

On entend ici par sélecteur l'ensemble des termes permettant de cibler un ou plusieurs éléments. Concrètement, il s'agit de tout ce qui précède l'accolade ouvrante.

Cependant, on parle aussi de sélecteur pour chacun des termes définissant un sélecteur composé.

III-A. Calcul du poids d'un sélecteur

Le poids d'un sélecteur est calculé en fonction de la nature et du nombre de chacun de ses termes. Il va permettre de déterminer trois nombres a, b et c :

  • a est le nombre d'identifiants présents dans le sélecteur ;
  • b est le nombre de classes, d'attributs ou de pseudoclasses ;
  • c est le nombre d'éléments ou de pseudoéléments.

Comme il est rare de trouver plus de dix éléments dans un sélecteur, on peut ensuite se contenter de concaténer ces chiffres pour trouver le poids du sélecteur. Mais retenez tout de même que dix éléments de type classe ne valent pas un élément de type identifiant, ainsi un identifiant, 10 classes ou équivalents et 15 éléments donnent un poids de 1-10-15.

Une fois le poids de chaque sélecteur calculé, les styles appliqués seront ceux de celui ayant le poids le plus élevé.

Notes.

Le sélecteur universel (*) n'est pas pris en compte dans le calcul.

Les sélecteurs d'adjacence (~ et +) et de descendance (>) n'ont pas d'impact sur la spécificité.

La pseudoclasse de négation (:not()) n'est pas prise en compte pour le calcul, mais les éléments à l'intérieur de cette pseudoclasse le sont.

Attention : cette règle de la spécificité ne s'applique que pour les styles entrant en conflit.
Si un sélecteur a et un sélecteur b définissent différents styles pour une même balise, mais qu'un seul de ces styles est présent dans a et dans b, alors tous les autres styles seront appliqués et c'est le poids le plus élevé entre a et b qui déterminera la valeur du style commun.

Exemples.

Sélecteur | Poids | Explications
* | 0 | le sélecteur universel n'est pas compté
div | 0-0-1 | un élément
div span | 0-0-2 | deux éléments
div > ul::before | 0-0-3 | deux éléments et un pseudoélément
.classe | 0-1-0 | une classe
a[target=_blank] | 0-1-1 | un élément et un attribut
div .champ[disabled] | 0-2-1 | une classe, un attribut et un élément
#identifiant | 1-0-0 | un identifiant
#main .inner:empty | 1-2-0 | un identifiant, une classe et une pseudoclasse
#main :not(div) | 1-0-1 | la pseudoclasse :not() n'est pas comptée, mais son contenu l'est
#main .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10 | 1-10-0 | dix classes n'équivalent pas un identifiant
Note.

La spécificité des règles déclarées dans l'attribut HTML style sera toujours supérieure à celle des règles déclarées dans les feuilles de style.

Attention, le poids du sélecteur n'intervient jamais pour déterminer quelle règle sera héritée d'un ancêtre.
Concernant l'héritage, c'est toujours la règle définie par l'ancêtre le plus proche dans l'arborescence qui est appliquée.

III-B. En cas de conflit

Si deux sélecteurs ont un poids identique et définissent des valeurs différentes pour une règle, c'est alors la dernière règle définie dans le code qui est appliquée.

III-C. Exemple

Dans l'exemple suivant, nous utilisons un élément de classe .surround.
Nous créons différents sélecteurs correspondant à divers exemples qui vont permettre de permuter différentes combinaisons d'identifiants et de classes avec certains styles en conflit, d'autres non (il n'est pas possible de tester avec des sélecteurs de balise sous peine d'impacter l'ensemble de l'article).
Alternez les différentes combinaisons pour voir les répercussions sur l'affichage.

Voici les différents sélecteurs utilisés :

Sélectionnez
#identifiant{                                         /* Poids : 1-0-0 */
    background-color: #3A5486;
    box-shadow: 0 0 2px 5px #5096C8;
}
/* Doubler le sélecteur permet de renforcer son poids */
#identifiant2#identifiant2{                          /* Poids : 2-0-0 */
    background-color: #5096C8;
    box-shadow: 0 0 2px 5px #3A5486;
}
.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11.c12.c13.c14.c15{    /* Poids : 0-14-0 */
    background-color: #FFFFDD;
}
/* #identifiant2.c1 ne sera jamais appliqué à cause de #identifiant2#identifiant2 */
#identifiant.c1, #identifiant2.c1{                   /* Poids : 1-1-0 */
    background-color: #DDEEFF;
    box-shadow: 0 0 2px 5px #5096C8 inset;
}
.c2{                                                 /* Poids : 0-1-0 */
    background-color: #FFEEBB;
}
.c3{                                                 /* Poids : 0-1-0 */
    background-color: #F1F2F1;
}
Appliquer au paragraphe :

Message de test. Essayez les différentes combinaisons possibles pour voir l'effet des règles de spécificité.

IV-A. Conclusion

Savoir comment sont appliqués les styles notamment en cas de conflit est très important et permet de mieux organiser ses feuilles de style.
En général, il est recommandé de définir les styles des plus généraux aux plus particuliers sans utiliser de sélecteurs trop complexes.

N'oubliez pas non plus que les outils de développement intégrés à tous les navigateurs récents seront vos meilleurs amis pour déterminer quels styles sont appliqués à un élément ainsi que ceux qui ont été écrasés.


Tutoriel WEB

Ce qu'il faut et ne pas faire en CSS - Partie 1 : La sélection CSS

  • I. Introduction
  • II. Classes & Id
  • III. Les classes multiples
  • IV. Les sélecteurs de types
  • V. Les sélecteurs descendants
  • VI. Les combinaisons
  • VII. Support multi-navigateur et multi-plateforme
  • VIII. Résumé
  • IX. Remerciements

CSS Globe démarre une série de petits articles appelés "Ce qu'il faut et ne pas faire en CSS". Ces séries ont pour but de pointer les mauvaises habitudes lorsqu'on utilise le CSS et en général les standards du Web. On tentera de répondre aux questions les plus fréquentes relatives au CSS. Cette première partie portera sur la sélection CSS.

I. Introduction

La sélection d'un élément est le processus de base pour appliquer un style en CSS. Si vous ne ciblez pas un certain élément vous ne pourrez pas le styliser, n'est-ce pas ? Cet article peut vous aider à corriger des erreurs que vous auriez pu commettre mais aussi à répondre aux questions relatives aux meilleures pratiques pour l'utilisation des sélecteurs en CSS.

Comme vous le savez, il y a plusieurs types de sélecteurs CSS. Nous nous focaliserons sur leur utilisation pratique.

II. Classes & Id

Sélectionnez
<p class="signature">...</p>
<ul id="nav">...</ul>

N'utilisez pas des noms de classes trop détaillés comme "red", "blueDot" ou "roundedTop". Je n'utiliserai même pas de noms comme "left", "right" ou "large". Pourquoi ? Eh bien, imaginez que vous ayez conçu 2 colonnes sur votre site, une colonne nommée "left" (gauche) et l'autre nommée "right" (droite) et qu'à un moment vous deviez intervertir la position des colonnes. Votre client pourrait ne pas aimer votre thème bleu et vouloir le changer, eh bien vous êtes coincé avec un bouton de classe "blueSmall" (class="blueSmall")...

Le nom des classes devraient donc décrire le sens et le but du contenu mais pas son apparence. Ainsi au lieu d'utiliser un div avec id="left" aouter un div avec class="main" voire même class="primary". Essayez le même nom de classe sur différents éléments, dans diverses situations. Les noms n'ont pas besoin d'être liés à un seul type d'élément. Vous pouvez utiliser class="first" sur le premier élément du menu ainsi que le premier paragraphe de votre contenu. Lorsqu'il faut choisir entre un nom de classe ou un id, déterminez si l'élément à styliser est vraiment unique. Dans ce cas, utilisez : id. S'il n'est pas unique utilisez les classes.

Cela vous évite d'utiliser plein d'id uniquement pour vos styles.

III. Les classes multiples

Sélectionnez
<button class="image submit">

Les noms de classes multiples sur un seul élément peuvent être une bonne façon d'optimiser votre CSS et d'éviter des noms de classes complexes pour le balisage.

J'utilise fréquemment une définition de classe, class="image", qui possède un style général pour la technique de remplacement d'images. Puis j'ajoute des caractéristiques aux autres classes où je décris l'image à utiliser, je définis la largeur etc.

IV. Les sélecteurs de types

Sélectionnez
a {color:#ff0;}

J'utilise toujours les sélecteurs de types au début de mes CSS, pour définir ou réinitialiser le style par défaut de certains éléments. Personnellement je ne crois pas à la puissance du sélecteur universel (à moins d'être utilisé en bas de hiérarchie). Si vous prévoyez d'utiliser des resets, utilisez ceux appropriés, c'est-à-dire le reset d'Eric Meyer.

V. Les sélecteurs descendants

Utilisez-les ! Quand vous les maîtriserez vous trouverez que votre travail est beaucoup plus aisé contrairement à l'utilisation d'une centaine de noms de classes dans chaque partie de votre document. J'utilise fréquemment quelque chose comme #main p a pour rajouter un lien souligné que j'avais enlevé dans la réinitialisation.

VI. Les combinaisons

Sélectionnez
#main h2.title span

Ce type de sélecteur vous permet de cibler avec précision un élément.

Le principe que j'utilise est le suivant : J'essaye de déterminer le conteneur le plus petit dans la hiérarchie qui possède des éléments non répétitifs. J'ajoute un nom de classe à ce conteneur et j'y indique les éléments cibles avec des sélecteurs de même type que ceux décrits plus haut. Si vous avez une balise h2 que vous utilisez pour les titres, et que celle-ci possède seulement un span, il n'y a aucune utilité à ajouter un nom de classe à ce span. Vous pouvez la cibler avec un sélecteur de combinaison, comme vu précédemment.

VII. Support multi-navigateur et multi-plateforme

Certains sélecteurs ne sont pas pris en charge par certains navigateurs, vous ne devez donc pas compter sur eux. C'est-à-dire, que vous ne pouvez compter que sur le pseudo-élément ":first-child " pour avoir les coins du haut arrondis, sachant qu'ils ne sont pas supportés par IE6. En vérité de nombreux utilisateurs utilisent toujours IE6 et il faut vivre avec ça.

VIII. Résumé

À faire

  • Lorsque vous choisissez d'utiliser des noms de classes, utilisez des noms qui décrivent le sens et le but du contenu, et pas son apparence.
  • Utilisez quelques noms de classes et utilisez-les sur divers éléments.
  • Utilisez des sélecteurs de type pour (ré)initialiser le style par défaut. Si vous le souhaitez, utilisez des techniques de réinitialisation appropriées (mentionnées ci-dessus).
  • Utilisez des noms de classes multiples sur un seul élément pour optimiser votre CSS.
  • Utilisez des combinaisons de sélecteurs et ciblez précisément votre élément.

À ne pas faire

  • Utiliser pas des noms de classes comme "red", "blueDot" etc.
  • Utiliser pas des noms de classes compliqués ou des id comme "sideIntroSecondaryContentTop". Utilisez plutôt des sélecteurs descendants.
  • Utiliser pas de sélecteur universel pour la réinitialisation du document.
  • Utiliser pas des sélecteurs qui sont dépendant des navigateurs.
  • Utiliser pas des noms de classes qui ne sont pas indispensables.


Tutoriel WEB

CSS : Notions de base.

  • Introduction
  • I. Bloc, en-ligne : les types d'éléments.
  • II. Le flux, kezako ?
  • III. Positionnement d'un élement
    • III-A. Propriété CSS "position"
    • III-B. Propriété CSS "float"
  • IV. Propriété des éléments : display
  • V. Et l'héritage, qu'est-ce que c'est ?
  • VI. Petit complément rapide : le z-index.
  • VII. Remerciements et liens annexes

Il est très important d'intégrer les bases en CSS, afin d'éviter les écueils par la suite. A la fin de cet article, vous saurez quels sont les types d'éléments, leurs différences, ce qu'est le flux, comment le modifier, et ce qu'est l'héritage en CSS.

Introduction

Dans tous les exemples donnés ici, nous utiliserons deux fichiers : 'index.html', qui va contenir le code HTML, et 'style.css', qui va contenir toutes les définitions de style.
Le fichier 'style.css' est inclu comme suit dans notre fichier HTML (entre les balises <head> et </head> :

Sélectionnez

<link rel="stylesheet" type="text/css" href="styles.css">

I. Bloc, en-ligne : les types d'éléments.

En CSS, il existe deux grandes familles d'éléments : les éléments de type "bloc", et les éléments de style "en-ligne".

Grosso modo, les éléments de type "bloc" (DIV, UL, FORM, BLOCKQUOTE, PRE, ...), servent à la mise en page générale de la page en créant de grands rectangles 'conteneurs'. Ils peuvent contenir soit d'autres éléments de type "bloc", soit des éléments de type "en-ligne". Les éléments de type "en-ligne" (A, B, FONT, IMG, INPUT, U, SPAN, ...) sont juste des conteneurs plus petits que bloc, avec un comportement spécifique. IMG et INPUT sont des éléments vides d'après la DTD.

D'une manière générale, évitez d'utiliser les balises HTML pour la mise en forme du contenu, dans l'idée de séparer au maximum le fond le la forme (le tag U en HTML peut être avantageusement remplacé par text-decoration:underline; en CSS).
De plus, ces balises ont des marges externes (margin) et internes (padding) définies par défaut à 0 et non re-définissables.

Par défaut, les éléments de type "bloc" vont prendre toute la largeur de la page.

II. Le flux, kezako ?

Le flux, c'est l'ordre d'affichage des éléments.
Ainsi, le navigateur parcours votre page HTML, récupère les différents éléments, et les affiche dans un certain ordre.
Les éléments sont affichés selon leur ordre d'apparition dans le code source.

Les éléments de type "bloc" vont s'afficher les uns en dessous des autres, alors que des éléments de type "en-ligne" vont s'afficher les uns à la suite des autres.

Exemple :

CSS commun aux deux type d'affichage
Sélectionnez

#element1 {
    background-color:#00CCFF; /* bleu ciel */
    }
#element2 {
    background-color:#FF6666; /* rouge */
    }
#element3 {
    background-color:#6699FF; /* mauve */
    }
Affichage de type 'bloc' : HTML
Sélectionnez

<div id="element1">riri</div>
<div id="element2">fifi</div>
<div id="element3">loulou</div>
Affichage de type bloc
Affichage de type bloc
Image personnelle Télécharger les codes-source de l'exemple
Affichage de type 'en-ligne' : HTML
Sélectionnez

<span id="element1">pim</span>
<span id="element2">pam</span>
<span id="element3">poum</span>
Affichage de type en-ligne
Affichage de type en-ligne
Image personnelle Télécharger les codes-source de l'exemple

Voilà pour le flux tel qu'il est normalement interprété. Mais il est possible à l'aide des propriétés CSS de le modifier.
Voyons donc comment...

III. Positionnement d'un élement

III-A. Propriété CSS "position"

La propriété CSS position permet de modifier le comportement d'affichage des blocs :)

Evacuons de suite position:static, qui se contente de dire que l'élément doit se comporter normalement. Il suivra donc le flux sans se poser plus de questions.

position:inherit (CSS2) déclare que l'élément en question hérite de la propriété position de son parent. Si la position du parent est de type absolue, l'élément concerné le sera aussi...

position:fixed pourrait être une propriété interessante. L'idée est de placer un élément sur la page, et qu'il y reste quel que soit le défilement. Je vous laisse imaginer l'utilité pour un menu par exemple...
Seul problème, certains navigateurs non conformes aux standards CSS2 ne prennent pas en compte cette propriété, il vous va donc falloir tricher (je vous renvoie donc à la FAQ CSS).

position:relative ne retire pas l'élément du flux, mais le déplace simplement par rapport à sa position dans le flux.
Petit exemple pour mieux comprendre :

Positionnement relatif : CSS
Sélectionnez

.normal {
    background-color:#0099FF; /* bleu ciel */
    }
.posrelative {
    position:relative;
    background-color:#FF9933; /* orange */
    bottom:5px;
    left:10px;
    }
Positionnement relatif : HTML
Sélectionnez

<div class="normal">Bonjour les <span class="posrelative">petits</span> enfants.</div>
<div class="normal">comment</div>
<div class="posrelative">&ccedil;a</div>
<div class="normal">va ?</div>
Exemple de positionnement relatif
Exemple de positionnement relatif
Image personnelle Télécharger les codes-source de l'exemple

Vous vous rendez compte ici que le troisième div (le orange) est décalé de 10 pixels vers la droite et de 5 vers le haut par rapport à la position qu'il devrait occuper normalement. Idem pour le span orange, décalé de la même chose par rapport à sa position théorique.

position:absolute retire complètement l'élément concerné du flux, et le place aux coordonées définies par les propriétés bottom, left, right ou top.

Dans l'exemple, nous allons dimensionner notre DIV pour mieux se rendre compte de l'effet produit :

Positionnement absolu : CSS
Sélectionnez

#element1 {
    position:absolute;
    background-color:#00CCFF; /* bleu ciel */
    width:50px;
    height:50px;
    text-align:center;
    top:55px;
    right:42px;
    }
Positionnement absolu : HTML
Sélectionnez

<div id="element1">ploum ploum</div>
Exemple de positionnement absolu
Exemple de positionnement absolu
Image personnelle Télécharger les codes-source de l'exemple

Attention cependant... La position n'est absolue que par rapport au conteneur... Dans l'exemple précédent, le conteneur était le BODY, donc la fenêtre du navigateur.

Positionnement absolu 'relatif' : CSS
Sélectionnez

#element1 {
    position:absolute;
    background-color:#00CCFF; /* bleu ciel */
    width:50px;
    height:50px;
    text-align:center;
    top:55px;
    left:42px;
    }
#element2 {
    position:absolute;
    background-color:#CC66CC; /* violet */
    width:100px;
    height:100px;
    text-align:center;
    top:50px;
    left:70px;
    }
Positionnement absolu 'relatif' : HTML
Sélectionnez

<div id="element2">
    <div id="element1">ploum ploum</div>
</div>
Exemple de positionnement absolu 'relatif'
Exemple de positionnement absolu 'relatif'
Image personnelle Télécharger les codes-source de l'exemple

Pour gérer la superposition des différents blocs, reportez-vous à la .

III-B. Propriété CSS "float"

Voyons maintenant la propriété float, celle qui vous servira le plus lors de vos mises en page.
Cette propriété positionne l'élément le plus à gauche (float:left;) ou le plus à droite (float:right;) de son conteneur.

Le reste des éléments du conteneur s'affichera en suivant les contours des éléments flottants.

Positionnement flotant : CSS
Sélectionnez

#conteneur {
    background-color:#CC9999; /* marron bizarre */
    text-align:justify;
    }
#element1 {
    float:left;
    background-color:#00CCFF; /* bleu ciel */
    width:70px;
    height:70px;
    text-align:center;
    }
#element2 {
    float:right;
    background-color:#66CC99; /* vert */
    width:70px;
    height:70px;
    text-align:center;
    }
Positionnement flotant : HTML
Sélectionnez

<div id="conteneur">
    <div id="element1">titi</div>
    <div id="element2">toto</div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Integer et erat. Mauris iaculis vulputate nunc.
    Praesent sodales pellentesque est.
    Fusce nisl lectus, cursus ut, sollicitudin eget, congue eget, lorem.
    Phasellus lobortis, purus vitae rutrum elementum, risus libero volutpat felis, nec dictum lorem augue ac risus.
    Integer dapibus ullamcorper nunc. Maecenas nibh magna, vestibulum in, dapibus vitae, tristique et, ipsum.
</div>
Exemple de positionnement flotant
Exemple de positionnement flotant
Image personnelle Télécharger les codes-source de l'exemple

IV. Propriété des éléments : display

La propriété CSS display va nous permettre de modifier le type de nos éléments.
Nous n'allons pas détailler ici toutes les valeurs possibles, mais nous intéresser à deux d'entre elles : display:block et display:inline.

Dans cet exemple, nous allons créer deux éléments de type "bloc", en leur affectant la propriété display:inline, et deux éléments de type "en-ligne", en leur affectant la propriété display:block.

Propriété display : CSS
Sélectionnez

#bloc1 {
    background-color:#00CCFF; /* bleu ciel */
    display:inline;
    }
#bloc2 {
    background-color:#FF6666; /* rouge */
    display:inline;
    }
#enligne1 {
    background-color:#00CCFF; /* bleu ciel */
    display:block;
    }
#enligne2 {
    background-color:#FF6666; /* rouge */
    display:block;
    }
Propriété display : HTML
Sélectionnez

<div id="bloc1">Mickey</div>
<div id="bloc2">Minnie</div>
<span id="enligne1">Donald</span>
<span id="enligne2">Daisy</span>
Modification des propriétés des éléments avec 'display'
Modification des propriétés des éléments avec 'display'
Image personnelle Télécharger les codes-source de l'exemple

Etrange n'est-ce pas... Les éléments de type "bloc" se comportent maintenant comme des éléments de type "en-ligne", et vice-versa.
Imaginez les possibilités offertes par une telle propriété... Un menu sous forme de liste généré dynamiquement pourrait devenir, sur simple changement du style appliqué, un menu horizontal sans pour autant modifier la fonction de base...

V. Et l'héritage, qu'est-ce que c'est ?

Bon, puisque vous avez l'air chaud comme la braise, voici venue l'heure de parler d'héritage, de polymorphisme, et d'encapsulation...

Bon, partez pas en courant, revenez, on va se contenter de l'héritage, le reste n'existe pas en HTML / CSS, et c'est une notion toute simple en plus :)

L'idée, c'est qu'un élément X contenu dans un élément Y va hériter des propriétés de cet élément Y.
Petit exemple pour mieux comprendre :

Héritage : CSS
Sélectionnez

.niveau1 {
    color:#0033FF; /* bleu */
    text-align:right;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
.niveau2 {
    text-decoration:underline;
    color:#CC3366; /* violet */
    }
Héritage : HTML
Sélectionnez

<div class="niveau1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <div class="niveau2">
        In tempor quam nec enim sollicitudin vehicula.
    </div>
    Mauris lacus. Aenean odio ligula, mollis imperdiet, elementum non, gravida et, leo.
</div>
Exemple d'héritage
Image personnelle Télécharger les codes-source de l'exemple

Ici, le bloc "niveau2" hérite des propriétés de son père "niveau1". Ainsi, nous avons récupéré l'alignement du texte, le gras, la famille de police et même la couleur.
Nous avons juste choisi de redéfinir la couleur, et de souligner le contenu de l'élément 2, afin de rendre tout ca plus visible.

Bon, pas si compliqué que ça finalement ? Le seul moment où ça se corse, c'est que toutes les propriétés ne peuvent pas être héritées. Ainsi, deux éléments de type "bloc" Y et Z, contenus dans un élément X défini en float se positionneront tout de même l'un au dessus de l'autre

Float conteneur : CSS
Sélectionnez

#conteneur {
    background-color:#3399FF; /* bleu ciel */
    width:50px;
    height:100px;
    }
#contenu1 {
    background-color:#00FFCC; /* vert */
    width:30px;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    }
#contenu2 {
    background-color:#FF99CC; /* rose */
    width:30px;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    }
Float conteneur : HTML
Sélectionnez

<div id="conteneur">
    <div id="contenu1"></div>
    <div id="contenu2"></div>
</div>
Exemple de float conteneur
Exemple de float conteneur
Image personnelle Télécharger les codes-source de l'exemple

A noter également, tous les éléments n'ont pas les mêmes propriétés. Ainsi, un élément en-ligne n'ayant pas de marges, il n'héritera donc jamais des marges de son conteneur de type bloc.

VI. Petit complément rapide : le z-index.

Dès qu'un des éléments de votre page sort du flux, il peut arriver un effet de superposition.
C'est bien gentil tout ca, mais comment gérer "qui écrase l'autre" ?

La propriété z-index est là pour ça. En effet, elle va permettre d'attribuer à chaque élément un 'niveau', celui ayant le plus grand se retrouvant au-dessus.
Petit exemple pour mieux comprendre :

Définissons deux blocs, tous deux positionnés en absolu, et se chevauchant.
Pour chacun d'eux, définissons une propriété z-index différente :

z-index : CSS
Sélectionnez

#element1 {
    background-color:#0066FF; /* bleu */
    position:absolute;
    top:25px;
    left:25px;
    width:50px;
    height:50px;
    z-index:1;
    }
#element2 {
    background-color:#FF66CC; /* rose */
    position:absolute;
    top:50px;
    left:50px;
    width:50px;
    height:50px;
    z-index:2;
    }
z-index : HTML
Sélectionnez

<div id="element1"></div>
<div id="element2"></div>

Dans ce cas-ci, l'élément2 (le rose) se trouve au dessus de l'élément1 (le bleu).

z_index : le rose est au dessus
z_index : le rose est au dessus

Intervertissons maintenant les propriétés z-index de nos éléments, sans rien toucher d'autre.
Ainsi, le z-index de 'element1' passe à 2, et celui de 'element2' passe à 1.

Et hop, il n'y a qu'à demander, comme par magie, l'élément1 (en bleu) est passé au dessus de l'élément2 (en rose), sans rien devoir modifier dans le HTML.

z_index : le rose est au dessus
z_index : le bleu est au dessus
Image personnelle Télécharger les codes-source de l'exemple

Petite astuce en passant : le z-index peut parfaitement être négatif, ça ne posera de problèmes à personne ;)

Nous n'avons abordé ici qu'une toute petite partie du z-index, qui mériterai à lui seul un article complet. Pour plus de détails, n'hésitez pas à aller lire Understanding CSS z-index.


Tutoriel WEB

Introduction aux CSS

  • Introduction aux CSS
    • A. Qu'est-ce que les CSS
    • B. Les outils nécessaires pour utiliser le CSS
      • 1. Outils d'édition du code
      • 2. Les navigateurs
        • a. Trident : Internet Explorer
          • i. Internet Explorer 6
          • ii. Internet Explorer 7
          • iii. Internet Explorer 8
          • iv. Internet Explorer 9
        • b. Gecko : Firefox, Seamonkey, Camino et Netscape...
        • c. Presto : Opera
        • d. KHTML et Webkit : Safari, Google Chrome et Konqueror
          • i. Konkeror
          • ii. Safari
          • iii. Google Chrome
    • C. La gestion du CSS
    • D. Avantages qu'apportent les feuilles de style à la création de sites web
      • 1. Réduction de la quantité du code
      • 2. Centralisation de la présentation
      • 3. Adaptation du site en fonction de l'affichage
      • 4. Création de feuilles de style personnalisées
    • E. Conventions et contenu de ce cours
      • 1. Les exemples
      • 2. Mise en avant des noms d'éléments dans le cours
      • 3. Liste des articles liés
  • Remerciements

Internet est devenu aujourd'hui un outil de communication extrêmement puissant, qui a pris une importance prépondérante dans notre société contemporaine. Selon les statistiques de juin 2010 il y aurait près de 2 milliards (1) d'utilisateurs d'internet dans le monde. Ce succès conduit logiquement à ce que de plus en plus de gens s'intéressent à la réalisation de sites web.

Pour créer un site web il faut s'atteler à l'apprentissage de langages tels que le HTML et le CSS. Les CSS, aussi appelées feuilles de style, sont devenues aujourd'hui, au même titre que le langage HTML, un maillon essentiel à la création de sites web. Elles permettent un large contrôle sur la présentation d'un document web.

Je vous propose une série d'articles qui va vous introduire dans le monde du langage CSS, en suivant différentes étapes vous permettant de vous familiariser petit à petit avec les feuilles de style. Chaque étape vous conduira à progresser dans la difficulté et dans l'approfondissement de l'étude du langage.

Pour enrichir l'exposé théorique, chaque article sera agrémenté de nombreux morceaux de code illustrant mes propos et qui renverront vers des pages d'exemple vous permettant de visualiser leur mise en œuvre pratique et vous donneront accès au code complet utilisé pour faire fonctionner l'exemple.

Vous aurez ainsi à votre disposition pour le moment 14 exemples sur un ensemble de deux articles de cette série.

Cet ensemble d'articles sur CSS est destiné autant au débutant qu'à celui qui connaît déjà un peu le CSS. Le premier y trouvera tout ce qu'il aura besoin de savoir pour bien débuter l'apprentissage. Le second pourra approfondir ses connaissances. Des connaissances du langage HTML sont cependant nécessaires.

Dans ce premier article nous allons aborder les points essentiels à retenir avant de se lancer dans l'étude du langage proprement dit. Nous allons d'abord vous indiquer ce que sont les CSS. Pour mettre en œuvre tout ce que vous allez apprendre il vous faudra des outils spécifiques, c'est le point que nous allons voir en second lieu. Dans le prolongement des outils, il faut savoir que les CSS sont régies par des "normes" rédigées par un organisme qui s'occupe de la gestion des CSS. Mais pourquoi utiliser les CSS ? Tout simplement parce qu'elles apportent des avantages que je vous détaillerai ensuite. Enfin, pour une meilleure compréhension de ces articles, j'aborderai les conventions utilisées dans tous ces articles.

Cet article est le premier d'une série consacrée à CSS, retrouvez les autres articles de cette série dans le sommaire ou dans l'encadré bleu en bas de page.

Tous mes remerciements vont à ClaudeLELOUP pour sa relecture et ses corrections, ainsi qu'à Macmillenium, Bovino et tous les autres membres de l'équipe Web que j'ai oubliés, pour leur soutien.

Introduction aux CSS

Cette introduction va aborder les points essentiels à retenir avant de se lancer dans l'étude du langage proprement dit. Nous allons d'abord vous indiquer ce que sont les CSS. Pour mettre en œuvre tout ce que vous allez apprendre il vous faudra des outils spécifiques, c'est le point que nous allons voir en second lieu. Dans le prolongement des outils, il faut savoir que les CSS sont régies par des "normes" rédigées par un organisme qui s'occupe de la gestion des CSS. Mais pourquoi utiliser les CSS ? Tout simplement parce qu'elles apportent des avantages que je vous détaillerai ensuite. Enfin, pour une meilleure compréhension de ces articles, j'aborderai les conventions utilisées dans tous ces articles.

A. Qu'est-ce que les CSS

Le langage CSS (en anglais Cascading Style Sheets, qu'on peut traduire par feuilles de style en cascade) a été créé pour le web : il sert principalement à gérer l'aspect visuel d'une page web (cette utilisation peut aussi se faire sur d'autres supports : XML, ODT, RSS, applications XUL (1)...).

En d'autres termes, le langage CSS gère la présentation d'une page web : la couleur du texte, l'utilisation de telle ou telle police, les images ou couleurs d'arrière-plan, les espaces et marges des différents éléments, le positionnement des éléments, etc.

Le CSS n'existe pas par lui-même. Il s'applique forcément à un autre document : il ne peut être utilisé qu'en association avec des langages de balisage tels que HTML et XHTML.

Ces langages de balisage servent à définir une structure sémantique au contenu de la page web ; cela veut dire que les balises utilisées permettent de donner une signification à leur contenu : en indiquant que tel texte est un titre, tel autre une liste, ou encore tel autre un paragraphe. Le CSS est là pour gérer l'apparence de la page web, il crée la mise en page du langage de balisage : couleurs, positions, tailles, police... sans avoir à modifier le code (X)HTML. C'est un des concepts fondamentaux actuels du web : la séparation du fond et de la forme.

C'est-à-dire que le fond est géré par le langage de balisage (HTML) : si vous avez une liste vous utilisez les balises <ul> ou <ol> sans tenir compte de comment l'élément sera affiché. Car l'affichage relève de la forme qui sera gérée par les CSS. Vous pourrez spécifier le type de puce affiché, ou remplacer la puce par une image, déterminer la couleur du texte, etc. Ces deux couches que sont le fond et la forme doivent être séparées pour avoir des pages optimisées et bénéficier de toute la puissance du CSS. Nous verrons plus bas tous les avantages que va vous apporter ce langage.

Il est donc important d'avoir déjà quelques notions de ces langages de balisage avant de se plonger dans l'apprentissage du CSS.

Vous pouvez vous référer à ce cours pour apprendre les bases du HTML : les bases du htmlApprendre les bases du html.

Pour illustrer notre propos nous allons prendre un exemple :

Un exemple de code XHTML :
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 01 : Mise en page d'une structure XHTML sans CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<h1>
Exemple 01 : Mise en page d'une structure XHTML sans CSS
</h1>

  <div id="entete">
    <img src="../images/logo.gif" alt="Logo" />
    <h2>
Exemple de site sans CSS
    </h2>
    <p>
Un exemple de présentation avec et sans code CSS.
    </p>
  </div>

  <div id="corps">
    <div id="menu">
      <h3>
Menu
      </h3>
      <ul>
        <li>
      <a href="#">
Lien 1
      </a>
        </li>
        <li>
      <a href="#">
Lien 2
      </a>
        </li>
        <li>
      <a href="#">
Lien 3
      </a>
        </li>
      </ul>
    </div>

    <div id="contenu">
      <img src="../images/logo_css.gif" alt="Logo CSS" />

      <h3>
Contenu
      </h3>

      <p>
Paragraphe 1
      </p>
      <p>
Paragraphe 2
      </p>
      <p>
Paragraphe 3
      </p>
      <p>
Paragraphe 4
      </p>
      <p>
Paragraphe 5
      </p>
    </div>
  </div>

  <div id="pied">
    <p>
Pied de page
    </p>
  </div>

</body>
</html>

Voyez ce que donne le code ci-dessus dans l'exemple 01 sur une mise en page d'une structure XHTML sans CSS. Cette page web n'est associée à aucun code CSS autre que celui de la feuille de style par défaut du navigateur. Cette feuille de style, qui est propre à chaque navigateur, ne fait que gérer le style basique des éléments du document. L'affichage se fait donc de manière brute, sans réelle mise en page autre que celle associée aux éléments (X)HTML.

Associons maintenant à ce code la feuille de style suivante :

Un exemple de code CSS :
Sélectionnez
#entete, #corps, #pied {
        margin :           5px 0;
        padding :          2px;
        border :           1px solid black;
        background-color : #d3d3d3;/*lightgray*/
}

#entete {
        overflow :         hidden;
        height :           110px;
}

h1, h2, h3 {
        font-family :      Arial, sans-serif;
        font-weight :      bold;
        color :            blue;
        text-decoration :  underline;
        text-align :       left;
}

#entete p {
        margin :           25px 0px;
}

#entete img {
        float :            right;
}

#corps {
        overflow :         hidden;
        zoom :             1;
}

#menu {
        width :            20%;
        float :            left;
}

#contenu {
        width :            80%;
        float :            left;
}

#contenu p:first-letter {
        font-weight :      bold;
        font-size :        2.5em;
        background :       #add8e6;/*lightblue*/
        margin :           2px;
        padding :          4px;
        float :            left;
}

#contenu img {
        float :            right;
        margin :           0px 5px;
}

#pied {
        text-align :       center;
}

Et voyons dans l'exemple 02 sur une mise en page d'une structure XHTML avec CSS ce que donne ce code CSS associé au document XHTML précédent. Notez que nous avons simplement rajouté la ligne suivante dans l'en-tête du document XHTML qui nous permet de lier le fichier CSS à la page XHTML (vous retrouverez le code complet dans l'exemple) :

Rajout de la balise link pour lier le document CSS :
Sélectionnez

<link href="style-ex02.css" type="text/css" rel="stylesheet" />

En comparant les deux versions vous vous rendrez compte de l'immense potentiel du CSS. Cela vous donne également une vision sur les différents éléments gérés par le CSS.

Vous vous demandez certainement : « mais comment faisaient-ils avant que les CSS ne soient créées ? » Le plus simple est encore de l'illustrer par un exemple :

Un exemple de site avec les éléments de présentation dans le code XHTML
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 03 : Mise en page d'une structure XHTML avec l'ancienne méthode</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<h1>
Exemple 03 : Mise en page d'une structure XHTML avec l'ancienne méthode
</h1>

  <table border="0" width="100%">
    <tr>
      <td>

        <table border="1" width="100%" bgcolor="lightgrey" cellspacing="0">
          <tr>
            <td>

              <table border="0" width="100%" cellspacing="0">
                <tr>
                  <td align="left">
                    <h2>
                      <font face="Arial, Serif" color="blue">
                      <u>
Exemple de site avec CSS
                      </u>
                      </font>
                    </h2>
                    <p>
Un exemple de présentation avec tableaux.
                    </p>
                  </td>
                  <td align="right">
                    <img src="../images/logo.gif" title="Logo" alt="" />
                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>

      </td>
    </tr>
    <tr>
      <td height="1">
      </td>
    </tr>
    <tr>
      <td>

        <table border="1" width="100%" bgcolor="lightgrey" cellspacing="0">
          <tr>
            <td>

              <table border="0" width="100%" cellspacing="0">
                <tr>
                  <td width="20%" valign="top">
                    <h3>
                      <font face="Arial, Serif" color="blue">
                      <u>
Menu
                      </u>
                      </font>
                    </h3>
                    <ul>
                      <li>
                        <a href="#">
Lien 1
                        </a>
                      </li>
                      <li>
                        <a href="#">
Lien 2
                        </a>
                      </li>
                      <li>
                        <a href="#">
Lien 3
                        </a>
                      </li>
                    </ul>
                  </td>
                  <td width="80%">
                    <img src="../images/logo_css.gif" align="right" alt="Logo CSS" />

                    <h3>
                      <font face="Arial, Serif" color="blue">
                      <u>
Contenu
                      </u>
                      </font>
                    </h3>

                    <p>
<font size="7"><b>P</b></font>aragraphe 1
                    </p>
                    <p>
<font size="7"><b>P</b></font>aragraphe 2
                    </p>
                    <p>
<font size="7"><b>P</b></font>aragraphe 3
                    </p>
                    <p>
<font size="7"><b>P</b></font>aragraphe 4
                    </p>
                    <p>
<font size="7"><b>P</b></font>aragraphe 5
                    </p>
                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>

      </td>
    </tr>
    <tr>
      <td height="1">
      </td>
    </tr>
    <tr>
      <td>

        <table border="1" width="100%" bgcolor="lightgrey" cellspacing="0">
          <tr>
            <td align="center" height="50">
Pied de page
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

</body>
</html>

Ce code va aboutir à l'affichage suivant : visualiser le résultat dans l'exemple 03 : Mise en page d'une structure XHTML avec l'ancienne méthode des tableaux. Vous constaterez qu'il n'y a pas d'énormes différences d'affichage entre cette version et celle ci-dessus. La différence fondamentale réside dans le code : la mise en page est faite à base de tableaux, tous les aspects de la présentation sont gérés directement dans le code XHTML et à l'aide d'attributs relevant de ce langage.

Vous pouvez cependant noter que pour garder une page valide nous avons dû modifier le DOCTYPE utilisé : nous sommes passés du DOCTYPE Strict au DOCTYPE Transitional. En effet les attributs de présentation dans le code (X)HTML ne sont pas admis avec un DOCTYPE Strict, tandis qu'ils sont autorisés si on utilise un DOCTYPE Transitional.

Mais pourquoi alors s'embêter avec un nouveau langage si le HTML s'autosuffit ? Parce que le CSS est un énorme progrès et qu'il a de nombreux avantages tels que légèreté du code, facilité de changer de design... Le code de l'exemple 3 est moins pratique, moins maintenable et plus lourd.

Aujourd'hui le (X)HTML ne peut plus se passer du CSS. Pour se conformer aux bonnes pratiques en la matière, il est en effet déconseillé de faire des mises en page à l'aide de tableaux (2) ni d'intégrer des attributs de présentation au sein du code (X)HTML. Il faut séparer au maximum la structure du document de sa mise en forme, et le CSS est là pour répondre à ce besoin.

Il permet surtout de faire des choses qui ne sont pas possibles ou, pour le moins, beaucoup plus complexes à réaliser en HTML pur.

Je détaillerai les avantages qu'apporte le CSS un peu plus loin dans cet article.

B. Les outils nécessaires pour utiliser le CSS

Pour créer un site web il vous suffit de créer deux fichiers : le premier avec l'extension .htm ou .html, et le second avec l'extension .css correspondant au fichier CSS.

Une fois ces fichiers créés il vous faudra deux outils principaux pour réaliser un site web : un outil permettant d'éditer ces fichiers et un navigateur pour pouvoir visualiser le résultat.

1. Outils d'édition du code

Ces deux types de fichiers (.html et .css) sont de simples fichiers texte qui sont modifiables avec un éditeur de texte basique, dans lesquels vous allez écrire du texte formaté d'une certaine manière. Un outil évolué n'est pas nécessaire pour ce faire.

Au niveau de ces outils vous avez le choix parmi une pléthore de logiciels, des plus simples aux plus évolués, certains nécessitant de votre part une connaissance du code, d'autres vous permettant de réaliser un site web sans presque aucune connaissance des langages employés. Ce ne sont bien sûr pas ces derniers que nous allons privilégier ici puisqu'il s'agit de vous initier à ce langage qu'est le CSS.

Un logiciel extrêmement rudimentaire comme le Bloc-notes de Windows va suffire pour faire du CSS. Vous trouverez ce logiciel en cliquant sur démarrer > Tous les programmes > Accessoires > Bloc-notes. Pour Mac vous disposez de TextEdit que vous trouverez dans le dossier Application. En ce qui concerne Linux les différentes distributions existantes sont trop nombreuses pour indiquer tous les éditeurs disponibles, on peut par exemple citer nedit, gedit, emacs, xemacs, etc.

Si vous enregistrez vos documents avec l'un de ces logiciels, en particulier avec le Bloc-notes de Windows, prenez soin de bien spécifier la bonne extension. En effet ces logiciels vont enregistrer par défaut votre document au format .txt. Si vous n'indiquez pas explicitement l'extension .css votre fichier ne sera pas reconnu comme tel et n'aura pas l'effet désiré.

Le Bloc-notes de Windows est un des logiciels les plus basiques qui existent pour écrire du code CSS ou (X)HTML. Il en est d'autres qui disposent de fonctionnalités qui vont assister le développeur dans sa tâche.

Ces outils peuvent être classés en deux catégories : les éditeurs de texte et les EDI (environnement de développement intégré, de l'anglais IDE (Integrated Development Environment) (3).

Ces outils partagent tous un certain nombre de fonctionnalités utiles au développeur. Une des fonctionnalités les plus pratiques est la coloration syntaxique : le logiciel affiche le code en couleurs en fonction des différents éléments qui le composent. Cela permet une lecture plus rapide du code ainsi qu'une visualisation simplifiée des erreurs. En fonction des logiciels, d'autres fonctionnalités sont proposées comme l'autocomplétion (le fait, au fur et à mesure que vous tapez le code, de proposer les différents mots-clés, vous évitant ainsi de les taper entièrement), la fonction avancée de Rechercher/Remplacer, etc.

Les EDI sont cependant plus perfectionnés que les éditeurs de texte, car ils proposent d'autres outils encore plus évolués tels qu'un débogueur, un compilateur (pour les langages compilés), une interface de gestion de versions, etc.

Comparaison entre Notepad++ et le Bloc-notes de Windows : l'un possédant la coloration syntaxique, l'autre pas
Comparaison entre Notepad++ et le Bloc-notes de Windows : l'un possédant la coloration syntaxique, l'autre pas

Vous trouverez différentes rubriques listant ces logiciels sur le site developpez.com, à l'adresse suivante http://xhtml.developpez.com/outils/ pour les outils (X)HTML et à l'adresse suivante http://css.developpez.com/outils/ pour les outils CSS.

Pour ma part, et c'est un avis totalement personnel, je vous conseille Notepad++ qui est un éditeur de texte et non un EDI. Parmi les fonctionnalités dont dispose cet outil je citerai celles-ci :

  • quand vous positionnez votre curseur sur une balise double, une accolade ou des parenthèses, ces éléments sont surlignés ou changent de couleur. Cela permet de les distinguer parmi les autres, de savoir quel élément fermant est associé à celui qu'on est en train de visualiser. Bref cela permet d'avoir une meilleure vision du code ;
  • devant chaque balise vous disposez d'un contrôle vous permettant, en cliquant dessus, de cacher ou d'afficher la portion de code (visible sur la photo ci-dessus à gauche) ;
  • vous disposez de deux vues positionnées soit verticalement soit horizontalement, vous permettant de comparer deux documents. Vous avez aussi des contrôles vous permettant de synchroniser soit le scroll vertical, soit le scroll horizontal, soit les deux. Un outil existe également permettant de mettre en avant les différences dans le contenu de chaque fenêtre ;
  • Notepad++ gère un large panel de langages, tous associés à leur coloration syntaxique, que vous pouvez personnaliser à votre guise.

Mais il existe plein d'autres logiciels, à vous de faire votre choix.

Je ne peux pas aborder les outils pour les développeurs web sans dire un mot sur les outils WYSIWYG, même si le but de ce cours est de vous apprendre le CSS et donc de vous faire plonger directement dans le code CSS. En effet ces outils permettent à un néophyte de créer un site web sans aucune connaissance des langages qui régissent le web.

Que signifie WYSIWYG ? Ce sigle signifie What You See is What You Get, traduit en français : ce que vous voyez est ce que vous obtenez. Ce genre de logiciel permet de créer des sites web en mode graphique, sans taper une seule ligne de code, un peu à la mode des logiciels de traitement de texte pour la mise en page du texte.

Ce type de logiciel est donc utile pour des gens qui ne connaissent pas les langages du web. Ils peuvent créer un site à partir de zéro sans taper une seule ligne de code. Le principal inconvénient est que vous n'avez pas la main sur le code, le logiciel le créant lui-même en fonction de vos actions dans l'interface graphique de celui-ci. Ce code n'est pas toujours propre et ne respecte pas les standards tels qu'élaborés pas le W3C.

Il faut cependant préciser que certains de ces logiciels disposent également d'un mode d'édition du code : vous pouvez visualiser le code et le modifier à votre guise, comme dans un simple éditeur de texte. Parmi les logiciels à conseiller vous trouverez Dreamweaver (payant) ou Komposer (gratuit, successeur de Nvu).

Une fois vos premières lignes de code écrites, vous voudrez certainement visualiser le résultat, pour cela il vous faut un navigateur.

2. Les navigateurs

Une page web est destinée, en principe, à être visualisée par le plus grand nombre ! Pour ce faire il existe des logiciels qu'on appelle des navigateurs graphiques par opposition aux navigateurs textuels en mode console et aux logiciels de synthèse vocale.

Les navigateurs textuels en mode console affichent un site en mode texte uniquement, sans appliquer le code CSS et sans télécharger les images (exemple : Lynx). Les logiciels de synthèse vocale sont destinés aux malvoyants (ils convertissent le texte en voix de synthèse), notez que le CSS dispose de propriétés permettant de contrôler la voix générée par ces navigateurs vocaux (4) (exemple : Opera à partir de sa version 7).

Il ne sera ici question que des navigateurs graphiques.

Un navigateur graphique est composé de deux éléments principaux : un moteur de rendu et une interface graphique.

Le moteur de rendu sert à décrypter les langages du web, (X)HTML et CSS entre autres, pour les convertir en une représentation graphique dans le navigateur de l'utilisateur, donc avec la mise en forme et tous les éléments de design (5). L'interface graphique est une représentation graphique sur un écran d'ordinateur permettant une interaction de la part de l'utilisateur à l'aide de périphériques tels que souris, clavier...

Les navigateurs sont le talon d'Achille de CSS. En effet, ces logiciels sont la propriété de sociétés commerciales pour la plupart, qui sont libres de leurs choix de développement, je veux dire par là que les spécifications CSS que nous allons aborder dans la suite de cet article, n'ont aucune valeur contraignante et que ces éditeurs de logiciels choisissent de les implémenter ou non, et de la manière qui leur convient.

Donc ces spécifications CSS, qui pourraient être le socle commun sur lequel le développeur web devrait pouvoir se reposer, sont implémentées de manière inégale dans les différents navigateurs existant sur le marché. Certains implémentent les différentes règles de manière conforme aux spécifications, d'autres les implémentent incorrectement voire pas du tout.

Il faut donc composer avec ces derniers pour créer un site web qui sera affiché uniformément sur tous les navigateurs. Pour cela il n'y a pas d'autre solution que de tester au maximum son site web avec les navigateurs les plus fréquemment utilisés et qui représentent la plus large part de marché possible (6). Il est en effet difficilement concevable d'exclure une partie des utilisateurs qui disposent de tel ou tel navigateur au seul motif que le développeur n'a pas su ou voulu adapter son site à ce navigateur, d'autant plus lorsque les parts de marché de ce(s) navigateur(s) sont importantes.

Il restera cependant toujours une part d'aléas : quand les spécifications n'ont prévu aucune règle pour tel ou tel point, alors les programmeurs de ces logiciels vont mettre en œuvre des solutions qui peuvent leur être propres. Donc même avec les navigateurs respectueux des standards vous pourrez rencontrer des différences d'affichage sur ce genre de point.

De plus les navigateurs ont tous une feuille de style par défaut pour tous les éléments (X)HTML dont les règles peuvent varier en fonction des navigateurs.

Certains développeurs ont crée des tests permettant de vérifier le respect des standards par les différents navigateurs. Il existe en particulier le test ACID décliné en trois versions (7). Les tests ACID sont destinés à vérifier que les moteurs de rendu respectent un certain nombre de standards du web. Je préciserai pour chaque navigateur quel résultat il obtient au test (8). Les niveaux se calculent avec une note pouvant aller de 0 à 100.

Maintenant que nous avons planté le décor, il nous reste à évoquer les principaux navigateurs qu'il convient de prendre en compte. Nous allons les répartir en fonction de leur moteur de rendu, c'est lui qui gère la présentation, et donc des navigateurs disposant du même moteur de rendu vont avoir un affichage relativement similaire.

a. Trident : Internet Explorer

Internet Explorer a été le navigateur de référence pendant longtemps. Il a en effet atteint un pic de 95 % de parts de marché au début des années 2000 (9). Son utilisation, par les internautes, est aujourd'hui en constant déclin, mais reste encore significative. Avec entre 40 et 55 % de parts de marché, selon les sources, il est encore le navigateur le plus répandu.

Internet Explorer est un navigateur qui n'est pas très respectueux des standards et qui peut poser de nombreux soucis de rendu dans vos pages web. Cette situation est cependant sur le point d'évoluer avec les dernières versions.

Parmi les particularités d'Internet Explorer on trouve le concept de layout (aussi appelé haslayout), le modèle de boite spécifique de Microsoft qui diffère du modèle standard du W3C et le mode de compatibilité descendante quirks qui est un peu plus présent dans Internet Explorer que dans les autres navigateurs. Les concepts de modèle de boite Windows et le mode de compatibilité quirks, n'étant pas spécifiques à Internet Explorer, seront étudiés dans un article ultérieur.

Le concept de haslayout est un concept propre à Internet Explorer. C'est un mécanisme spécifique qui existe dans le moteur de rendu dans les versions 5 à 7 d'Internet Explorer, et qui influe sur l'affichage et le positionnement des éléments, ainsi que leur interaction avec les autres éléments.

Dans la pratique, le layout peut avoir des effets positifs comme des effets négatifs : parfois un élément ne s'affichera correctement que s'il a le layout ; dans d'autres cas si l'élément a le layout, il ne s'affichera pas correctement et vous serez confronté à un bogue de rendu.

Le layout n'est pas une propriété CSS, il ne peut donc pas être conféré via une propriété 'layout'. En fait le layout est une qualité qui est ou non attribuée aux éléments. Certains éléments (X)HTML ont par défaut cette qualité. Pour que les autres éléments aient le layout, il faut leur appliquer une des propriétés CSS qui a le pouvoir de conférer le layout (ces propriétés sont entre autres width, height, zoom, float, etc.). Appliquer une de ces propriétés à un élément lui confère alors une sorte de valeur haslayout = true. Pour mettre en œuvre la valeur haslayout = false il n'y a que la possibilité de supprimer la propriété CSS qui a conféré le layout.

Pour plus d'informations sur le concept de layout vous pouvez consulter les articles suivants : Avoir le layout - Le concept de hasLayout dans IE/WinAvoir le layout - Le concept de hasLayout dans IE/Win et Avoir la mise en pageAvoir la mise en page.

Le moteur de rendu qu'il utilise est appelé Trident. Quatre versions d'Internet Explorer sont aujourd'hui toujours utilisées : ce sont les versions 6, 7, 8 et 9.

i. Internet Explorer 6

Internet Explorer 6 est la version la plus ancienne de celles encore utilisées. Elle est sortie en août 2001. C'est un navigateur encore très répandu avec environ 15 % de parts de marché en 2010 (10).

C'est un navigateur qui pose un certain nombre de problèmes de compatibilité avec les spécifications CSS : soit parce qu'il ne respecte pas ou partiellement certaines parties des spécifications, soit qu'il n'implémente pas ou mal certaines propriétés CSS. Il faudra cependant encore gérer ce navigateur pendant quelque temps au vu des parts de marché qu'il représente toujours.

Malgré cela, certains sites parmi les plus importants (notamment YouTube et Facebook) ont abandonné en 2010 le support de ce navigateur.

Ce navigateur fait un score de 12 sur 100 au test Acid 3.

ii. Internet Explorer 7

Internet Explorer 7 est sorti en octobre 2006, soit cinq années après Internet Explorer 6. Par rapport à son prédécesseur il a fait l'objet de nombreuses améliorations du point de vue de la sécurité (filtre antiphishing...), des fonctionnalités (onglets...) et au niveau de la prise en charge des spécifications CSS 2.1.

Malgré les efforts consentis depuis Internet Explorer 6 au niveau du respect des standards, Internet Explorer 7 n'atteint pas encore le niveau de ses concurrents. Il reste le navigateur le moins respectueux des standards parmi les navigateurs modernes.

Ce navigateur fait un score de 12 sur 100 au test Acid 3.

iii. Internet Explorer 8

Internet Explorer 8 est sorti le 19 mars 2009.

Cette version apporte un certain progrès dans le sens d'un plus grand respect des normes et standards du W3C : Internet Explorer 8 respecte presque totalement CSS 2.1. De même, le Haslayout, notion spécifique à Internet Explorer, disparaît. Par contre il ne va pas aussi loin que ses concurrents : il n'implémente presque aucun élément des spécifications CSS 3. Il n'implémente par exemple aucun module de CSS 3 et ce y compris les media queries (11). Et n'implémente pas non plus le type Mime application/xhtml+xml : il n'est donc pas possible de faire du 'vrai' XHTML, c'est-à-dire auquel on applique les règles du XML, car le document sera interprété suivant les règles du HTML (12).

Cependant cette meilleure prise en charge des standards du web va conduire à ce que les sites compatibles avec les anciennes versions d'Internet Explorer ne le sont plus avec Internet Explorer 8. De ce fait Microsoft a imaginé un nouveau système permettant de choisir le mode de compatibilité désiré : Internet Explorer 8 peut simuler le moteur de rendu d'Internet Explorer 7. En d'autres termes Internet Explorer 8 peut afficher une page web comme l'affichait Internet Explorer 7.

En réalité Internet Explorer 8 dispose de trois modes de compatibilité : le mode de compatibilité descendant quirks (commun à tous les navigateurs), le mode d'Internet Explorer 7 appelé mode de compatibilité, et enfin le mode standard (également commun à tous les navigateurs).

Par défaut c'est le mode d'Internet Explorer 8 qui est utilisé. Le mode d'Internet Explorer 7 peut être activé soit à partir du navigateur, donc par l'utilisateur, soit à partir du site internet lui-même, donc par le webmaster.

Pour changer le mode de compatibilité à partir du site il faut envoyer par entête HTTP la propriété "X-UA-Compatible". Cela peut se faire par un entête serveur, un header PHP, ou encore par une balise meta :

Balise meta permettant de changer le mode de compatibilité d'Internet Explorer 8
Sélectionnez

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Plus de renseignements sur ces modes de compatibilité : tout savoir sur les modes de compatibilité d'Internet Explorer 8tout savoir sur les modes de compatibilité de Internet Explorer 8.

Ce navigateur passe le test Acid 2 mais fait un score de 20 sur 100 au test Acid 3.

iv. Internet Explorer 9

Internet Explorer 9 est sorti le 14 mars 2011.

Il poursuit le progrès effectué par Microsoft dans le sens d'un meilleur respect des standards. Cette version introduit également HTML 5 et CSS 3 pour lesquels il fournit une compatibilité partielle.

Internet Explorer 9 se prévaut aussi d'une rapidité accrue dans l'affichage des pages notamment grâce à l'utilisation de l'accélération matérielle, ainsi qu'une meilleure vitesse d'exécution du JavaScript. Malheureusement ces améliorations rendent Internet Explorer 9 incompatible avec le système d'exploitation Windows XP.

Cette version d'Internet Explorer fait un score de 95/100 au test Acid 3, démontrant ainsi les progrès faits dans l'intégration des standards du web.

b. Gecko : Firefox, Seamonkey, Camino et Netscape...

Le premier navigateur commercial au milieu des années 1990 a été Netscape Navigator. Avec l'arrivée d'Internet Explorer il y a eu une « guerre des navigateurs » (13) qui a abouti à la défaite de Netscape. En effet ce navigateur a progressivement perdu de plus en plus de parts de marché, à tel point qu'Internet Explorer est devenu le seul navigateur de référence. Cette situation a décidé la société Netscape à rendre en 1998 son navigateur gratuit et à en libérer le code source.

C'est de là qu'est né le projet Mozilla qui était chargé du développement et de la gestion de ce code source. Mais après avoir constaté que ce code source était un obstacle au développement d'un nouveau navigateur, l'équipe de développeurs a décidé de repartir de zéro. De leurs travaux est né le nouveau moteur de rendu appelé Gecko.

Ce moteur de rendu est utilisé dans de nombreux navigateurs dont le plus connu est Mozilla Firefox, mais aussi Camino, Netscape versions 6 à 9, Mozilla Suite devenu SeaMonkey... Tous ces navigateurs sont supposés avoir le même comportement puisqu'ils utilisent le même moteur de rendu.

Mozilla Firefox est actuellement le concurrent le plus sérieux d'Internet Explorer ; il fait entre 20 et 35 % de parts de marché. Il a fait l'objet de nombreuses innovations techniques et surtout, ce navigateur est connu pour son respect toujours constant des normes du W3C.

Un autre avantage de Firefox est son système de modules : on peut rajouter tout un ensemble de fonctionnalités supplémentaires. Parmi ces modules il en existe quelques-uns qui aident le développeur dans la réalisation et le débogage du code (X)HTML et CSS : c'est par exemple le cas de Web DeveloperLien de téléchargement du module Web developer, ou encore du module Firebug dont vous trouverez un article décrivant ses fonctionnalités ici : Maîtriser Firebug, l'indispensable extension Firefox pour le développement webMaîtriser Firebug, l'indispensable extension Firefox pour le développement web.

Firefox en est actuellement à sa version 8. Mais ce numéro va s'incrémenter rapidement depuis que Mozilla a décidé de modifier son cycle de développement. Une nouvelle version devrait voir le jour toutes les six semaines !

Firefox a sans cesse évolué au niveau de l'implémentation des standards : il est passé d'un score de 53 sur 100 pour Firefox 2 à un score de 71 puis 93 sur 100 pour Firefox 3 et Firefox 3.5. Il fait actuellement un score de 95 sur 100 pour ses deux dernières versions que sont Firefox 4 et 5.

c. Presto : Opera

Opera est un navigateur norvégien. Il est connu pour sa rapidité et sa conformité aux standards. Le navigateur est à sa version 11.50 depuis juin 2011.

Ce navigateur est né en 1994. Il a été créé par des programmeurs de la société Televerket (aujourd'hui Telenor). C'est une compagnie publique de télécom norvégienne. La société Opera Software a été créée l'année suivante, soit en 1995, pour permettre un développement rapide du navigateur et de sa commercialisation. En effet ce navigateur n'est totalement gratuit que depuis 2005 dans sa version 8.5, puisqu'auparavant le navigateur intégrait un bandeau publicitaire.

C'est un navigateur qui est beaucoup moins utilisé que les précédents : il fait entre 1 et 2 % de parts de marché. Par contre il est très présent dans les appareils portatifs : téléphones portables et autres petits appareils tels que PDA... Mais aussi dans la Nintendo DS et la WII... Son moteur de rendu est aussi, par exemple, utilisé dans Dreamweaver.

Opera est le seul navigateur parmi ceux cités ici qui fait aussi office de navigateur vocal : il permet de transformer le texte de la page web qui sera récité par un synthétiseur vocal. Il peut aussi être contrôlé à la voix. Opera supporte donc le module Speech de CSS 3. Cela permet aux aveugles de naviguer sur les sites web.

Parmi les fonctionnalités principales, Opera dispose de la navigation par onglets mais à la différence des autres navigateurs, les onglets d'Opera peuvent être déplacés, redimensionnés, empilés et affichés en cascade comme un système multifenêtre. À l'avant-garde au niveau des appareils portatifs, Opera dispose d'un mode qui permet de visualiser une page en taille réduite, donc de simuler un écran d'appareil mobile (14) (téléphone, PDA...).

Ce navigateur depuis sa version 10, fait un score de 100 sur 100 au tes Acid 3. L'ancienne version (Opera 9.64) faisait, elle un score de 85 sur 100.

d. KHTML et Webkit : Safari, Google Chrome et Konqueror

KHTML est un moteur de rendu créé par et pour KDE (une des distributions de Linux). La première version est sortie en 2000.

C'est un moteur de rendu reconnu pour sa rapidité. Il respecte les normes HTML 4.1, CSS 1, presque entièrement CSS 2.1 (partiellement la partie sur les types de média), et certaines règles CSS 3 (particulièrement le module sur les sélecteurs).

Il faut aussi parler de Webkit qui est un moteur de rendu basé sur KHTML. Webkit a été créé par les développeurs d'Apple à partir du code de KHTML. Il est sorti pour la première fois en janvier 2003. Son code est devenu open source en juin 2005. C'est aussi un moteur de rendu qui est très respectueux des normes du W3C.

Ces moteurs de rendu sont utilisés dans de nombreux outils, notamment grâce à Webkit qui permet d'intégrer son moteur de rendu appelé Webcore, très simplement dans n'importe quel programme. Trois des principaux navigateurs utilisent ces moteurs de rendu, ce sont entre autres Konkeror (Linux), Safari (Apple) et Google Chrome.

i. Konkeror▲

Konkeror a été développé pour KDE (Linux). Il est complètement intégré à son interface puisque c'est non seulement un navigateur web mais aussi un gestionnaire de fichiers. Son interface utilisateur est largement configurable : il est possible de diviser la zone d'affichage, permettant de visualiser plusieurs dossiers locaux et distants, le tout imbriqué. Il dispose de tous les progrès des navigateurs actuels.

Ce navigateur est actuellement à sa version 4.7. Il fait un score de 89 sur 100 au test Acid 3 (version 4.5).

ii. Safari▲

Les premiers systèmes d'exploitation Mac ne disposaient pas de navigateur propre : Mac OS était distribué, d'abord uniquement avec Netscape jusqu'en 1997, puis en rajoutant Internet Explorer Mac après 1997. En 2003 Microsoft a annoncé l'abandon du développement de son navigateur pour Mac.
Constatant cet abandon par Microsoft, Apple s'est, à la même époque, lancé dans le développement de son propre navigateur. Il a repris KHTML en l'adaptant, pour devenir le moteur de rendu Webcore. La première version de Safari a été présentée au public en janvier 2003.

Comme les autres navigateurs alternatifs, Safari a une bonne prise en charge des standards du W3C. C'est également un navigateur très rapide, la version 3 a apporté dans ce domaine un progrès par rapport à son prédécesseur...

En 2007 Apple a sorti une version de Safari pour Windows XP et Vista, qui était le navigateur le plus rapide disponible sur Windows à l'époque.

Le 8 juin 2009 était sorti officiellement Safari 4. Ce fut un des premiers navigateurs à avoir passé avec succès le test Acid 3. Cela démontre d'ailleurs l'intérêt qu'apporte Apple au respect des standards : déjà Safari 3 était le premier, en avril 2005, à passer avec succès le test Acid 2.

Safari 5, sorti en juin 2010, fait un score de 100 sur 100 au test Acid 3.

iii. Google Chrome▲

Comme son nom l'indique c'est le navigateur de Google, le célèbre moteur de recherche. Google a annoncé le 1er septembre 2008 la naissance d'un nouveau navigateur : Google Chrome. La première version stable date du 11 décembre 2008.

Google Chrome utilise Webkit comme moteur de rendu. C'est un navigateur reconnu pour sa rapidité et son respect des standards.

C'est le navigateur qui a actuellement la plus forte marge de progression en termes de taux d'utilisation. Il est devenu en moins de trois ans le troisième navigateur avec un taux d'utilisation oscillant entre 12 et 16 % de parts de marché.

Google sort une nouvelle version de son navigateur environ toutes les six semaines, ce qui explique que Google Chrome en soit déjà à la version 14 qui est sortie en septembre 2011.

La première version de Chrome passait le test Acid 1, mais pas Acid 2, il faisait un total de 79 sur 100 points au test Acid 3. Depuis la version 4, google chrome fait un score de 100 sur 100 à ce test.

C. La gestion du CSS

Le CSS est géré par le W3C (World Wide Web Consortium). Le W3C est un groupe créé en 1994 et qui a pour objectif de définir les langages du Web comme le HTML, le XHTML, le CSS, le XLM...

Il a pour mission d'élaborer des standards sur le fonctionnement du web et sur les langages décrits à l'instant. Les documents que le W3C crée sont appelés spécifications, ces documents ont différents statuts en fonction de leur état d'avancement : le statut de version de travail (working draft) concerne les spécifications qui sont en cours d'élaboration, qui peuvent encore être sujettes à des modifications. On passe ensuite par une seconde étape appelée dernier appel (Last Call Working Draft), la troisième étape appelée candidat à la recommandation (candidate recommendation), est attribuée aux spécifications que le groupe de travail estime achevées et prêtes à être testées. Juste avant de passer à la dernière étape, le document de travail passe par une phase appelée recommandation proposée (Proposed Recommendation). Enfin, si la spécification est testée et ratifiée par le W3C, elle prend le statut de recommandation (recommendation).

Le W3C est composé d'entreprises et d'organisations qui sont concernées par le monde du Web, telles que Microsoft, Apple, la fondation Mozilla, Opera Software, Adobe, IBM, AOL, Google, HP, Sun Microsystems...

Les recommandations n'ont pas de caractère obligatoire, le W3C ne peut pas contrôler la mise en œuvre de ces standards. Il n'a pas ce pouvoir parce que ce sont des sociétés commerciales ou des organisations indépendantes qui vont mettre en œuvre ces standards dans leurs logiciels.

Ces programmes s'appellent "agent utilisateur". Un agent utilisateur est un programme qui met en œuvre une spécification du W3C. Plus spécifiquement au niveau du web, ce sont les navigateurs, mais pas seulement.

Les recommandations ont un intérêt essentiel, celui de permettre une interopérabilité des différents agents utilisateurs et systèmes d'exploitation. En d'autres termes cela permet d'avoir le même comportement et le même affichage quels que soient l'agent utilisateur et le système d'exploitation utilisé. S'il n'y avait pas de norme dans ce domaine, chaque agent utilisateur aurait ses propres normes et modalités d'affichage. Il serait donc nécessaire pour le développeur web de proposer des documents différents pour chaque agent utilisateur.

Il existe actuellement quatre versions des standards CSS : la première version du CSS (CSS 1) est devenue une recommandation en 1996, CSS 2 est devenue une recommandation en 1998, CSS 2.1 après être restée très longtemps en phase de candidate recommendation, est passée en phase de recommandation le 7 juin 2011. Enfin CSS 3 est en cours de rédaction, c'est une version de travail.

  • La spécification CSS 1 a été achevée en décembre 1996. Elle proposait à l'époque une cinquantaine de propriétés qui avaient essentiellement pour objectif de gérer la mise en forme (police, couleurs, taille du texte...). Cette spécification n'aborde alors pas encore les questions de mise en page. Dès 1996 Internet Explorer 3 implémente partiellement ces spécifications. Netscape a suivi le mouvement en 1997 un peu contrainte si elle voulait survivre à la guerre des navigateurs qui se déroulait à cette époque entre les deux navigateurs.
  • La spécification CCS 2 a suivi assez rapidement la précédente : elle est devenue une recommandation en mai 1998. Elle a étendu largement la portée du langage en rajoutant environ 70 propriétés, dont de grandes avancées telles que les propriétés de positionnement, mais aussi les types de média... Cette spécification a été un semi-échec car elle a pris beaucoup de temps pour être implémentée dans les navigateurs. Le W3C a donc revu sa copie avec la spécification CSS 2.1.
  • L'échec de CSS 2 a conduit le W3C à corriger cette spécification avec CSS Level 2 Revision 1 (CCS 2.1). Le groupe de travail a pris cette fois plus de temps puisqu'il s'est lancé dans le travail en 2001 et la spécification CSS 2.1 est devenue une Candidate Recommendation en juillet 2007, statut qu'elle a conservé jusqu'à juin 2011 où elle est devenue une recommandation. Cette spécification a corrigé la précédente sur de nombreux petits points pour mieux coller à la pratique des navigateurs lors de l'implémentation de CSS 2. Mais cette spécification a pris beaucoup de temps pour être implémentée dans les navigateurs : par exemple Internet Explorer 7 l'implémente à 56 %, Firefox 3 à 93 % et Opera 9 à 94 % (15).
  • Le travail sur CSS 3 a débuté dès 1999, et en parallèle à la révision de CSS 2.1. Le W3C a changé sa méthode de travail pour CSS 3 en rendant cette spécification modulaire : c'est-à-dire que cette spécification n'est plus un tout géré de manière uniforme mais est traitée en modules indépendants les uns des autres. Toutes les règles communes à un domaine (comme les sélecteurs, les arrière-plans et bordures, les polices...) sont regroupées dans un module. Les modules sont indépendants les uns des autres, et donc ils se trouvent à différents stades d'avancement en fonction des priorités qui leur sont accordées par le groupe de travail du W3C.
    Vous retrouverez l'état d'avancement de tous ces modules, leur contenu, ainsi que les priorités attribuées à chaque module sur cette page du W3C : CSS : état d'avancement du groupe de travailCSS : état d'avancement du groupe de travail.
    La plupart des modules sont encore à l'état de Working Draft, en conséquence ces spécifications sont encore peu implémentées dans les navigateurs.

Vous trouverez ici les principaux liens utiles sur le site de W3C :

  • les spécifications concernant HTML et XHTML : la spécification HTML 4.01 et la spécification XHTML 1 ;
  • pour tout savoir sur le travail du W3C concernant HTML : page d'accueil du W3C concernant HTML ;
  • les spécifications concernant les CSS 2.1 : http://www.w3.org/TR/REC-CSS2/
  • pour tout savoir sur le travail du W3C concernant les CSS : page d'accueil du W3C concernant les CSS ;
  • le validateur HTML : http://validator.w3.org/ ;
  • le validateur CSS : http://jigsaw.w3.org/css-validator/.

D. Avantages qu'apportent les feuilles de style à la création de sites web

Le CSS apporte de nombreux avantages, notamment :

  • il permet de réduire la quantité de code, et donc de gagner en espace disque et en bande passante. La navigation se fait alors plus rapidement. Cela a aussi l'avantage de faciliter la maintenance ;
  • la présentation est centralisée : il est donc plus facile de modifier rapidement le design, voire d'avoir plusieurs designs au choix de l'utilisateur ;
  • le CSS permet d'adapter son site en fonction du type d'agent utilisateur qui visite le site ;
  • la plupart des navigateurs permettent aussi d'influer de différentes manières sur le code CSS, permettant notamment d'améliorer l'accessibilité des sites web pour les malvoyants.

1. Réduction de la quantité du code

Le CSS réduit la quantité de code nécessaire.

En effet, à l'origine, la mise en forme se trouvait dans le code HTML grâce à certains éléments et attributs aujourd'hui obsolètes (exemple : balises <font> ou <center>, attributs align, size, color, border, bgcolor...). Ceux-ci devaient être répétés chaque fois qu'une mise en forme particulière était requise. Avec CSS, elle se trouve maintenant dans un fichier externe, s'applique à autant de pages (X)HTML que voulu, avec une règle CSS qui peut agir sur un nombre très important d'éléments dans la page avec un minimum d'interventions sur le code (X)HTML. Ce code (X)HTML se voit d'autant réduit de tous ces attributs de présentation.

De même l'utilisation de CSS dans la mise en page à l'aide de <div> allège considérablement le code (X)HTML en y supprimant l'usage des tableaux : outre le fait qu'il faut utiliser au minimum six balises pour faire un tableau ultraminimaliste, là où deux balises <div> suffisent, la présentation en tableaux de designs complexes nécessitait souvent l'utilisation d'un code lourd, avec de nombreux tableaux imbriqués.

Un tableau nécessite un minimum de six balises :
Sélectionnez
<table>
  <tr>
    <td>
Contenu
    </td>
  </tr>
</table>

Tous ces facteurs réunis font que le code (X)HTML est plus léger, on gagne en espace disque, et donc en bande passante.

La navigation est donc plus rapide, d'autant plus que les fichiers CSS sont téléchargés à la première visite d'un site puis mis en cache par le navigateur, qui va ensuite le récupérer du cache au lieu de le télécharger à chaque fois.

Vous pouvez le constater par vous-même avec l'exemple 03 : Mise en page d'une structure XHTML avec l'ancienne méthode des tableaux qui est une reprise de l'exemple numéro 2, mais en n'utilisant cette fois-ci que des attributs de présentation issus du langage HTML sans utilisation, à aucun moment, de CSS.

Pour faire un comparatif :

 | Nombre de lignes | Nombre de caractères | Poids du fichier en octets
Code XHTML + CSS | 126 lignes | 5 330 caractères | 5 580 octets
Code XHTML ancien | 140 lignes | 6 858 caractères | 7 136 octets
Économies faites | 10 % | 22 %

Bien sûr ces chiffres ont l'air relativement faibles, mais il faut les mettre en relation avec la relative simplicité du code pris en exemple. Sur une page web au design complexe les différences se feraient plus sentir.

2. Centralisation de la présentation

Un des grands intérêts du CSS est d'avoir l'ensemble de la présentation d'un site à un seul endroit. En effet le code CSS se retrouvera dans un ou plusieurs fichiers CSS, en fonction de l'organisation, donc séparé du code (X)HTML. Cela en facilite encore une fois la maintenance car si on veut changer un style on n'aura à le modifier que dans un fichier, et non dans l'ensemble des fichiers (X)HTML.

Cela permet aussi de changer le design complet d'un site en modifiant simplement le fichier CSS sans avoir à retoucher l'ensemble du code (X)HTML. Pour aller encore plus loin, en associant le CSS à un langage côté serveur, il est possible d'avoir plusieurs styles CSS pour un même site, grâce à un CSS style switcher, un excellent exemple en est le site CSS Zen Garden, qui montre également toute la puissance du CSS.

Consulter le site CSS Zen Garden pour constater tout ce qu'il est possible de faire avec CSS, et aussi voir ce qu'est un CSS Style Switcher.

3. Adaptation du site en fonction de l'affichage

Le CSS permet d'organiser le design d'un site en fonction du périphérique qui va l'afficher. En spécifiant un type de média, vous pouvez proposer une feuille de style ou un code CSS optimisé pour un affichage sur un écran d'ordinateur (type de média screen), un autre optimisé pour l'impression de la page (type de média print), un autre optimisé pour les appareils disposant d'écrans de taille réduite (type de média handheld), etc.

4. Création de feuilles de style personnalisées

La plupart des navigateurs disposent dans leurs options d'un certain nombre de champs configurables qui vont influer sur la présentation des pages web. Cela concerne principalement la taille et les types de police utilisés par défaut ainsi que les couleurs...

Certains navigateurs permettent également de créer et de mettre en œuvre une feuille de style personnalisée.

Chemin vers les options :
  • Firefox : menu Outils -> Option -> onglet Contenu.
  • Internet Explorer : menu Outils -> Options Internet -> Onglet Général -> Section Apparences -> Boutons Couleurs, Police et Accessibilité.
  • Safari : menu Modifier -> Préférences -> onglet Aspect.
  • Opera : menu Outils -> Préférences -> Pages Web ainsi que Onglet avancé -> Contenu -> bouton Options de style.
  • Google Chrome : bouton Personnaliser -> Options -> Options générales -> bouton "Modifier les paramètres relatifs à la police et à la langue".

Ces options permettent d'influer sur la feuille de style du navigateur et vont permettre d'adapter les sites à vos préférences dans le cas où l'auteur du site n'a pas déclaré de style spécifique pour ces éléments.

Cela peut même aller au-delà : par exemple Internet Explorer (toutes versions), Firefox et Opera permettent de mettre en œuvre votre propre feuille de style... Cela vous permet d'adapter les sites que vous consultez à vos préférences.

La mise en œuvre avec Internet Explorer est assez simple : allez dans les options, sur le bouton Accessibilité, il vous suffit de choisir le fichier css qui vous convient.

Dans Opera, il vous suffit de créer le fichier user.css, dans le dossier suivant (pour Windows) :

Chemin vers le fichier CSS personnalisable de Opera sur Windows :
Sélectionnez

C:\Program Files\Opera\styles\user.css

Ou de choisir votre propre fichier en l'indiquant dans les options.

Pour Firefox il faut accéder au dossier "chrome" se trouvant dans le profil de Firefox, que vous trouverez en règle générale à cet endroit (pour Windows) :

Chemin vers le fichier CSS personnalisable de Firefox sur Windows :
Sélectionnez

C:\Documents and Settings\Nom de l'utilisateur\Application Data\Mozilla\Firefox\Profiles\nom du profil\chrome\

Il faudra alors créer le fichier "userContent.css" et utiliser la syntaxe suivante :

Code à insérer pour sélectionner un site web :
Sélectionnez
@-moz-document url-prefix(http://www.developpez.net/forums/) {
        /* Placez ici le code pour adapter la page */
}

À la suite de url-prefix indiquez l'Uri vers le site ou vers le fichier que vous voulez adapter. Vous pouvez alors indiquer vos règles personnelles entre les accolades.

E. Conventions et contenu de ce cours

Vous trouverez dans cette section les conventions mises en œuvre dans cette série d'articles sur CSS, notamment quant aux exemples.

1. Les exemples

J'illustre mes propos avec le maximum d'exemples. Cependant pour être le plus concis et le plus précis possible, ces exemples sont, pour plus de clarté, extrêmement succincts : seule la partie du code strictement nécessaire à la compréhension de l'exemple sera présente. Tous les autres éléments d'une page web, même minimalistes, comme l'entête, les autres éléments du corps... ne seront pas détaillés dans l'exemple.
En ce qui concerne les exemples de code CSS, lorsque les déclarations ne sont pas nécessaires à la compréhension de l'exemple elles seront remplacées par des termes génériques définissant par la même occasion leur signification : propriété : valeur. Comme dans l'exemple suivant :

Exemple de mise en œuvre des déclarations génériques :
Sélectionnez
div {
        propriété :        valeur;
}

Par contre, la plupart des exemples cités dans le cours seront mis en relation avec un exemple externe, auquel vous pourrez accéder en suivant le lien, et dans lequel vous aurez accès au code de la page complète.

Ces exemples externes suivent ce modèle-type :

  1. le titre de l'exemple ;
  2. l'exemple lui-même avec sa concrétisation pratique ;
  3. un encadré sous l'exemple regroupant deux choses :
    1. d'abord les explications nécessaires à la compréhension de l'exemple : ce qu'il faut savoir, retenir...
    2. et ensuite le code complet de l'exemple avec coloration syntaxique.

Cliquez sur l'image suivante pour la voir en grand :

Voici à quoi ressemble un modèle d'exemple
Voici à quoi ressemble un modèle d'exemple

Tous les exemples sont testés avec les navigateurs suivants (système d'exploitation : Windows XP) :

  • Internet Explorer depuis la version 6 et sauf la version 9 ;
  • Firefox depuis la version 2 ;
  • Opera depuis la version 8.5 ;
  • Safari depuis la version 3 ;
  • Google Chrome.

Les exemples sont tous marqués comme valides XHTML et CSS. Il se peut cependant que ce ne soit pas le cas, essentiellement au motif que je souhaite vous montrer les effets de syntaxes qui ne sont pas valides. Ces exemples seront marqués d'un astérisque (*) rouge présent à côté du logo du W3C pour lequel la validité n'est pas atteinte.

2. Mise en avant des noms d'éléments dans le cours

Pour plus de clarté, différents éléments composant les langages CSS et (X)HTML seront mis en exergue dans le corps des articles, en leur attribuant des couleurs bien distinctes :

  • Les noms d'éléments (X)HTML comme <body> ou <div> seront représentés en bleu.
  • Les noms d'attributs (X)HTML comme class ou name seront représentés en rouge.
  • Les noms des propriétés CSS comme font-weight ou list-style-type seront représentés en vert.
  • Enfin les valeurs du langage (X)HTML et CSS comme 'nomdeclasse' ou '12px' seront représentés entre guillemets simples (') et en noir.

3. Liste des articles liés

Vous trouverez ci-dessous, dans le cadre bleu, la liste des articles de cette série.

Remerciements

Le prochain article sera consacré à faire vos premiers pas dans l'univers du CSS : on verra les différentes syntaxes s'appliquant à une règle CSS. Accédez à cet article : la syntaxe d'une règle CSS.

Tous mes remerciements vont à ClaudeLELOUP pour sa relecture et ses corrections, ainsi qu'à Macmillenium, Bovino et tous les autres membres de l'équipe Web que j'ai oubliés, pour leur soutien.

Commentez cet article : 3 commentaires Donner une note à l'article (5)

Tous les articles de cette série sur CSS :
Le sommaire

Introduction aux CSS
La syntaxe d'une règle CSS

(1)
Qu'est-ce que le ODT : un format utilisé par Open OfficeQu'est ce que le ODT
Qu'est-ce que le XUL : XML-based_User_interface_LanguageQu'est ce que le XUL.
(2)
Pourquoi est-il déconseillé de faire des mises en page à l'aide de tableaux : FAQ HTML-XHTML.
(3)
Voir aussi la définition sur WikipédiaDéfinition d'un EDI sur Wikipédia.
(4)
Ces propriétés ne seront pas abordées ici : Spécifications CSS 2 Spécifications CSS 2 et Module Speech des spécifications CSS 3Module Speech des spécifications CSS 3.
(5)
Liste des principaux moteurs de rendu actuels : http://fr.wikipedia.org/wiki/Moteur_de_rendu_de_pages_web
(6)
Voici un article sur le sujet : Tester ses navigateurs de façon fiable.
(7)
Précisions sur les tests ACID : ACID 1Informations sur le test ACID 1, ACID 2Informations sur le test ACID 2, ACID 3Informations sur le test ACID 3
(8)
Résultats des tests ACID 3 pour les différents navigateurs : résultats des tests ACID 3 pour les navigateursRésultats des tests ACID 3 pour les navigateurs
(9)
Retrouvez ces statistiques sur Wikipédia : http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
(10)
Source Wikipédia : http://en.wikipedia.org/wiki/Internet_Explorer_6#Market_share et http://en.wikipedia.org/wiki/Internet_Explorer#Market_share_history_overview_by_year_and_version.
(11)
Pour plus de renseignements sur les média queries : Le module CSS 3 sur les média queriesLe module CSS 3 sur les média queries
(12)
Pour plus de renseignements sur ces notions : comment servir du XHTML en tant que application/xhtml+xmlComment servir du XHTML en tant que application/xhtml+xml.
(13)
Voir cet article pour plus de renseignements : la guerre des navigateurs.
(14)
Cette fonctionnalité a, semble-t-il, disparu avec la version 10.50.
(15)
Source : http://www.webdevout.net/browser-support-summary


 Tutoriel WEB

La syntaxe d'une règle CSS

  • La syntaxe d'une règle CSS
    • A. Structure d'une règle CSS
      • 1. Sélecteurs
      • 2. Déclarations et blocs de déclarations
    • B. Présentation du code
    • C. Regroupement de sélecteurs
    • D. Commentaires css
    • E. Propriétés raccourcies
      • 1. Explication de la nomenclature du W3C
      • 2. Application à une propriété : la propriété font
      • 3. Le cas des propriétés s'appliquant aux quatre bords d'une boîte
    • F. Les règles at-rules
      • 1. La règle @import
      • 2. La règle @media
      • 3. La règle @charset
      • 4. La règle @font-face
      • 5. La règle @page
  • Remerciements

Ce second article a pour objectif de vous faire découvrir les bases du CSS : vous allez être initié à la syntaxe utilisée dans les feuilles de style.

Cela va consister à étudier en particulier ce qu'est une règle CSS. On va la décortiquer pour vous donner un aperçu de ses principales composantes : les sélecteurs, les blocs de déclarations, les déclarations, les propriétés et les valeurs.

Nous verrons ensuite quelle est l'influence de la présentation du code CSS : c'est-à-dire les effets de la casse du texte, des espaces, tabulations et autres retours à la ligne sur la bonne interprétation du code.

Puis nous aborderons les notions de regroupement des sélecteurs et de propriétés raccourcies. Je vous montrerai comment mettre des commentaires dans une feuille de style, et, enfin, j'aborderai des règles un peu particulières : les règles at-rules.

Cet article est le second d'une série consacrée à CSS, retrouvez les autres articles de cette série dans le sommaire ou dans l'encadré bleu en bas de page.

Tous mes remerciements vont à kdmbella, jacques_jean et à michel.di pour leur relecture et leurs corrections, ainsi qu'à CinePhil, Lcf.vs et tous les autres membres de l'équipe Web que j'ai oubliés, pour leur soutien.

La syntaxe d'une règle CSS

Dans cet article nous allons étudier la structure d'une règle CSS et ses principales composantes que sont les sélecteurs et les déclarations. Nous verrons ensuite l'influence de la présentation du code CSS. Puis on abordera les notions de regroupement des sélecteurs et les propriétés raccourcies. On verra comment mettre des commentaires dans le code CSS. Et, enfin, on étudiera succinctement les règles at-rules.

A. Structure d'une règle CSS

Une feuille de style est structurée en règles CSS. En voici un exemple :

Une règle CSS :
Sélectionnez
div {
        margin :           0px;
        padding :          5px 2px;
        background-color : blue;
}

Une règle CSS se décompose en un sélecteur et une ou plusieurs déclarations appelées bloc de déclaration se trouvant entre les accolades.
Le sélecteur permet d'indiquer à quel élément la règle s'applique. Le bloc de déclaration englobe toutes les déclarations que l'on souhaite voir appliquer au sélecteur indiqué.

Toutes les règles CSS sont donc écrites sur le même modèle : un sélecteur suivi d'une accolade ouvrante ( { ), puis une ou plusieurs déclarations chacune subdivisée entre propriété et valeur, se terminant par un point virgule. Et enfin une accolade fermante ( } ).

Une règle CSS décomposée
Une règle CSS décomposée

1. Sélecteurs

Dans une règle CSS, le sélecteur correspond à la partie du code se trouvant en dehors des accolades. Il a pour rôle d'indiquer au navigateur ce qui doit être mis en forme. Vous allez indiquer le ou les éléments (X)HTML auxquels une règle CSS va s'appliquer.

Deux exemples de sélecteurs :
Sélectionnez
div {
        border :           1px solid blue;
        padding :          10px;
        color :            white;
        background-color : gray;
}
p.paragraphe {
        font-size :        1.6em;
        color :            red;
}

Dans cet exemple, la première règle va attribuer une bordure, des marges internes, la couleur blanche au texte et grise à l'arrière-plan de tous les éléments <div>.
La seconde règle déclare une taille de texte et la couleur rouge pour tous les paragraphes (balises <p> ) possédant l'attribut class avec la valeur 'paragraphe'.

Consultez l'exemple 01 sur le principe des sélecteurs dans une règle CSS.

Je détaillerai l'ensemble des sélecteurs disponibles dans le langage CSS dans un prochain article.

2. Déclarations et blocs de déclarations

Les déclarations sont placées à la suite du sélecteur, entre des accolades. L'ensemble des déclarations d'une règle est appelé "bloc de déclaration".

Un bloc de déclaration est composé d'une ou plusieurs déclarations. Chaque déclaration est constituée de deux éléments : une propriété et une valeur.

Exemple schématique d'une règle CSS :
Sélectionnez
sélecteur {
        propriété :        valeur;
        propriété :        valeur;
}

La propriété est un mot clé CSS permettant de modifier un point précis au niveau du rendu des éléments (X)HTML ciblés par le sélecteur. Par exemple les marges avec le mot clé margin, ou la taille du texte avec le mot clé font-size...

La valeur permet de spécifier une valeur différente que celle appliquée par défaut à la propriété en question.

Voici un exemple concret :

Un exemple de déclaration avec différentes propriétés et valeurs :
Sélectionnez
#contenu {
        position :         relative;
        top :              10px;
        left :             100px;
        width :            70%;
        border :           2px dashed #000000;
        padding :          12px;
        font-size :        1.2em;
        font-weight :      bold;
        background :       url('../images/logo.gif') no-repeat center;
        color :            rgb(125,200,100);
}

Consultez l'exemple 02 sur le principe des déclarations dans une règle CSS.

Vous voyez là aussi que toutes les déclarations sont fondées sur le même modèle : une propriété suivie de deux-points, lui-même suivi d'une valeur (composée d'un ou plusieurs éléments) et se terminant par un point-virgule.
Le point-virgule de fin est optionnel pour la dernière déclaration ; mais là encore il est conseillé de l'indiquer tout de même pour des questions de lisibilité et de maintenance du code.

B. Présentation du code

L'indentation d'une règle CSS, et plus généralement sa mise en forme, est soumise à des règles assez souples : comme dans le code (X)HTML il n'est pas tenu compte des caractères blancs (espaces, tabulations, retours à la ligne...) pour la bonne interprétation du code par l'agent utilisateur. La présentation du code CSS est donc à votre convenance.

Mise en forme d'une règle CSS, exemples valides mais à déconseiller :
Sélectionnez
#ss-err { color :
blue;
        font-size :                             1.4em;
        background
: fuchsia
;
margin :
                50px
 50px
                                                                50px

                50px;
}

L'exemple ci-dessus est par exemple identique à celui-ci :

Mise en forme d'une règle CSS plus lisible :
Sélectionnez
#ss-err {
        color :            blue;
        font-size :        1.4em;
        background :       fuchsia;
        margin :           50px 50px 50px 50px;
}

Ce dernier code est bien mieux organisé que le précédent : cela lui permet d'être plus lisible et plus clair. N'hésitez donc pas à utiliser cette seconde méthode pour écrire votre code.

Ceci n'est pas la seule méthode valable pour présenter son code, il doit exister autant de manières de présenter son code que de développeurs ! Voyons-en quelques-unes des plus usitées :

Diverses manières de mettre en forme du code CSS :
Sélectionnez
#ss-err
{
        color : blue;
        font-size : 1.4em;
        background:fuchsia;
        margin:50px 50px 50px 50px;
}

#ss-err { color: blue;font-size: 1.4em;background: fuchsia;margin: 50px 50px 50px 50px; }

Dans cet exemple les accolades sont toutes deux en début de ligne. Certains vont préférer cette méthode car cela permet de mieux visualiser l'ouverture et la fermeture des accolades de chaque règle. Une autre différence de présentation consiste à ne pas aligner les valeurs entre elles, ou encore à ne pas laisser d'espace entre les deux-points.
La seconde règle de cet exemple met en œuvre une autre méthode qui fait perdre un peu de lisibilité, mais qui a l'avantage de condenser un peu le code. À vous de faire votre choix...

Cependant cette liberté n'est pas totale : vous ne pouvez, par exemple, pas insérer de retour à la ligne, de tabulation ou d'espace pour couper une propriété, ou pour séparer le nombre et l'unité de mesure utilisée...

Ce code est faux et ne fonctionnera pas :
Sélectionnez
#av-err {
        col
or : blue;
        font-  size : 1.4em;
        background : fuch        sia;
        margin : 50px 50px 50 px 50px;
}

Consultez l'exemple 03 sur l'indentation du code.

Le CSS est également, sauf exception, insensible à la casse. Vous pouvez écrire vos règles en majuscules ou en minuscules, même si la convention est d'écrire en minuscules.

Voici un code en majuscules qui est totalement opérationnel :

Une règle CSS en majuscules valide :
Sélectionnez
DIV {
        COLOR :            BLUE;
        FONT-SIZE :        1.3EM;
        BACKGROUND :       FUCHSIA;
        MARGIN :           50PX;
}

Ce principe d'insensibilité à la casse s'applique également au sélecteur lorsque c'est le sélecteur de type qui est employé, c'est-à-dire lorsque nous ciblons une balise (X)HTML. Que vous utilisiez div ou DIV comme sélecteur ne posera aucun problème, les deux seront pris en compte de la même manière.

Par contre sont sensibles à la casse les éléments qui ne sont pas régis par le CSS : cela concerne les noms de classe et d'identifiant, les noms des polices et les adresses URI. Par exemple la classe 'header' n'est pas la même que la classe 'HeaDer' ou encore la classe 'HEADER'.

Le code ci-dessous ne fonctionnera qu'avec un identifiant exactement identique dans le code (X)HTML.

Exemple de code CSS avec un nom d'identifiant en majuscules :
Sélectionnez
#EXCEPTION {
        propriété :        valeur;
}

Cette règle n'aura d'effet que sur le second <div> et non sur le premier :

Exemple de code (X)HTML démontrant la sensibilité à la casse des noms d'id :
Sélectionnez
<div id="exception">
La règle CSS ci-dessus ne s'appliquera pas à ce paragraphe.
</div>

<div id="EXCEPTION">
La règle CSS ci-dessus s'appliquera à ce paragraphe.
</div>

Visualisez ces trois morceaux de code dans l'exemple 04 relatif à la casse du code CSS.

Je vous ai indiqué à l'instant que les noms de police sont sensibles à la casse comme cela ressort des spécifications CSS. Il faut cependant préciser que cette règle n'est pas appliquée de manière stricte par tous les navigateurs.

Exemple de déclarations de nom de police avec différentes casses :
Sélectionnez
#ex11 {
        font-family :      Arial, sans-serif;
}
#ex12 {
        font-family :      arial, sans-serif;
}
#ex13 {
        font-family :      ARiAl, sans-serif;
}

Ces trois règles vont toutes s'appliquer comme vous pouvez le constater dans l'exemple 05 sur l'influence de la casse sur les noms de police.

C. Regroupement de sélecteurs

Il arrive que vous ayez un même bloc de déclarations à appliquer à plusieurs sélecteurs. Alors, au lieu de réécrire plusieurs fois les mêmes déclarations dans la feuille de style, vous pouvez utiliser le regroupement de sélecteurs. Pour ce faire il suffit de mettre les différents sélecteurs à la suite les uns des autres, simplement séparés par une virgule et de placer le bloc de déclaration à la suite comme nous l'avons vu plus haut. La règle s'applique alors à tous les sélecteurs indiqués.

Exemple de regroupement de sélecteurs :
Sélectionnez
p, h2, h3, div {
        border :           1px dashed black;
        color :            #228b22;
        background-color : orange;
}

Dans cet exemple, tous les paragraphes (balise <p>), titres de niveau 2 et 3 (balises <h2> et <h3>) et <div> se voient attribuer une bordure en pointillés de '1px', la même couleur de texte ('#228b22' soit la couleur verte) ainsi que la couleur orange en arrière-plan.

Il suffit qu'un seul des sélecteurs de la liste soit erroné pour invalider le regroupement de sélecteurs et donc l'ensemble de la règle. Le style ne s'appliquera alors à aucun des sélecteurs. Seul Internet Explorer dans ses versions 6 et 7 fait exception à l'application de ce principe.

Un sélecteur peut, par exemple, être erroné lorsqu'on commet une erreur dans l'orthographe d'un sélecteur de type, et plus généralement lorsqu'on écrit mal un des mots-clés utilisés dans les sélecteurs, comme le nom de l'attribut pour le sélecteur d'attribut, ou encore les noms des pseudo-éléments et pseudo-classes.
Dans l'exemple ci-dessous nous allons nous tromper dans l'orthographe du sélecteur de type h2, que nous allons écrire de la manière suivante : h 2 (avec un espace entre les deux caractères). Cela va rendre invalide l'ensemble de la règle, le style ne s'appliquera donc à aucun des sélecteurs présents dans cette règle.

Voir l'exemple 06 sur le regroupement des sélecteurs.

D. Commentaires css

Comme pour le langage (X)HTML, il est possible d'ajouter des commentaires dans les feuilles de style.

Un commentaire est constitué en ouverture d'une barre oblique (/) suivi d'un astérisque (*), puis du texte en commentaire, et en fermeture d'un astérisque suivi d'une barre oblique.

Un exemple de commentaire :
Sélectionnez

/* Ceci est un commentaire */

Tout le texte entre ces caractères (/* */) sera ignoré ; il ne sera par contre pas possible d'insérer dans le texte commenté les caractères astérisque suivi d'une barre oblique.

Exemple de commentaire non valide :
Sélectionnez
/*
Ceci est un commentaire non valide parce que les caractères */ ne sont pas autorisés au sein d'un commentaire
Voyez vous même la coloration syntaxique de cet exemple.
*/

Les commentaires sont multilignes. Il n'existe pas en CSS de commentaire de fin de ligne (1).

Les commentaires sont bien sûr conseillés. Ils permettent par exemple d'expliquer le code, de préciser à quels éléments les règles CSS s'appliquent, de séparer les différentes parties, donc de structurer votre code, etc. Un code commenté permet de le maintenir et de le faire évoluer plus facilement. Enfin les commentaires permettent aussi de tester le code et ainsi de le déboguer. Nous allons voir concrètement comment faire avec des cas pratiques.

Comme indiqué un peu plus haut, les commentaires sont multilignes, ils peuvent donc s'étendre sur plusieurs lignes :

Un commentaire multiligne :
Sélectionnez
/*
        Section sur l'entête du document
    Ceci est un commentaire sur plusieurs lignes
*/

Ils peuvent se retrouver à de nombreux endroits dans le code, par exemple dans une règle :

Un commentaire dans une règle CSS :
Sélectionnez
div {
        text-indent :      2em;
        /* Ceci est un commentaire dans une règle */
        margin :           10px;
}

Dans une déclaration :

Un commentaire dans une déclaration :
Sélectionnez
div {
        border :           1px /* Ceci est un commentaire dans une déclaration */ solid black;
}

Les commentaires permettent également de désactiver une ou plusieurs règles :

Un commentaire désactivant une règle :
Sélectionnez
/*
div {
        font-weight :      bold;
        font-style :       italic;
}
*/

Mais aussi de désactiver une déclaration dans une règle :

Un commentaire désactivant une déclaration :
Sélectionnez
li {
        padding :          0px;
        /* list-style-type : disc; */
}

E. Propriétés raccourcies

Le CSS permet pour un certain nombre de propriétés, de les regrouper en une seule et d'y spécifier toutes leurs valeurs. Cela permet d'avoir un code plus rapide à écrire et plus condensé, donc plus facile à lire, moins lourd et plus rapide à télécharger.

Les principales propriétés qui permettent une écriture abrégée sont les suivantes :

Propriété | Description
font | Concerne les propriétés que l'on peut appliquer aux polices. La propriété font permet de regrouper en une seule les propriétés font-style, font-variant, font-weight, font-size, line-height, et enfin font-family.
background | Concerne les propriétés que l'on peut appliquer à un arrière-plan. La propriété background permet de regrouper en une seule les propriétés background-color, background-image, background-repeat, background-attachment et background-position.
list-style | Concerne les propriétés que l'on peut appliquer aux listes. La propriété list-style permet de regrouper en une seule les propriétés list-style-type, list-style-position et list-style-image.
border | Concerne les propriétés que l'on peut appliquer aux bordures des boîtes, la propriété border va appliquer son style aux quatre côtés des boîtes. Elle permet de regrouper les propriétés border-width, border-style et border-color.
border-width | Concerne l'épaisseur des bordures que l'on peut appliquer aux quatre côtés d'une boîte. La propriété border-width permet de regrouper en une seule les propriétés border-top-width, border-right-width, border-bottom-width et border-left-width.
border-style | Concerne le type de style des bordures que l'on peut appliquer aux quatre côtés d'une boîte. La propriété border-style permet de regrouper en une seule les propriétés border-top-style, border-right-style, border-bottom-style et border-left-style.
border-color | Concerne la couleur des bordures que l'on peut appliquer aux quatre côtés d'une boîte. La propriété border-color permet de regrouper en une seule les propriétés border-top-color, border-right-color, border-bottom-color et border-left-color.
margin | Concerne les propriétés d'espacement que l'on peut appliquer aux quatre bords extérieurs d'une boîte. La propriété margin permet de regrouper en une seule les propriétés margin-top, margin-right, margin-bottom et margin-left.
padding | Concerne les propriétés d'espacement que l'on peut appliquer aux quatre bords intérieurs d'une boîte. La propriété padding permet de regrouper en une seule les propriétés padding-top, padding-right, padding-bottom et padding-left.
outline | Concerne les propriétés que l'on peut appliquer aux contours (autres que des bordures) appliqués aux objets visuels. La propriété outline permet de regrouper en une seule les propriétés outline-color, outline-style et outline-width.

Il ne s'agit pas ici de décrire en détail toutes ces propriétés, mais d'expliquer plutôt le principe de l'écriture abrégée.

Une propriété raccourcie permet de remplacer plusieurs propriétés par une seule qui va accepter toutes les valeurs des propriétés qu'elle remplace. Les différentes valeurs devront être indiquées soit dans un ordre précis, soit dans n'importe quel ordre voulu. De même certaines d'entre elles seront à indiquer obligatoirement, les autres seront alors facultatives.

Pour décrire les propriétés raccourcies nous allons prendre l'exemple de la propriété font, mais avant cela il faut expliciter la nomenclature utilisée pour déclarer les valeurs des propriétés. Enfin nous verrons le cas particulier des propriétés permettant d'appliquer leur style aux quatre côtés des boîtes.

1. Explication de la nomenclature du W3C

Le W3C a introduit une nomenclature pour décrire la manière dont les valeurs des propriétés doivent être déclarées. Cette nomenclature vous servira tout au long de ce cours, et plus encore si vous voulez vous plonger dans les spécifications du W3C.

C'est cette nomenclature que nous allons voir maintenant en prenant quelques exemples de propriétés raccourcies.

La syntaxe de la propriété font :
Sélectionnez

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [/ <'line-height'> ]? <'font-family'>
La syntaxe de la propriété margin :
Sélectionnez

<marge-largeur>{1,4} | inherit

Ces exemples nécessitent les explications suivantes :

  • les crochets [ ] servent aux regroupements ;
  • une barre | distingue deux ou plusieurs options : seule l'une d'entre elles doit survenir ;
  • une barre double || distingue également deux ou plusieurs options, à la différence que l'une de ces options doit survenir et plusieurs peuvent survenir quel que soit leur ordre ;
  • plusieurs mots juxtaposés signifient que tous doivent survenir dans l'ordre donné.

Il existe aussi des modificateurs :

  • un point d'interrogation (?) signifie que ce qui le précède est optionnel ;
  • un astérisque (*) signifie que ce qui le précède peut survenir de zéro à plusieurs fois ;
  • un plus (+) signifie que ce qui le précède survient une ou plusieurs fois ;
  • une paire de nombre entre accolades {A,B} signifie que ce qui précède survient au moins A fois et au plus B fois.

2. Application à une propriété : la propriété font

Pour bien comprendre ce système nous allons décortiquer la propriété raccourcie font qui va permettre de remplacer les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family.

Après ces explications nous pouvons traduire la ligne ci-dessous :

Les propriétés font-style, font-variant et font-weight :
Sélectionnez

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]?

Ceci signifie que ces trois propriétés sont regroupées (du fait des caractères '[ ]'), elles sont facultatives (du fait du caractère '?') et elles ne doivent pas forcément survenir toutes les trois ensemble (du fait des caractères '||') : soit on en indique une, soit deux, soit les trois et ceci dans l'ordre désiré.

La propriété font-size :
Sélectionnez

<'font-size'>

Il faut ensuite indiquer font-size, c'est-à-dire la taille de la police, qui est obligatoire du fait de l'absence du caractère '?'.

La propriété line-height :
Sélectionnez

[/ <'line-height'> ]?

Cette partie n'est pas obligatoire en raison de la présence du point d'interrogation, mais si nous l'indiquons, il faut séparer la valeur de font-size et celle de line-height avec la barre oblique (présence du caractère '/' entre les crochets et avant la propriété line-height).

La propriété font-family :
Sélectionnez

<'font-family'>

Enfin la propriété font-family est obligatoire du fait de l'absence du point d'interrogation.

En résumé, seul font-size et font-family sont obligatoires. Pour les autres valeurs que vous avez omises, elles conservent leur valeur initiale.

Toutes les propriétés en relation avec font :
Sélectionnez
p#exemple {
        font-family :      Arial, Verdana, sans-serif;
        font-size :        1.2em;
        font-weight :      bold;
        font-style :       italic;
        font-variant :     normal;
        line-height :      1.5em;
}

Cet exemple se réduira à ceci en utilisant les propriétés abrégées :

Les propriétés en relation avec font réunies en une seule :
Sélectionnez
p#exemple {
        font :             italic bold 1.2em/1.5em Arial, Verdana, sans-serif;
}

Vous remarquerez que la propriété font-variant, qui a la valeur 'normal' dans le premier exemple, n'est pas présente dans la propriété raccourcie et ce pour la simple raison qu'elle a la valeur par défaut. Dans ce cas il n'est pas nécessaire de spécifier explicitement la valeur par défaut : une propriété absente dans la propriété raccourcie prend automatiquement sa valeur par défaut. Et cette valeur par défaut trouvera à s'appliquer même si une valeur contraire est appliquée à l'élément via l'héritage.

Voir l'exemple 07 sur les propriétés raccourcies : exemples avec la propriété font.

3. Le cas des propriétés s'appliquant aux quatre bords d'une boîte

D'autres propriétés raccourcies s'appliquent directement aux boîtes que vont créer les balises (X)HTML. Elles sont particulières dans le sens où les propriétés peuvent avoir jusqu'à quatre valeurs différentes s'appliquant aux quatre côtés de ces boîtes. Il faut donc expliquer comment vont se répartir ces valeurs entre les quatre côtés.

Cela concerne les propriétés raccourcies margin, padding, ainsi que border-width, border-style et border-color.

Ces propriétés acceptent de une à quatre valeurs :

  • pour la propriété margin : ce sont les propriétés margin-top, margin-left, margin-bottom et margin-right ;
  • pour la propriété padding : ce sont les propriétés padding-top, padding-left, padding-bottom et padding-right ;
  • pour la propriété border-color : ce sont des valeurs de couleur ou la valeur transparent (de une à quatre valeurs) ;
  • pour la propriété border-style : ce sont des valeurs de style (de une à quatre valeurs) ;
  • pour la propriété border-width : ce sont des valeurs d'épaisseur (de une à quatre valeurs).

Les valeurs sont spécifiées dans l'ordre horaire en partant de midi. Vous pouvez vous référer à la liste ci-dessus indiquant les propriétés qui sont regroupées dans la propriété raccourcie : on indique d'abord la valeur s'appliquant à 'top' (haut), puis 'right' (droite), puis 'bottom' (bas) et enfin 'left' (gauche).

Prenons l'exemple de la propriété border-color parce qu'elle permet de très bien distinguer les côtés en fonction des couleurs appliquées :

Indication de quatre valeurs :
Sélectionnez
div {
        border-color :     red blue green yellow;
}

Si vous indiquez quatre valeurs : la première vaut pour le haut, la seconde pour la droite, la troisième pour le bas et la quatrième pour la gauche.

Répartition de 4 valeurs
Quatre valeurs
Indication de trois valeurs :
Sélectionnez
div {
        border-color :     red blue green;
}

Si vous indiquez trois valeurs : la première vaut pour le haut, la seconde pour la droite et la gauche, la troisième vaut pour le bas.

Répartition de 3 valeurs
Trois valeurs
Indication de deux valeurs :
Sélectionnez
div {
        border-color :     red blue;
}

Si vous indiquez deux valeurs : la première vaut pour le haut et le bas, la seconde pour la droite et la gauche.

Répartition de 2 valeurs
Deux valeurs
Indication d'une valeur :
Sélectionnez
div {
        border-color :     red;
}

Si vous indiquez une valeur : elle vaut pour les quatre côtés.

Répartition de 1 valeur
Une valeur

Consultez l'exemple 08 sur les propriétés raccourcies s'appliquant aux bordures des boîtes.

Cette répartition dans le sens des aiguilles d'une montre ne concerne pas seulement la propriété border-color, mais s'applique à l'ensemble des propriétés listées ci-dessus : margin, padding, ainsi que border-width, border-style et bien sûr border-color.

F. Les règles at-rules

Les règles at-rules sont des règles spécifiques qui débutent par le caractère arobase (@) suivi d'un identifiant. Elles permettent de regrouper un ensemble de règles qui vont s'appliquer à des domaines spécifiques.

Ces règles sont au nombre de cinq :

  • la règle @import qui permet de gérer l'importation de fichiers css ;
  • la règle @media qui permet d'appliquer des règles css à un type de média précis ;
  • la règle @charset qui permet de définir un encodage au fichier css ;
  • la règle @font-face qui permet d'insérer une police externe ;
  • la règle @page qui permet d'appliquer des styles aux médias paginés.

1. La règle @import

La règle @import permet, en lieu et place de la balise <link>, de lier des feuilles de style à un document (X)HTML. Elle peut tout autant être insérée dans le fichier (X)HTML que dans un fichier CSS.

Cette règle sera étudiée dans le prochain article.

2. La règle @media

La règle @media permet d'appliquer un ensemble de règles en fonction du type d'agent utilisateur qui va afficher la page. Ce peut être un navigateur (média 'screen'), l'impression de la page web (média 'print'), un synthétiseur vocal (média 'speech')...

Ainsi dans l'exemple suivant, toutes les règles déclarées à l'intérieur de la règle @media ne vont s'appliquer que si vous imprimez la page :

Mise en œuvre de la règle @media pour l'impression des pages :
Sélectionnez
@media print {
        #menu {
                display :      none;
                border :       0 none;
        }
        p {
                background-color : none;
        }
}

3. La règle @charset

La règle @charset permet de déclarer le codage qui est utilisé dans le fichier CSS extérieur. Précisez le au début du fichier CSS externe et de la manière suivante :

La règle @charset, premier exemple :
Sélectionnez
@charset "UTF-8";

/* Les différentes déclarations CSS */
La règle @charset, second exemple :
Sélectionnez
@charset "ISO-8859-15";

/* Les différentes déclarations CSS */

Cette règle ne doit s'appliquer qu'aux fichiers CSS externes et non aux règles intégrées dans un fichier (X)HTML car elle est inutile dans ce cas (les navigateurs Safari et Google Chrome peuvent même rencontrer des soucis dans ce cas d'utilisation). Vous ne pourrez indiquer qu'une seule règle @charset par fichier CSS.

De même que la règle @import, cette règle at-rule doit être la première du document. Il ne doit y avoir ni ligne, ni aucun caractère avant, cela inclut également les commentaires qui sont donc également interdits.

Vous pouvez retrouver la liste des codages autorisés ici : liste des codages autorisésliste des codages autorisés par l'IANA.

4. La règle @font-face

La règle @font-face permet d'afficher une police originale sur votre site Internet. En principe pour que la police que vous avez choisie grâce à la propriété font-family s'affiche effectivement, il faut qu'elle soit présente sur l'ordinateur du visiteur.

Pour mettre un terme à cette limitation nous avons à notre disposition la règle at-rule @font-face, qui permet d'appeler une police que vous aurez au préalable placée sur le serveur et qui sera téléchargée sur le poste local (mise en cache).

Un exemple d'utilisation de @font-face :
Sélectionnez
@font-face {
        font-family :      nom-dappel;
        src :              url(nom-police-sur-le-serveur.eot);
}

/* appel à cette police pour les paragraphes : */
p {
        font-family :      nom-dappel;
}

La propriété font-family, dans le cadre de la règle @font-face, sert à attribuer un nom quelconque à la police. Ce nom servira dans le document pour faire appel à cette police, comme vous le montre l'exemple ci-dessus dans la règle s'appliquant au paragraphe. La propriété src sert à indiquer le chemin vers le fichier de police se trouvant sur le serveur.

5. La règle @page

La règle @page est destinée aux médias paginés, et permet donc d'appliquer un style spécifique aux pages Web en mode impression. Dans cette configuration le modèle de mise en forme visuel est quelque peu modifié par la création d'un nouveau modèle de boîte : la boîte de page. Ce nouveau modèle de boîte permet de gérer les différents aspects spécifiques à une page qui sont de pouvoir déterminer la taille de la page, ses marges, les sauts de page...

Un exemple d'utilisation de la règle @page :
Sélectionnez
@page {
        size :             16cm 20cm;
        margin :           1cm;
}


Feuilles de style en cascade, niveau 2

Recommandation CSS2 du W3C en version française

Statut du document traduit

Ceci est une traduction de la Recommandation du W3C portant sur le deuxième niveau de l'implémentation des feuilles de style pour le Web (Cascading Style Sheets, level 2).

Cependant ce n'est pas la version officielle en français de la Recommandation. Seul le document original en anglais a valeur de norme. On peut l'obtenir à : http://www.w3.org/TR/1998/REC-CSS2-19980512.

Avertissement

Des erreurs ont pu survenir malgré le soin apporté à ce travail.

Notes sur la traduction

Certains concepts sont difficiles à rendre en français ou peuvent nécessiter une explication, aussi les expressions originales en anglais viennent parfois en renfort dans le texte sous cette forme :
ex. traduction [ndt. translation]

Cette version française intègre toutes les corrections survenues depuis la première parution de la recommandation en 1998. Elle est ainsi à jour en date du 12 février 2003 (voir la liste des dernières modifications à l'adresse http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html).

  • Adresse : <http://www.yoyodesign.org/doc/w3c/css2/cover.html>
  • Traducteur : J.J.SOLARI <jjsolari@pobox.com>
  • Correcteurs : Éric SCHREINER, Samuel LELIÈVRE, Gilles ACCAD, lourdet, Daniel GLAZMAN
  • Date de traduction : 27 septembre 2001
  • Dernière entrée dans l'errata : 29 octobre 2002
  • Dernière mise à jour : 12 février 2003

Archives compressées et autres formats

Cette traduction est disponible sous forme d'archive compressée et, le cas échéant, dans d'autres formats à l'adresse http://www.yoyodesign.org/doc/w3c/w3c.html.

Autres documents traduits

On peut consulter les traductions en français d'autres documents du W3C à
http://www.w3.org/Consortium/Translation/French

Notice légale

Copyright © 1994-2001 World Wide Web Consortium,
(Massachusetts Institute of Technology,
Institut National de Recherche en Informatique et en Automatique,
Keio University).
Tous droits réservés. Consulter la notice de copyright pour les productions du W3C.

W3C REC-CSS2-19980512

Les feuilles de style en cascade, niveau 2
Spécification CSS2

Recommandation du W3C du 12 mai 1998
Cette version :
http://www.w3.org/TR/1998/REC-CSS2-19980512
Dernière version :
http://www.w3.org/TR/REC-CSS2
Version précédente :
http://www.w3.org/TR/1998/PR-CSS2-19980324
Éditeurs :
Bert Bos <bbos@w3.org>
Håkon Wium Lie <howcome@w3.org>
Chris Lilley <chris@w3.org>
Ian Jacobs <ij@w3.org>

Résumé

Cette spécification définit CSS2 : les feuilles de style en cascade, niveau 2. CSS2 est un langage de feuille de style qui permet aux auteurs et aux lecteurs de lier du style (ex. les polices de caractères, l'espacement et un signal auditif) aux documents structurés (ex. documents HTML et applications XML). En séparant la présentation du style du contenu des documents, CSS2 simplifie l'édition pour le Web et la maintenance d'un site.

CSS2 est construit sur CSS1 (voir [CSS1]), ainsi toute feuille de style valide en CSS1 est également valide en CSS2 à très peu d'exceptions près. CSS2 prévoit des feuilles de style liées à un média spécifique ce qui autorise les auteurs à présenter des documents sur mesure pour les navigateurs visuels, les synthétiseurs de parole, les imprimantes, les lecteurs en Braille, les appareils portatifs, etc. Cette spécification introduit aussi les notions de positionnement du contenu, de téléchargement des polices, de mise en forme des tables, de fonctions d'internationalisation, de compteurs et de numérotage automatiques et quelques propriétés concernant l'interface utilisateur.

Statut de ce document

Ce document a été corrigé par les membres du W3C et d'autres parties intéressées et le Directeur l'a approuvé comme Recommandation du W3C. C'est un document stable qui peut être utilisé comme matériel de référence ou cité comme norme de référence par un autre document. En produisant cette Recommandation, le W3C entend attirer l'attention sur une spécification et en promouvoir un large déploiement. Ceci multiplie la fonctionnalité et l'interopérabilité du Web.

Une liste des Recommandations actuelles du W3C et d'autres documents techniques peut être trouvée à http://www.w3.org/TR.

Les discussions publiques sur les fonctions de CSS ont lieu sur la liste www-style@w3.org.

Formats disponibles

La spécification CSS2 est disponible dans les formats suivants :

HTML :
http://www.w3.org/TR/1998/REC-CSS2-19980512
fichier texte entier :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt,
HTML sous la forme d'un fichier compressé .tgz :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz,
HTML sous la forme d'un fichier .zip (ce n'est pas un fichier '.exe') :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip,
sous la forme d'un fichier PostScript .ps.gz :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz,
et sous la forme d'un fichier PDF :
http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.

Pour toute contestation sur les diverses formes de la spécification, on considère http://www.w3.org/TR/1998/REC-CSS2-19980512 le lieu de la version définitive.

Langues disponibles

La version anglaise de la spécification est la seule version officielle. Cependant, pour des versions traduites en d'autres langues voir http://www.w3.org/Style/css2-updates/translations.html.

Errata

La liste des erreurs connues de cette spécification se trouve à http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html. Merci de faire part d'erreurs éventuelles dans ce document à css2-editors@w3.org.

Sommaire général

  • 1 À propos de la spécification CSS2
  • 2 Introduction à CSS2
  • 3 La conformité : obligations et recommandations
  • 4 La syntaxe de CSS2 et les types de données de base
  • 5 Les sélecteurs
  • 6 L'assignation des valeurs des propriétés, la cascade et l'héritage
  • 7 Les types de médias
  • 8 Le modèle des boîtes
  • 9 Le modèle de mise en forme visuel
  • 10 Détails du modèle de mise en forme visuel
  • 11 Le rendu visuel
  • 12 Le contenu généré, le numérotage automatique et les listes
  • 13 Les médias paginés
  • 14 Les couleurs et les arrière-plans
  • 15 Les polices
  • 16 Le texte
  • 17 Les tables
  • 18 L'interface utilisateur
  • 19 Les feuilles de style auditives
  • Appendice A : Un exemple de feuille de style pour HTML 4.0
  • Appendice B : Changements depuis CSS1
  • Appendice C : Mise en œuvre et notes d'évaluation des polices
  • Appendice D : La grammaire de CSS2
  • Appendice E : Références
  • Appendice F : Index des propriétés
  • Appendice G : Index des descripteurs
  • Appendice H : Index

Sommaire détaillé

  • 1 À propos de la spécification CSS2
    • 1.1 Lire la spécification
    • 1.2 Organisation de la spécification
    • 1.3 Conventions
      • 1.3.1 Les conventions pour les éléments et attributs dans le langage du document
      • 1.3.2 La définition des propriétés CSS
        • Valeur
        • Valeur initiale
        • S'applique à
        • Héritée
        • Pourcentage
        • Groupe de médias
      • 1.3.3 Les propriétés raccourcies
      • 1.3.4 Les notes et les exemples
      • 1.3.5 Les images et les descriptions longues
    • 1.4 Remerciements
    • 1.5 Notice de copyright
  • 2 Introduction à CSS2
    • 2.1 Un bref tutoriel de CSS2 pour HTML
    • 2.2 Un bref tutoriel de CSS2 pour XML
    • 2.3 Le modèle de traitement de CSS2
      • 2.3.1 Le canevas
      • 2.3.2 Le modèle d'adressage de CSS2
    • 2.4 Les principes de construction de CSS
  • 3 La conformité : obligations et recommandations
    • 3.1 Définitions
    • 3.2 La conformité
    • 3.3 Les conditions d'erreur
    • 3.4 Le type de contenu text/css
  • 4 La syntaxe de CSS2 et les types de données de base
    • 4.1 La syntaxe
      • 4.1.1 L'atomisation
      • 4.1.2 Les mots-clés
      • 4.1.3 Les caractères et la casse
      • 4.1.4 Les déclarations
      • 4.1.5 Les règles-at
      • 4.1.6 Les blocs
      • 4.1.7 Les jeux de règles, les blocs de déclaration et les sélecteurs
      • 4.1.8 Les déclarations et les propriétés
      • 4.1.9 Les commentaires
    • 4.2 Les règles de traitement des erreurs d'interprétation
    • 4.3 Les valeurs
      • 4.3.1 Les entiers et les nombres
      • 4.3.2 Les longueurs
      • 4.3.3 Les pourcentages
      • 4.3.4 URL + URN = URI
      • 4.3.5 Les compteurs
      • 4.3.6 Les couleurs
      • 4.3.7 Les angles
      • 4.3.8 Les durées
      • 4.3.9 Les fréquences
      • 4.3.10 Les chaînes
    • 4.4 La représentation du document par CSS
      • 4.4.1 La référence aux caractères absents d'un encodage
  • 5 Les sélecteurs
    • 5.1 La reconnaissance d'un motif
    • 5.2 La syntaxe des sélecteurs
      • 5.2.1 Le regroupement
    • 5.3 Le sélecteur universel
    • 5.4 Les sélecteurs de type
    • 5.5 Les sélecteurs descendants
    • 5.6 Les sélecteurs d'enfant
    • 5.7 Les sélecteurs d'enfants adjacents
    • 5.8 Les sélecteurs d'attribut
      • 5.8.1 La correspondance entre les attributs et leurs valeurs
      • 5.8.2 Les valeurs par défaut des attributs dans les DTDs
      • 5.8.3 Les sélecteurs de classe
    • 5.9 Les sélecteurs d'ID
    • 5.10 Les pseudo-éléments et les pseudo-classes
    • 5.11 Les pseudo-classes
      • 5.11.1 La pseudo-classe :first-child
      • 5.11.2 Les pseudo-classes d'ancre : :link et :visited
      • 5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus
      • 5.11.4 La pseudo-classe de langue : :lang
    • 5.12 Les pseudo-éléments
      • 5.12.1 Le pseudo-élément :first-line
      • 5.12.2 Le pseudo-élément :first-letter
      • 5.12.3 Les pseudo-éléments :before et :after
  • 6 L'assignation des valeurs des propriétés, la cascade et l'héritage
    • 6.1 Les valeurs spécifiées, calculées et réelles
      • 6.1.1 Les valeurs spécifiées
      • 6.1.2 Les valeurs calculées
      • 6.1.3 Les valeurs réelles
    • 6.2 L'héritage
      • 6.2.1 La valeur 'inherit'
    • 6.3 La règle @import
    • 6.4 La cascade
      • 6.4.1 L'ordre de cascade
      • 6.4.2 Les règles avec la valeur !important
      • 6.4.3 Le calcul de la spécificité d'un sélecteur
      • 6.4.4 L'ordre de priorité des indications de présentation en dehors de CSS
  • 7 Les types de médias
    • 7.1 Introduction aux types de médias
    • 7.2 La spécification des feuilles de style en fonction du média
      • 7.2.1 La règle @media
    • 7.3 Les types de médias reconnus
      • 7.3.1 Les groupes de médias
  • 8 Le modèle des boîtes
    • 8.1 Les dimensions des boîtes
    • 8.2 Exemples de marges, d'espacements et de bordures
    • 8.3 Les propriétés de marge : 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' et 'margin'
      • 8.3.1 La fusion des marges
    • 8.4 Les propriétés d'espacement : 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' et 'padding'
    • 8.5 Les propriétés de bordure
      • 8.5.1 L'épaisseur de bordure : les propriétés 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' et 'border-width'
      • 8.5.2 La couleur de bordure : les propriétés 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' et 'border-color'
      • 8.5.3 Le style de bordure : les propriétés 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' et 'border-style'
      • 8.5.4 Les propriétés raccourcies de bordure : 'border-top', 'border-bottom', 'border-right', 'border-left' et 'border'
  • 9 Le modèle de mise en forme visuel
    • 9.1 Introduction au modèle de mise en forme visuel
      • 9.1.1 La zone de visualisation
      • 9.1.2 Les blocs conteneurs
    • 9.2 Le contrôle de la génération de la boîte
      • 9.2.1 Les éléments de type bloc et leurs boîtes
        • Les boîtes de bloc anonymes
      • 9.2.2 Les éléments de type en-ligne et leurs boîtes
        • Les boîtes en-ligne anonymes
      • 9.2.3 Les boîtes compactes
      • 9.2.4 Les boîtes en enfilade
      • 9.2.5 La propriété 'display'
    • 9.3 Les schémas de positionnement
      • 9.3.1 Le choix d'un schéma de positionnement : la propriété 'position'
      • 9.3.2 Les décalages des boîtes : les propriétés 'top', 'right', 'bottom', 'left'
    • 9.4 Le flux normal
      • 9.4.1 Le contexte de mise en forme bloc
      • 9.4.2 Le contexte de mise en forme en-ligne
      • 9.4.3 Le positionnement relatif
    • 9.5 Les flottants
      • 9.5.1 Le positionnement des flottants : la propriété 'float'
      • 9.5.2 Le contrôle du flux autour des flottants : la propriété 'clear'
    • 9.6 Le positionnement absolu
      • 9.6.1 Le positionnement fixe
    • 9.7 Les relations entre les propriétés 'display', 'position' et 'float'
    • 9.8 Comparaison entre les positionnements en flux normal, flottant et absolu
      • 9.8.1 Le flux normal
      • 9.8.2 Le positionnement relatif
      • 9.8.3 Faire flotter une boîte
      • 9.8.4 Le positionnement absolu
    • 9.9 La présentation en couches
      • 9.9.1 La spécification du niveau dans l'empilement : la propriété 'z-index'
    • 9.10 Le sens du texte : les propriétés 'direction' et 'unicode-bidi'
  • 10 Détails du modèle de mise en forme visuel
    • 10.1 La définition du "bloc conteneur"
    • 10.2 La largeur du contenu : la propriété 'width'
    • 10.3 Le calcul des largeurs et des marges
      • 10.3.1 Les éléments de type en-ligne non remplacés
      • 10.3.2 Les éléments de type en-ligne remplacés
      • 10.3.3 Les éléments de type bloc non remplacés dans un flux normal
      • 10.3.4 Les éléments de type bloc remplacés dans un flux normal
      • 10.3.5 Les éléments flottants non remplacés
      • 10.3.6 Les éléments flottants remplacés
      • 10.3.7 Les éléments non remplacés en position absolue
      • 10.3.8 Les éléments remplacés en position absolue
    • 10.4 Les largeurs minimales et maximales : 'min-width' et 'max-width'
    • 10.5 La hauteur du contenu : la propriété 'height'
    • 10.6 Le calcul des hauteurs et des marges
      • 10.6.1 Les éléments de type en-ligne non remplacés
      • 10.6.2 Les éléments de types en-ligne et bloc remplacés dans un flux normal et éléments flottants remplacés
      • 10.6.3 Les éléments de type bloc non remplacés dans un flux normal et éléments flottants non remplacés
      • 10.6.4 Les éléments non remplacés en position absolue
      • 10.6.5 Les éléments remplacés en position absolue
    • 10.7 Les hauteurs minimales et maximales : 'min-height' and 'max-height'
    • 10.8 Le calcul de la hauteur de ligne : les propriétés 'line-height' et 'vertical-align'
      • 10.8.1 L'interlignage et le demi-interlignage
  • 11 Les effets visuels
    • 11.1 Le débordement et le rognage
      • 11.1.1 Le débordement : la propriété 'overflow'
      • 11.1.2 Le rognage : la propriété 'clip'
    • 11.2 La visibilité : la propriété 'visibility'
  • 12 Le contenu généré, le numérotage automatique et les listes
    • 12.1 Les pseudo-éléments :before et :after
    • 12.2 La propriété 'content'
    • 12.3 L'interaction de :before et :after avec les éléments ayant les valeurs 'compact' et 'run-in'
    • 12.4 Les guillemets
      • 12.4.1 Spécifier des guillemets avec la propriété 'quotes'
      • 12.4.2 Insérer des guillemets avec la propriété 'content'
    • 12.5 Compteurs et numérotage automatiques
      • 12.5.1 Les compteurs imbriqués et leur portée
      • 12.5.2 Les styles des compteurs
      • 12.5.3 Les compteurs dans les éléments avec 'display: none'
    • 12.6 Les marqueurs et les listes
      • 12.6.1 Les marqueurs : la propriété 'marker-offset'
      • 12.6.2 Les listes : les propriétés 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'
  • 13 Les médias paginés
    • 13.1 Introduction aux médias paginés
    • 13.2 Les boîtes de page : la règle @page
      • 13.2.1 Les marges de la page
      • 13.2.2 La taille de la page : la propriété 'size'
        • Le rendu d'une boîte de page qui ne tient pas sur une feuille cible
        • Le positionnement de la boîte de la page sur la feuille
      • 13.2.3 Les repères de coupe : la propriété 'marks'
      • 13.2.4 Les pages de gauche, de droite et de couverture
      • 13.2.5 Le contenu en dehors de la boîte de page
    • 13.3 Les sauts de page
      • 13.3.1 Les propriétés de coupure avant et après : 'page-break-before', 'page-break-after', 'page-break-inside'
      • 13.3.2 L'utilisation des pages nommées : 'page'
      • 13.3.3 Les coupures à l'intérieur des éléments : 'orphans', 'widows'
      • 13.3.4 Les sauts de page permis
      • 13.3.5 Les sauts de page forcés
      • 13.3.6 Les sauts de page "au mieux"
    • 13.4 La cascade dans un contexte de page
  • 14 Les couleurs et les arrière-plans
    • 14.1 La couleur d'avant-plan : la propriété 'color'
    • 14.2 L'arrière plan
      • 14.2.1 Les propriétés d'arrière-plan : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' et 'background'
    • 14.3 La correction du gamma
  • 15 Les polices
    • 15.1 Introduction
    • 15.2 La spécification des polices
      • 15.2.1 Les propriétés de spécification de police
      • 15.2.2 La famille de polices : la propriété 'font-family'
      • 15.2.3 Le style de police : les propriétés 'font-style', 'font-variant', 'font-weight' et 'font-stretch'
      • 15.2.4 La taille de police : les propriétés 'font-size' et 'font-size-adjust'
      • 15.2.5 La propriété raccourcie de police : la propriété 'font'
      • 15.2.6 Les familles de polices génériques
        • serif
        • sans-serif
        • cursive
        • fantasy
        • monospace
    • 15.3 La sélection des polices
      • 15.3.1 Les descriptions des polices et @font-face
      • 15.3.2 Les descripteurs de sélection de police : 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' et 'font-size'
      • 15.3.3 Le descripteur de qualification des données de police : 'unicode-range'
      • 15.3.4 Le descripteur des valeurs numériques : 'units-per-em'
      • 15.3.5 Le descripteur de référencement : 'src'
      • 15.3.6 Les descripteurs de correspondance : 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' et 'descent'
      • 15.3.7 Les descripteurs de synthèse : 'widths', 'bbox' et 'definition-src'
      • 15.3.8 Les descripteurs d'alignement : 'baseline', 'centerline', 'mathline' et 'topline'
      • 15.3.9 Exemples
    • 15.4 Les caractéristiques des polices
      • 15.4.1 Introduction aux caractéristiques des polices
      • 15.4.2 Le nom entier d'une police
      • 15.4.3 Les unités de coordonnée dans le carré em
      • 15.4.4 La ligne de base centrale
      • 15.4.5 L'encodage des polices
      • 15.4.6 Le nom de famille de polices
      • 15.4.7 Les dimensions des glyphes
      • 15.4.8 L'épaisseur de tige horizontale
      • 15.4.9 La hauteur des glyphes majuscules
      • 15.4.10 La hauteur des glyphes minuscules
      • 15.4.11 La ligne de base inférieure
      • 15.4.12 La ligne de base mathématique
      • 15.4.13 La boîte de circonscription maximale
      • 15.4.14 La hauteur maximale sans accent
      • 15.4.15 La profondeur maximale sans accent
      • 15.4.16 Le nombre Panose-1
      • 15.4.17 L'étendue des caractères ISO 10646
      • 15.4.18 La ligne de base supérieure
      • 15.4.19 L'épaisseur de tige verticale
      • 15.4.20 L'angle d'inclinaison vertical
    • 15.5 L'algorithme de correspondance de police
      • 15.5.1 Les correspondances entre valeurs de graisse et les noms de police
      • 15.5.2 Exemples de correspondances de police
  • 16 Le texte
    • 16.1 L'alinéa : la propriété 'text-indent'
    • 16.2 L'alignement : la propriété 'text-align'
    • 16.3 La décoration
      • 16.3.1 Trait en-dessous, trait au-dessus, rayure et clignotement : la propriété 'text-decoration'
      • 16.3.2 Les ombrages de texte : la propriété 'text-shadow'
    • 16.4 L'interlettrage et l'espace-mot : les propriétés 'letter-spacing' et 'word-spacing'
    • 16.5 La capitalisation : la propriété 'text-transform'
    • 16.6 Les blancs : la propriété 'white-space'
  • 17 Les tables
    • 17.1 Introduction aux tables
    • 17.2 Le modèle de table de CSS
      • 17.2.1 Les objets de table anonymes
    • 17.3 Les sélecteurs de colonne
    • 17.4 Les tables dans le modèle de mise en forme visuel
      • 17.4.1 La position et l'alignement de la légende
    • 17.5 La disposition visuelle des contenus de la table
      • 17.5.1 Les couches de la table et la transparence
      • 17.5.2 Les algorithmes de largeur de table : la propriété 'table-layout'
        • La disposition de table fixe
        • La disposition de table automatique
      • 17.5.3 Les algorithmes de la hauteur de table
      • 17.5.4 L'alignement horizontal dans une colonne
      • 17.5.5 Les effets dynamiques des rangées et colonnes
    • 17.6 Les bordures
      • 17.6.1 Le modèle des bordures séparées
        • Les bordures autour des cellules vides : la propriété 'empty-cells'
      • 17.6.2 Le modèle des bordures fusionnées
        • La résolution des conflits de bordure
      • 17.6.3 Les styles de bordure
    • 17.7 Le rendu auditif des tables
      • 17.7.1 Les en-têtes parlées : la propriété 'speak-header'
  • 18 L'interface utilisateur
    • 18.1 Les curseurs : la propriété 'cursor'
    • 18.2 Les préférences de couleur de l'utilisateur
    • 18.3 Les préférences de police de l'utilisateur
    • 18.4 Les contours dynamiques : la propriété 'outline'
      • 18.4.1 Les contours et la sélection [ndt. focus]
    • 18.5 Le grossissement
  • 19 Les feuilles de styles auditives
    • 19.1 Introduction aux feuilles de styles auditives
    • 19.2 La propriété de volume : 'volume'
    • 19.3 La propriété de parole : 'speak'
    • 19.4 Les propriétés de pause : 'pause-before', 'pause-after' et 'pause'
    • 19.5 Les propriétés de signal : 'cue-before', 'cue-after' et 'cue'
    • 19.6 La propriété de mixage : 'play-during'
    • 19.7 Les propriétés spatiales : 'azimuth' et 'elevation'
    • 19.8 Les propriétés des caractéristiques des voix : 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' et 'richness'
    • 19.9 Les propriétés de diction : 'speak-punctuation' et 'speak-numeral'
  • Appendice A : Un exemple de feuille de style pour HTML 4.0
  • Appendice B : Les changements depuis CSS1
    • B.1 Les nouvelles fonctionnalités
    • B.2 La mise à jour des descriptions
    • B.3 Les changements sémantiques depuis CSS1
  • Appendice C : Les notes pour l'implémentation et la mise en œuvre des polices
    • C.1 Un glossaire pour les polices
    • C.2 Le téléchargement des polices
    • C.3 La signification des chiffres Panose
    • C.4 La déduction des étendues Unicode pour TrueType
    • C.5 La génération automatique des descripteurs
  • Appendice D : La grammaire de CSS2
    • D.1 La grammaire
    • D.2 Le scanner lexical
    • D.3 La comparaison entre les atomisations de CSS2 et CSS1
  • Appendice E : Références
    • E.1 Les références normatives
    • E.2 Les références informatives
  • Appendice F : Index des propriétés
  • Appendice G : Index des descripteurs
  • Appendice H : Index

Copyright © 1998 W3C (MIT, INRIA, Keio ), Tous droits réservés.


À propos de la spécification CSS2

1 À propos de la spécification CSS2

  • 1.1 Lire la spécification
  • 1.2 Organisation de la spécification
  • 1.3 Conventions
    • 1.3.1 Les conventions pour les éléments et attributs dans le langage du document
    • 1.3.2 Les définitions des propriétés CSS
      • Valeur
      • Valeur initiale
      • S'applique à
      • Héritée
      • Pourcentage
      • Médias
    • 1.3.3 Les propriétés raccourcies
    • 1.3.4 Les notes et exemples
    • 1.3.5 Les images et les descriptions longues
  • 1.4 Remerciements
  • 1.5 Notice de copyright

1.1 Lire la spécification

La rédaction de cette spécification tient compte de deux types de lecteurs : les auteurs de feuilles de style et les personnes chargées de leur implémentation. Nous espérons que la spécification fournira aux auteurs les moyens d'écrire des documents efficaces, attractifs et accessibles, sans pour autant les noyer dans le détail de la mise en œuvre des CSS. Cependant, les maîtres d'œuvre devraient y trouver le nécessaire pour construire des agents utilisateurs conformes.

Le document commence par une présentation générale des feuilles de style pour devenir de plus en plus technique et spécifique vers la fin. L'accès rapide aux informations est facilité au travers d'un sommaire général, de sommaires spécifiques en début de chacun des chapitres et d'un index, à la fois dans les versions électroniques et imprimées.

La spécification tient également compte de ces deux modes de présentation. Bien que celles-ci soient sans doute similaires, le lecteur remarquera quelques nuances. Par exemple, les liens ne fonctionnent (évidemment) pas dans la version imprimée et la numérotation des pages n'apparaît pas dans la version électronique. En cas de doute, la version électronique du document fait autorité.

1.2 Organisation de la spécification

Le document est organisé selon le découpage suivant :

Chapitre 2 : Une introduction à CSS2
L'introduction inclut un bref tutoriel de CSS2 et une discussion des principes de construction sous-jacents à CSS2.
Chapitre 3 à 20 : Manuel de référence de CSS2.
Le corps de ce manuel représente le langage de référence de CSS2. On y définit ce qu'on peut mettre dans une feuille de style (syntaxe, propriétés, valeurs de propriétés) et comment les agents utilisateurs doivent interpréter les feuilles de style pour prétendre à la conformité.
Appendices :
Les appendices contiennent des renseignements sur un exemple de feuille de style pour HTML 4.0, les changements depuis CSS1, la mise en œuvre et les notes d'évaluation, la grammaire de CSS2, une liste de références normatives et informatives et trois index : un pour les propriétés, un autre pour les descripteurs et un index général.

1.3 Conventions

1.3.1 Les conventions pour les éléments et attributs dans le langage du document

  • Les noms des propriétés CSS, des descripteurs et des pseudo-classes sont placés entre guillemets simples.
  • Les valeurs de CSS sont placées entre guillemets simples.
  • Les noms des éléments du langage du document sont en majuscules.
  • Les noms des attributs du langage du document sont en minuscules et entre guillemets doubles.

1.3.2 Les définitions des propriétés CSS

Chaque définition d'une propriété CSS commence par un résumé des informations clés comme dans ce qui suit :

'nom de la propriété'
Valeur : valeurs et syntaxe légales
Valeur initiale : valeur initiale
S'applique à : les éléments sur lesquels agit la propriété
Héritée : si oui ou non la propriété est héritée
Pourcentage : comment interpréter les valeurs en pourcentage
Médias : à quels groupes de médias s'adresse la propriété

Valeur

Cette partie spécifie le jeu de valeurs valides pour la propriété. On désigne les types de valeur de plusieurs façons avec :

  1. des valeurs de mot-clé (ex. auto, disc, etc.) ;
  2. les types de données de base entre "<" et ">" (ex. <longueur>, <pourcentage>, etc.). Dans la version électronique, chaque instance d'un type de données offre un lien vers sa définition ;
  3. les types dont les valeurs légales sont les mêmes que celles des propriétés qui portent le même nom (ex. <'border-width'>, <'background-attachment'>, etc.). Dans ce cas, on donne le nom de ce type (complet avec guillemets) entre "<" et ">" (ex. <'border-width'>). Dans la version électronique, chaque instance de ce type des non-terminaux offre un lien vers la propriété correspondante ;
  4. des non-terminaux qui n'ont pas le même nom que celui de la propriété. Dans ce cas, le nom non-terminal se met entre "<" et ">" comme dans <border-width>. Remarquer la distinction entre <border-width> et <'border-width'>, le dernier étant défini selon le premier. La définition d'un non-terminal se trouve à côté de sa première apparition dans la spécification. Dans la version électronique, chaque instance de ce type offre un lien vers la définition de la valeur correspondante.

D'autres mots sont des mots-clés qui doivent apparaître littéralement sans guillemets (ex. red) tout comme les caractères barre oblique (/) et virgule.

Les valeurs sont rangées comme suit :

  • Plusieurs mots juxtaposés signifient que tous doivent survenir dans l'ordre donné ;
  • Une barre (|) distingue deux ou plusieurs alternatives : l'une seulement doit survenir ;
  • Une double barre (||) distingue deux ou plusieurs options : l'une ou plusieurs doivent survenir quel que soit l'ordre ;
  • Les crochets ([ ]) servent au regroupement.

La juxtaposition a plus de poids que la double barre et la double barre que la barre. Les lignes suivantes sont ainsi équivalentes :

    a b   |   c || d e
  [ a b ] | [ c || [ d e ]]

Chaque type, mot-clé ou groupe entre crochets peut être suivi par l'un des modificateurs suivants :

  • Une astérisque (*) : ce qui précède survient zéro ou plusieurs fois ;
  • Un plus (+) : ce qui précède survient une ou plusieurs fois ;
  • Un point d'interrogation (?) : ce qui précède est facultatif ;
  • Une paire de nombres entre accolades ({A,B}) : ce qui précède survient au moins A fois et au plus B fois.

L'exemple qui suit illustre différents types de valeur :

Valeur : N | NW | NE
Valeur : [ <longueur> | thick | thin ]{1,4}
Valeur : [<famille-nom> , ]* <famille-nom>
Valeur : <uri>? <couleur> [ / <couleur> ]?
Valeur : <uri> || <couleur>

Valeur initiale

Cette partie spécifie la valeur initiale de la propriété. Si la propriété est héritée, c'est la valeur donnée à l'élément racine de l'arbre du document. Concernant l'interaction entre les valeurs spécifiées dans la feuille de style, celles héritées et celles initiales, consulter le chapitre sur la cascade.

S'applique à

Cette partie donne la liste des éléments concernés par la propriété. Chacun des éléments est supposé avoir toutes les propriétés, mais quelques-unes d'entre elles ne produisent aucun effet sur certains types d'éléments. Par exemple, 'white-space' ne touche que les éléments de type bloc.

Héritée

Cette partie indique si la valeur de la propriété est héritée d'un élément ancêtre. Concernant l'interaction entre les valeurs spécifiées dans la feuille de style, celles héritées et celles initiales, consulter le chapitre sur la cascade.

Pourcentage

Cette partie indique comment interpréter les valeurs exprimées en pourcentage, le cas échéant, de la propriété. La mention "sans objet" signifie que la propriété n'admet pas de valeurs en pourcentage.

Médias

Cette partie indique les groupes de médias qui sont concernés par la propriété. Les conditions de conformité obligent les agents utilisateurs à respecter cette propriété si ceux-ci supportent les types de média indiqués par ces groupes de médias.

1.3.3 Les propriétés raccourcies

Quelques propriétés sont des propriétés raccourcies, les auteurs pouvant spécifier en une seule propriété, les valeurs de plusieurs autres propriétés.

Ainsi, la propriété 'font' est une propriété raccourcie qui permet de fixer en une seule fois les valeurs de 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' et 'font-family'.

Quand des valeurs sont absentes de la forme raccourcie, chacune des propriétés "manquantes" revêt sa valeur initiale (voir le chapitre sur la cascade).

Exemple(s) :

Soient les multiples règles de style de cet exemple :

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
  font-stretch: normal;
  font-size-adjust: none
}

on peut les récrire en une seule propriété raccourcie :

H1 { font: bold 12pt/14pt Helvetica }

Ici, 'font-variant', 'font-stretch', 'font-size-adjust' et 'font-style' prennent leur valeur initiale.

1.3.4 Les notes et les exemples

Tous les exemples qui illustrent un usage interdit sont repérés avec l'expression "NON ADMIS".

Tous les exemples HTML sont conformes au DTD HTML 4.0 strict (tel que défini dans [HTML40]), à moins qu'une autre Déclaration de Type de Document soit précisée.

Les notes sont seulement informatives.

Les exemples et les notes sont indiqués dans la source HTML de la spécification pour un rendu particulier par les agents utilisateurs CSS1.

1.3.5 Les images et les descriptions longues

La plupart des illustrations de la version électronique sont accompagnés de "descriptions longues" de leur représentation. Un "[D]" à droite de l'image signale un lien vers une description longue.

Les images et descriptions longues sont seulement informatives.

1.4 Remerciements

Cette spécification est le produit du Groupe de Travail du W3C sur les feuilles de style en cascade et les propriétés de formatage. En plus des éditeurs du présent document, voici les membres de ce groupe : Brad Chase (Bitstream), Chris Wilson (Microsoft), Daniel Glazman (Electricité de France), Dave Raggett (W3C/HP), Ed Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray Maloney (Grif), Powell Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft), Steven Pemberton (CWI), Thom Phillabaum (Netscape), Douglas Rand (Silicon Graphics), Robert Pernett (Lotus), Dwayne Dicks (SoftQuad), et Sho Kuwamoto (Macromedia). Nous les remercions de leurs efforts assidus.

Un certains nombre d'experts invités par le Groupe de Travail ont également contribué : George Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen (The Productivity Works), Martin Dürst (W3C, anciennement Universität Zürich), Roy Platon (RAL), Todd Fahrner (Verso), Tim Boland (NIST), Eric Meyer (Case Western Reserve University) et Vincent Quint (W3C).

Le chapitre des polices sur le web a été fortement marqué par Brad Chase (Bitstream), David Meltzer (Microsoft Typography) et Steve Zilles (Adobe). Les personnes suivantes ont aussi fait des apports à ce chapitre : Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland (LettError), François Yergeau (Alis), Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul Haeberli (SGI) et le dernier Phil Karlton (Netscape).

Le chapitre sur les médias paginés est en grande partie dû à Robert Stevahn (HP) et Stephen Waters (Microsoft).

Robert Stevahn (HP), Scott Furman (Netscape) et Scott Isaacs (Microsoft) furent des interlocuteurs clés pour le positionnement en CSS.

Mike Wexler (Adobe) a écrit la version préliminaire qui décrit plusieurs des nouvelles fonctions de CSS2.

T.V. Raman (Adobe) a fait des contributions essentielles pour les feuilles de styles auditives [Aural Cascading Style Sheets (ACSS)] et les concepts de présentation auditive à partir de ses travaux chez AsTeR (Audio System For Technical Readings). Il a produit le premier jet de la spécification ACSS qui régit la présente spécification. Les valeurs des propriétés auditives dans l'exemple de feuille de style pour HTML 4.0 sont de son fait ; il les utilise quotidiennement sur sa machine audio en conjonction avec Emacspeak et le navigateur Emacs du W3 (dont l'auteur est William Perry, celui-ci a déjà mis en œuvre les extensions auditives pour le compte du W3).

Todd Fahrner (Verso) a examiné les navigateurs anciens et modernes pour développer l'exemple de feuille de style de l'appendice.

Merci à Jan Kärrman, auteur de html2ps pour l'aide apportée à la création de la version PostScript de la spécification.

Les personnes suivantes ont contribué au développement de CSS2 via des rencontres électroniques ou physiques : Alan Borning, Robert Cailliau, Liz Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsøy, Vincent Mallet, Kim Marriott, Brian Michalowski, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Eva von Pepel, William Perry, David Siegel, Peter Stuckey et Jason White.

Les discussions sur www-style@w3.org ont influencé plusieurs questions capitales de CSS. Nous voudrions remercier spécialement Bjorn Backlund, Todd Fahrner, Lars Marius Garshol, Sue Jordan, Ian Hickson, Susan Lesch, Andrew Marshall, MegaZone, Eric Meyer, Russell O'Connor, David Perrell, Liam Quinn, Jon Seymour, Neil St. Laurent, Taylor, Brian Wilson et Chris Wilson de leur participation.

Beaucoup de remerciements au Groupe de Travail de Correction Technique de l'Initiative pour l'Accessibilité au Web, Protocoles et Formats [Web Accessibility Initiative Protocols and Formats Technical Review (WAI PF)] pour son aide à améliorer l'accessibilité dans CSS2.

Un grand merci à Philippe Le Hégaret, dont le validateur CSS a permis de fournir des exemples corrects et une grammaire raisonnable.

Remerciement spécial à Arnaud Le Hors, dont l'apport technique fait que ce document fonctionne.

Adam Costello a amélioré cette spécification grâce à une relecture détaillée.

Enfin, merci à Tim Berners-Lee sans qui rien de tout ceci n'aurait été possible.

1.5 Notice de copyright

Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Tous droits réservés.

Les documents sur le site du W3C sont présentés par les détenteurs du copyright sous la licence suivante. Par l'obtention, l'usage et/ou la copie de ce document ou bien du document du W3C auquel cette déclaration est liée, vous reconnaissez avoir lu, compris et vous soumettre aux termes et conditions suivantes :

La permission d'utiliser, copier et distribuer le contenu de ce document ou du document du W3C auquel cette déclaration est liée, est présentement accordée pour tout média, dans tout but et sans redevance ni royalties, à condition d'inclure ce qui suit sur TOUTES les copies du document ou parties de celui-ci que vous utilisez :

  1. Un lien ou URI vers le document original du W3C
  2. La notice de copyright préexistante de l'auteur original, et s'il n'y en a pas, une notice de la forme : "Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Tous droits réservés."
  3. S'il existe, le STATUT du document du W3C.

Si l'espace le permet, le texte complet de cette NOTICE devrait être fourni. Ainsi que les crédits envers les détenteurs du copyright pour tout logiciel, documents ou autres articles ou produits que vous créez suivant l'implémentation de tout ou partie de ce document.

Aucun droit de créer des modifications ou dérivés n'est autorisé conformément à cet accord.

CE DOCUMENT EST FOURNI "TEL QUEL", ET LES DÉTENTEURS DU COPYRIGHT NE FONT AUCUNE DÉCLARATION NI GARANTIE, EXPRESSE OU IMPLICITE, EN PARTICULIER, MAIS NON LIMITATIVEMENT, DE GARANTIE DE COMMERCIABILITÉ, D'ADÉQUATION À UN USAGE PARTICULIER, DE NON-INFRACTION OU D'AUTORISATION ; QUE LE CONTENU DE CE DOCUMENT SOIT ADAPTÉ À QUELQUE USAGE QUE CE SOIT ; NI QUE LES IMPLÉMENTATIONS DE CE CONTENU N'ENFREINDRONT LES BREVETS, COPYRIGHTS, MARQUES DÉPOSÉES OU AUTRES DROITS DE TIERCES PARTIES.

LES DÉTENTEURS DU COPYRIGHT NE SERONT RESPONSABLES D'AUCUN DOMMAGE DIRECT OU INDIRECT, NI DES CONSÉQUENCES RÉSULTANT DE TOUTE UTILISATION DE CE DOCUMENT OU DE L'EXÉCUTION OU IMPLÉMENTATION DE SON CONTENU.

Le nom des personnes ou des marques détentrices du copyright ne doivent PAS être utilisé pour la publicité ou pour faire connaître ce document ou son contenu sans une permission écrite spécifique au préalable. Les droits de reproduction de ce document restent acquis aux détenteurs du copyright.


Introduction à CSS2

2 Introduction à CSS2

  • 2.1 Un bref tutoriel de CSS2 pour HTML
  • 2.2 Un bref tutoriel de CSS2 pour XML
  • 2.3 Le modèle de traitement de CSS2
    • 2.3.1 Le canevas
    • 2.3.2 Le modèle d'adressage de CSS2
  • 2.4 Les principes de construction de CSS

2.1 Un bref tutoriel de CSS2 pour HTML

Nous allons montrer dans ce tutoriel combien il est facile de réaliser des feuilles de style simples. Pour cela, vous devrez connaître un peu HTML (voir [HTML40]) et une terminologie de base de l'impression numérique.

Commençons par un petit document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

Pour rendre la couleur du texte des éléments H1 bleu, vous pouvez écrire la règle de feuille de style suivante :

  H1 { color: blue }

Une règle CSS consiste en deux parties principales : un sélecteur ('H1') et une déclaration ('color: blue'). Celle-ci se compose à son tour de deux parties : une propriété ('color') et une valeur ('blue'). Bien que cet exemple n'agit que sur une seule des propriétés nécessaires au rendu d'un document HTML, cela suffit pour qu'elle soit qualifiée de feuille de style. Combinée avec d'autres feuilles de styles (la combinaison de feuilles de style est une fonction fondamentale des CSS), elle agira sur la présentation finale du document.

La spécification HTML 4.0 définit la façon de relier les feuilles de style à un documents HTML : soit par incorporation dans celui-ci, soit par appel à une feuille de style externe. Pour l'incorporation, on utilise l'élément STYLE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

Pour une souplesse d'utilisation maximale, on recommande aux auteurs l'usage de feuilles de style externes. On peut en changer sans modifier la source HTML du document et les partager entre plusieurs documents. Pour faire le lien vers une feuille de style externe, on emploie l'élément LINK :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

L'élément LINK spécifie :

  • le type de lien : vers une "feuille de style".
  • la location de celle-ci au travers de l'attribut "href"
  • le type de la feuille de style liée : "text/css".

Pour montrer la relation étroite entre feuille de style et balisage structuré, nous utiliserons l'élément STYLE pour ce tutoriel. Ajoutons des couleurs :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

Deux règles composent maintenant la feuille de style : la première spécifie la couleur rouge ('red') pour l'élément BODY et la seconde la couleur bleu ('blue') pour l'élément H1. Comme aucune valeur de couleur n'est spécifiée pour l'élément P, celui-ci hérite de la couleur de son élément parent, ici BODY. L'élément H1 est aussi un élément enfant de BODY, mais la seconde règle prévaut sur la valeur héritée. En CSS il y a souvent de tels conflits entre différentes valeurs, cette spécification décrit leur résolution.

CSS2 comporte plus de 100 différentes propriétés, dont 'color'. Voyons quelques-unes d'entre elles :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <STYLE type="text/css">
    BODY {
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em;
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

En premier lieu, on remarque plusieurs déclarations qui sont réunies à l'intérieur d'un bloc délimité par des accolades ({...}), qu'elles sont séparées par des points-virgules (;), la dernière pouvant aussi se terminer par un point-virgule.

La première déclaration sur l'élément BODY spécifie la famille de police "Gill Sans". Si celle-ci n'était pas disponible, l'agent utilisateur (souvent un "navigateur") utilisera la famille de polices 'sans-serif' qui est l'une des cinq familles de polices génériques reconnues pour chacun des agents utilisateurs. Les éléments enfants de BODY héritent de la valeur de la propriété 'font-family'.

La seconde déclaration fixe la taille de la police de BODY à 12 points. L'unité "point" est couramment employée en typographie d'impression pour mesurer le corps d'une police et d'autres longueurs. C'est un exemple d'unité absolue qui ne varie pas en fonction de l'environnement.

La troisième déclaration s'appuie sur une unité relative qui varie en fonction de son entourage. L'unité "em" se réfère à la taille de la police de l'élément. Le résultat, dans ce cas, sera que les marges autour de l'élément BODY seront trois fois plus grandes que la taille de la police.

2.2 Un bref tutoriel de CSS2 pour XML

On peut utiliser CSS avec chaque format de document structuré, par exemple avec des applications de eXtensible Markup Language [XML10]. En fait, XML est plus dépendant des feuilles de style que HTML, car les auteurs peuvent introduire des éléments propres que les agents utilisateurs ne savent pas interpréter.

Voici un fragment XML simple :

<ARTICLE>
  <HEADLINE>La rencontre de Frédéric le Grand et de Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    Un soir, alors qu'il préparait sa
    <INSTRUMENT>flûte</INSTRUMENT> et que ses
    musiciens étaient réunis, un officier lui apporta
    la liste des étrangers qui venaient d'arriver.
  </PARA>
</ARTICLE>

Pour rendre ce fragment à la manière d'un document, nous devons d'abord déclarer lesquels de ces éléments sont de type en-ligne (c.-à-d. qui ne provoquent pas de fins de lignes) et de type bloc (c.-à-d. qui provoquent des fins de lignes).

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

La première règle stipule que INSTRUMENT est de type en-ligne et la seconde, avec une liste de sélecteurs séparés par des virgules, que tous les autres éléments sont de type bloc.

Pour lier une feuille de style à un document XML, l'une des propositions consiste à utiliser une instruction de traitement :

<?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>La rencontre de Frédéric le Grand et de Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    Un soir, alors qu'il préparait sa
    <INSTRUMENT>flûte</INSTRUMENT> et que ses
    musiciens étaient réunis, un officier lui apporta
    la liste des étrangers qui venaient d'arriver.
  </PARA>
</ARTICLE>

Ce qu'un agent visuel pourrait rendre par :

Exemple de rendu. [D]

Remarquer que le mot "flûte" reste dans le paragraphe puisqu'il s'agit du contenu de l'élément de type en-ligne INSTRUMENT.

Cependant, le texte n'est pas formaté de la façon souhaitée. Par exemple, le corps de la police du titre devrait être plus grand que celui du reste du texte et aussi le nom de l'auteur pourrait être en italique :

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Ce qu'un agent visuel pourrait rendre ainsi :

Exemple de rendu. [D]

Plus on ajoute de règles à la feuille de style, plus on peut améliorer la présentation du document.

2.3 Le modèle de traitement de CSS2

Ce chapitre présente un modèle de fonctionnement possible pour un agent supportant CSS. Ce n'est qu'un modèle conceptuel, les implémentations effectives pouvant varier.

Dans ce modèle l'agent utilisateur traite une source en parcourant les étapes suivantes :

  1. Parcourir le document source en créant un arbre de ce document.
  2. Identifier le type de média cible.
  3. Rechercher toutes les feuilles de style associées au document et spécifiées pour le type de média cible.
  4. Annoter chacun des éléments de l'arbre du document et assigner une valeur unique à chacune des propriétés en rapport avec le type de média cible. On assigne des valeurs aux propriétés selon le mécanisme décrit dans le chapitre sur la cascade et l'héritage.

    Le calcul de ces valeurs dépend en partie du choix de l'algorithme de formatage approprié au type de média cible. Par exemple, si le média cible est un écran, les agents utilisateurs appliquent le modèle de formatage visuel. Si le média de destination est une page à imprimer, ils appliquent le modèle de la page. S'il s'agit d'un appareil de rendu auditif (ex. synthétiseur de parole), ils appliquent alors le modèle pour un rendu auditif.

  5. Générer une structure de formatage à partir de l'arbre annoté du document. Souvent, la structure de formatage ressemble beaucoup à celle de l'arbre du document, mais elle peut aussi en différer de façon significative, notamment quand les auteurs font usage de pseudo-éléments et de contenu généré. Premièrement, il n'est pas indispensable que la structure de formatage revête "l'aspect d'un arbre", la nature de la structure dépendant de l'implémentation. Deuxièmement, la structure de formatage peut contenir plus ou moins d'informations que l'arbre du document. Par exemple, si la propriété 'display' d'un élément de l'arbre a la valeur 'none', cet élément ne génèrera rien dans la structure de formatage. À l'inverse, un élément de liste peut générer plus d'informations : le contenu de l'élément de liste et l'information de son style (ex. une puce, une image).

    Noter que le client CSS ne modifie pas l'arbre du document pendant cette phase. En particulier, le contenu généré par les feuilles de styles ne repasse pas dans le processeur du langage du document (ex. pour un nouveau traitement).

  6. Transférer la structure de formatage vers le média cible (ex. imprimer le résultat, l'afficher sur un écran, le transformer en parole, etc.).

L'étape 1 n'entre pas dans le cadre de cette spécification (voir, par exemple, [DOM]).

Les étapes 2 à 5 constituent le principal objet de cette spécification.

L'étape 6 n'entre pas non plus dans ce cadre.

2.3.1 Le canevas

Quel que soit le média, le terme canevas désigne "l'espace dans lequel s'inscrit la structure de formatage". Le canevas est infini pour chacune des dimensions de cet espace, mais le rendu a lieu généralement dans une région finie du canevas. Celle-ci est établie par l'agent utilisateur selon le média cible. Ainsi, un rendu sur écran impose en général aux agents utilisateurs une largeur minimum qui est initialement déterminée à partir de la zone de visualisation. Un rendu sur une page leur impose des contraintes de largeur et de hauteur. Les agents utilisateurs auditif peuvent imposer des limites dans un espace audio mais pas de temps.

2.3.2 Le modèle d'adressage de CSS2

Grâce aux sélecteurs et propriétés de CSS2, les feuilles de style permettent une référence aux parties d'un document ou d'un agent utilisateur, soit :

  • aux éléments dans l'arbre du document et certaines de leurs relations (voir le chapitre sur les sélecteurs) ;
  • aux attributs des éléments dans l'arbre du document et leurs valeurs (voir le chapitre sur les sélecteurs d'attributs) ;
  • à certaines parties du contenu d'un élément (voir les pseudo-éléments :first-line et :first-letter) ;
  • aux éléments de l'arbre du document qui sont dans un état donné (voir le chapitre sur les pseudo-classes) ;
  • à certains aspects du canevas où interviendra le rendu du document ;
  • à certaines informations du système (voir le chapitre sur l'interface utilisateur).

2.4 Les principes de construction de CSS

CSS2, comme CSS1 avant lui, est fondé sur un ensemble de principes de construction :

  • Compatibilité ascendante et descendante. Les agents utilisateurs seront capable d'interpréter des feuilles de style CSS1. Dans l'autre sens, les agents utilisateurs CSS1 seront capables de lire une feuille de style CSS2 en passant outre les instructions qui leur seront inconnues. Également, ceux qui n'ont aucun support des feuilles de style seront capables d'afficher les documents pourvus de style. Bien sûr, les améliorations liées au style ne seront pas rendues, mais tout le contenu sera présenté ;

  • Complémentarité avec les documents structurés. Les feuilles de style complètent les documents structurés (exp; HTML et XML) en fournissant des informations de style au texte balisé. Un changement dans la feuille de style ne devrait avoir que peu ou pas d'impact sur le balisage ;

  • Indépendance vis-à-vis de l'éditeur, de la plateforme ou de l'appareil. Les feuilles de style autorisent une indépendance des documents d'avec l'éditeur, la plateforme et l'appareil, cependant CSS2 permet de produire une feuille de style pour un groupe d'appareils (ex. imprimantes) ;

  • Facilité de maintenance. Lier des feuilles de style en partant des documents peut simplifier le travail de maintenance des webmestres tout en conservant un aspect consistant pour l'ensemble du site. Par exemple, s'il faut changer la couleur de fond liée à l'identité d'une organisation, un seul fichier doit être modifié ;

  • Simplicité. Bien que CSS2 soit plus complexe que CSS1, il s'agit d'un langage simple de style facile à lire et à écrire par un humain. Les propriétés de style sont suffisamment indépendantes les unes des autres en général pour qu'un effet donné ne puisse être produit que d'une seule façon ;

  • Performance du réseau. CSS fournit un moyen compact pour la représentation d'un contenu. Comparé aux fichiers images ou audio, souvent employés par les auteurs pour obtenir certains effets de rendu, les feuilles de style diminuent la plupart du temps la taille des fichiers. Aussi, les connexions au réseau sont moins nombreuses, ce qui augmente d'autant les performances de celui-ci ;

  • Flexibilité. On peut donner du style à un contenu de plusieurs manières. La fonction clé réside dans la possibilité de modifier en cascade les informations de style spécifiées dans la feuille de style par défaut (de l'agent utilisateur), les feuilles de style de l'utilisateur, les feuilles de style liées, l'en-tête du document et dans les attributs des éléments formant le corps du document ;

  • Richesse. En donnant aux auteurs un jeu étendu d'effets de représentation, on accroît la richesse du Web en tant que moyen d'expression. Les auteurs étaient dans l'attente de fonctionnalités qui étaient communes dans les applications de publication numérique et de présentation. Quelques-uns des effets de rendu demandés ne satisfont pas au principe d'indépendance vis-à-vis des appareils, cependant CSS2 répond pour une grande part aux espérances des auteurs ;

  • Corrélations avec d'autres langages. Les propriétés décrites par cette spécification forment un jeu consistant pour le modèle de formatage des présentations visuelles et auditives. Le langage CSS permet d'accéder à ce modèle mais les corrélations avec d'autres langages sont aussi possibles. Par exemple, un programme JavaScript peut changer de façon dynamique la valeur de la propriété 'color' d'un élément donné ;

  • Accessibilité. Plusieurs fonctions de CSS faciliteront l'accès au Web des utilisateurs avec diverses incapacités :

    • Avec les propriétés jouant sur l'apparence des polices, il est permis aux auteurs de ne plus recourir à du texte placé dans des images bitmap, ce qui le rend inaccessible ;
    • Les propriétés de positionnement leur permettent de ne plus avoir à utiliser d'astuces de balisage (ex. les images invisibles) pour forcer la mise en page ;
    • Les utilisateurs qui ont des besoins de présentation particuliers peuvent remplacer les feuilles de style de l'auteur, c'est le sens des règles !important ;
    • La nouvelle valeur 'inherit' pour chacune des propriétés renforce le caractère général de la cascade et autorise des ajustements de style plus faciles et cohérents ;
    • Grâce à l'amélioration du support aux médias, que ce soit les groupes de médias ou les types de média braille, en relief ou tty, les utilisateurs et auteurs pourront avoir des pages adaptées à ces appareils ;
    • Les propriétés auditives permettent de contrôler les sorties voix et audio ;
    • Les sélecteurs d'attribut, la fonction 'attr()' et la propriété 'content' donnent un accès à d'autres versions du contenu ;
    • Les compteurs et le numérotage de chapitre/paragraphe peuvent améliorer la navigation dans le document et économiser sur l'espace des alinéas (important pour les appareils braille). Les propriétés 'word-spacing' et 'text-indent' éliminent le besoin de rajouter des blancs dans le document.

    Remarque : Pour de plus amples informations sur la façon de produire des documents accessibles avec CSS et HTML, consulter [WAI-PAGEAUTH].


Conformité : obligations et recommandations

3 La conformité : obligations et recommandations

  • 3.1 Définitions
  • 3.2 La conformité
  • 3.3 Les conditions d'erreur
  • 3.4 Le type de contenu text/css

3.1 Définitions

Nous voyons dans ce chapitre la spécification formelle de CSS2, en commençant par le contrat qui lie les auteurs, les utilisateurs et ceux qui la mettent en œuvre.

Dans ce document, les mots-clés "DOIT", "NE DOIT PAS", "REQUIS", "DEVRA", "NE DEVRA PAS", "DEVRAIT", "NE DEVRAIT PAS", "RECOMMENDÉ", "PEUT" et"FACULTATIF" doivent être interprétés tels que décrits dans RFC 2119 (voir [RFC2119]). Cependant, par souci de lisibilité, ces mots n'apparaîtront pas ici en majuscules.

Par moment, il est fait une recommandation de bon usage aux auteurs et pour les agents utilisateurs. Ces recommandations ne sont pas normatives et la conformité avec la spécification ne dépend pas de leur application. On les reconnaîtra à des tournures de phrases similaires à "Nous recommandons... ", "Cette spécification recommande... ", etc.

Agent utilisateur
On donne le nom d'agent utilisateur à tout logiciel capable d'interpréter un document dans un langage donné et de mettre en œuvre les feuilles de style qui lui sont associées selon cette spécification. Celui-ci peut afficher un document, le lire en synthèse vocale, l'imprimer, le convertir vers un autre format, etc.
Ancêtre
On appelle un élément A l'ancêtre d'un élément B, si et seulement si B est un descendant de A ;
Arbre du document
C'est l'arbre des éléments qui résulte du formatage du document source. Chacun de ces éléments a exactement un seul parent, l'exception étant l'élément racine qui n'en a pas ;
Attribut
Une valeur complémentaire attachée à un élément, elle se compose d'un nom et d'une valeur associé (textuelle) ;
Auteur
C'est une personne qui écrit des documents et les feuilles de style qui lui sont associées. Pour ce faire, elle emploie un outil d'édition [ndt. authoring tool] ;
Contenu
C'est le contenu associé à un élément dans le document source. Les éléments ne possèdent pas tous un contenu, on dit alors qu'ils sont vides. Ce contenu peut consister en du texte et peut inclure à son tour des sous-éléments ; on appelle alors l'élément les englobant le parent de ces sous-éléments ;
Descendant
On appelle un élément A un descendant d'un élément B si A est soit (1) un enfant de B, soit (2) un enfant d'un autre élément C qui est lui-même un descendant de B ;
Dimensions intrinsèques
La largeur et la hauteur de l'élément lui-même, ce ne sont pas celles données par l'entourage. En CSS2, on part du principe que tous les éléments remplacés, et seulement ceux-ci, ont des dimensions intrinsèques ;
Document source
Le document auquel se réfèrent une ou plusieurs feuilles de style. Ce document est formaté dans un langage donné qui permet de le représenter comme un arbre de ses éléments. Chacun de ces éléments a un nom qui identifie son type avec en option le nombre de ses attributs et un contenu (qui peut être vide) ;
Élément
Un terme issu de SGML (voir [ISO8879]). Les constructions syntaxiques de base du langage du document. La plupart des règles des feuilles de style empruntent les noms de ces constructions (comme "P", "TABLE" et "OL" pour HTML) pour en spécifier les directives de rendu ;
Élément précédent
On dit que l'élément A est l'élément précédent de B, si (1) A est un ancêtre de B ou si (2) A est un frère précédent de B ;
Élément remplacé
Un élément dont l'interpréteur CSS ne connaît que les dimensions intrinsèques. Pour le langage HTML, ce sont principalement les éléments IMG, INPUT, TEXTAREA, SELECT et OBJECT. Par exemple, le contenu de l'élément IMG est habituellement remplacé par l'image qu'indique l'attribut "src". CSS ne définit pas la façon de déterminer ces dimensions intrinsèques ;
Élément suivant
On dit que l'élément A est l'élément suivant de B, si et seulement si B est un élément précédent de A ;
Enfant
On appelle un élément A l'enfant de l'élément B, si et seulement si B est le parent de A ;
Feuille de style
Un jeu de déclarations qui spécifient la présentation d'un document ;

Les feuilles de style peuvent provenir de trois sources : de l'auteur, de l'utilisateur et de l'agent utilisateur. Leur interaction est décrite dans le chapitre sur la cascade et l'héritage ;

Feuille de style valide
La validité d'une feuille de style est fondée sur le niveau de CSS utilisé. Toute feuille de style valide en CSS1 l'est aussi en CSS2. Cependant, quelques changements intervenus depuis CSS1 verront certaines feuilles de style CSS1 prendre un sens différent en CSS2 ;

Une feuille de style valide en CSS2 doit suivre la grammaire de CSS2. En outre, elle ne doit contenir que les règles-at, les noms de propriétés et les valeurs de celles-ci qui sont définis pour cette spécification. Une construction illégale (invalide) de l'un parmi ceux-ci entraîne son invalidité ;

Frère [ndt. sibling]
On appelle un élément A un frère d'un élément B, si et seulement si A et B ont un même parent. Si l'élément A apparaît avant B dans l'arbre du document, on dit que A est le frère précédent et B le frère suivant ;
Langage du document
Le langage utilisé pour formater le document source (ex. HTML ou une application en XML) ;
Rendu du contenu
C'est le contenu d'un élément tel qu'il apparaît après que les instructions des feuilles de style concernées aient été appliquées. Ce rendu pour un élément remplacé provient de l'extérieur du document source. Il peut aussi prendre la forme alternative d'un texte à la place d'un élément (ex. la valeur de l'attribut "alt" en HTML) et il peut inclure des objets insérés de façon explicite ou implicite par la feuille de style, tels que des puces, un numérotage, etc. ;
Utilisateur
C'est la personne qui interagit avec un agent utilisateur pour voir, entendre ou utiliser autrement un document en association avec ses feuilles de style. L'utilisateur peut employer sa propre feuille de style qui tient compte de préférences personnelles ;

Voici un exemple de document source dans le langage HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <TITLE>Ma page personnelle</TITLE>
  <BODY>
    <H1>Ma page personnelle</H1>
    <P>Bienvenue sur ma page personnelle ! Voici mes compositeurs préférés :
    <UL>
      <LI> Elvis Costello
      <LI> Johannes Brahms
      <LI> Georges Brassens
    </UL>
  </BODY>
</HTML>

et maintenant son arbre :

Exemple d'arbre d'un document. [D]

En accord avec la définition de HTML, l'élément HEAD sera inféré lors de l'interprétation et fera partie de l'arbre du document même si les balises HEAD n'apparaissent pas dans la source. De la même manière pour les fins des éléments P et LI, bien que les balises </P> et </LI> ne soient pas visibles.

3.2 La conformité

Ce chapitre traite seulement de la conformité en regard de la spécification CSS2. De futurs niveaux de CSS pourront requérir l'implémentation d'un jeu de fonctions différents pour que l'agent utilisateur prétende à une conformité.

Globalement, pour être conformes à cette spécification, les agents utilisateurs doivent respecter les points suivants :

  1. Il doit supporter l'un ou plus des types de média de CSS2.
  2. Pour une source donnée, il doit en rechercher toutes les feuilles de style associées qui sont appropriées pour les types de média supportés. S'il ne peut toutes les rassembler (par exemple, suite à des disfonctionnements du réseau), il doit rendre le document à partir de celles qui ont pu être trouvées.
  3. Il doit interpréter les feuilles de style en fonction de cette spécification. Il doit en particulier reconnaître toutes les règles-at, les déclarations et leurs ensembles, et les sélecteurs (voir la grammaire de CSS2). Si l'agent utilisateur rencontre une propriété qui s'applique à un type de média supporté, il doit en interpréter sa valeur conformément à la définition de cette propriété. Il doit ainsi retenir toutes les valeurs valides et ignorer les déclarations dont les valeurs ne le sont pas. Un agent utilisateur doit ignorer les règles ayant trait à ceux des types de média qu'il ne supporte pas.
  4. Pour chacun des éléments de l'arbre du document, l'agent utilisateur doit assigner une valeur à chacune de leurs propriétés spécifiées, conformément à leurs définitions et leurs règles de cascade et d'héritage.
  5. Si la source fait mention de feuilles de style alternatives (comme pour le mot-clé "alternate" de HTML 4.0 [HTML40]), l'agent utilisateur doit permettre à l'utilisateur d'en choisir une parmi celles-ci pour ensuite l'appliquer.

Il n'est pas obligatoire d'observer l'ensemble de ces points, cependant :

  • Un agent utilisateur qui lit les feuilles de styles doit respecter les points 1 à 3.
  • Un outil d'édition doit produire des feuilles de style valides.
  • Un agent utilisateur qui veut rendre un document avec ses feuilles de style associées doit respecter les points 1 à 5 et rendre le document en accord avec les contraintes propres des médias, ceux-ci sont examinés plus loin dans la spécification. Quand nécessaire, il peut utiliser des valeurs approchantes.

Un agent utilisateur qui ne peut satisfaire correctement à cette spécification à cause des limitations d'un appareil particulier n'est pas forcément non conforme (ex. un agent utilisateur ne peut produire des couleurs sur un moniteur monochrome, pareil dans le cas d'une impression).

Cette spécification recommande que l'utilisateur puisse choisir sa propre feuille de style.

3.3 Les conditions d'erreur

En général, ce document ne précise pas comment les agents utilisateurs sont supposés gérer les erreurs (ex. comment faire quand une ressource désignée par un URI est indisponible).

Néanmoins, ils doivent observer les règles de gestion des erreurs d'interprétation.

Les auteurs et les utilisateurs ne doivent pas s'appuyer sur une gestion spécifique des erreurs, car le comportement des agents utilisateurs vis-à-vis de celles-ci peut varier.

3.4 Le type de contenu text/css

Les feuilles de style externes traversent l'Internet sous la forme de séquences d'octets accompagnées d'information d'encodage (voir [HTML40], chapitre 5). La structure de la transmission, nommée l'entité message, est définie par RFC 2045 et RFC 2068 (voir [RFC2045] et [RFC2068]). Une entité message avec un type de contenu "text/css" représente un document CSS indépendant. Ce type est défini dans RFC 2318 ([RFC2318]).


La syntaxe de CSS2 et les types de données de base

4 La syntaxe de CSS2 et les types de données de base

  • 4.1 La syntaxe
    • 4.1.1 L'atomisation
    • 4.1.2 Les mots-clés
    • 4.1.3 Les caractères et la casse
    • 4.1.4 Les déclarations
    • 4.1.5 Les règles-at
    • 4.1.6 Les blocs
    • 4.1.7 Les jeux de règles, les blocs de déclaration et les sélecteurs
    • 4.1.8 Les déclarations et les propriétés
    • 4.1.9 Les commentaires
  • 4.2 Les règles de traitement des erreurs d'interprétation
  • 4.3 Les valeurs
    • 4.3.1 Les entiers et les nombres
    • 4.3.2 Les longueurs
    • 4.3.3 Les pourcentages
    • 4.3.4 URL + URN = URI
    • 4.3.5 Les compteurs
    • 4.3.6 Les couleurs
    • 4.3.7 Les angles
    • 4.3.8 Les durées
    • 4.3.9 Les fréquences
    • 4.3.10 Les chaînes
  • 4.4 La représentation du document par CSS
    • 4.4.1 La référence aux caractères absents d'un encodage

4.1 La syntaxe

Ce chapitre décrit une grammaire (avec les règles d' interprétation pour la compatibilité ascendante) commune à chaque version de CSS (y compris CSS2). Les versions futures adhéreront à cette syntaxe de base, même si d'autres contraintes syntaxiques puissent s'y ajouter.

Ces descriptions sont normatives. Un complément des règles de grammaire normatives est aussi présenté dans l'appendice D.

4.1.1 L'atomisation

Tous les niveaux de CSS, que ce soit les niveaux 1, 2 et les futurs niveaux, emploient la même syntaxe de base. Ceci permet une interprétation (mais alors incomplète) des feuilles de style produites selon des niveaux de CSS postérieurs à leur implémentation dans les agents utilisateurs. Les auteurs peuvent utiliser cette caractéristique pour créer des feuilles de style fonctionnant sur des agents utilisateurs plus anciens tout en employant les fonctionnalités apportées par les derniers niveaux de CSS.

Du point de vue lexical, les feuilles de style CSS consistent en une série de jetons. Leur liste pour CSS2 suit. Les définitions utilisent des expressions régulières à la façon de Lex. Les codes octaux se réfèrent à ISO 10646 ([ISO10646]). Tout comme pour Lex, en cas de correspondances multiples, la plus longue détermine le jeton.
Jeton | Définition
IDENT | {ident}
ATKEYWORD | @{ident}
STRING | {string}
HASH | #{name}
NUMBER | {num}
PERCENTAGE | {num}%
DIMENSION | {num}{ident}
URI url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE | U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO <!--
CDC -->
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S | [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION | {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM | tout autre caractère ainsi que le guillemet, simple ou double, qui n'est pas retenu par les règles précédentes

Ci-dessus, les macro-commandes entre accolades ({}) sont définies ainsi :
Macrocommande | Définition
ident | {nmstart}{nmchar}*
name | {nmchar}+
nmstart | [a-zA-Z_]|{nonascii}|{escape}
nonascii | [^\0-\177]
unicode | \\[0-9a-f]{1,6}[ \n\r\t\f]?
escape | {unicode}|\\[ -~\200-\4177777]
nmchar | [a-zA-Z0-9-_]|{nonascii}|{escape}
num | [0-9]+|[0-9]*\.[0-9]+
string | {string1}|{string2}
string1 | \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 | \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl | \n|\r\n|\r|\f
w | [ \t\r\n\f]*

Vient ensuite la syntaxe de base de CSS. Les paragraphes suivants indiquent la façon de les employer. L'appendice D décrit une grammaire plus restrictive et plus proche du langage de CSS2.

feuille de style : [ CDO | CDC | S | déclaration ]*;
déclaration      : jeu de règles | règle-at;
règles-at        : ATKEYWORD S* tous* [ bloc | ';' S* ];
bloc             : '{' S* [ tous | bloc | ATKEYWORD S* | ';' ]* '}' S*;
jeu de règles    : sélecteur? '{' S* déclaration? [ ';' S* déclaration? ]* '}' S*;
sélecteur        : tous+;
déclaration      : propriété ':' S* valeur;
propriété        : IDENT S*;
valeur           : [ tous | bloc | ATKEYWORD S* ]+;
tous             : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
                   | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
                   | FUNCTION tous* ')' | DASHMATCH | '(' tous* ')' | '[' tous* ']' ] S*;

Les jetons COMMENT n'apparaissent pas dans la grammaire (par souci de lisibilité), mais on peut les placer n'importe où entre les autres jetons.

Le jeton S dans la grammaire au-dessus signifie un blanc. Seuls les caractères "espace" (Code Unicode 32), "tabulation" (9), "nouvelle ligne" (10), "retour chariot" (13) et "nouvelle page" (12) peuvent en tenir lieu. Les autres caractères d'espacement similaires, comme "l'espace em" (8195) et "l'espace idéographique" (12288), n'en font pas partie.

[Errata : Les propriétés raccourcies prennent comme valeur une liste composée des valeurs de leurs sous-propriétés ou sinon la valeur 'inherit'. On ne peut pas mélanger la valeur 'inherit' avec d'autres valeurs des sous-propriétés car il ne serait alors plus possible de déterminer laquelle de ces sous-propriétés est concernée. Les définitions d'un certain nombre de propriétés raccourcies ne respectent pas cette règle : 'border-top', 'border-right', 'border-bottom', 'border-left', 'border', 'background', 'font', 'list-style', 'cue' et 'outline'.]

4.1.2 Les mots-clés

Les mots-clés ont des points communs avec les identifiants. On ne doit pas les mettre entre guillemets ("..." ou '...'). Ainsi :

red

est un mot-clé, mais :

"red"

n'en est pas un (c'est une chaîne). D'autres exemples à proscrire :

Exemple(s) INTERDIT(s) :

width: "auto";
border: "none";
font-family: "serif";
background: "red";

4.1.3 Les caractères et la casse

Les règles suivantes sont toujours vraies :

  • Toutes les feuilles de style CSS sont insensibles à la casse, sauf leurs parties qui ne sont pas régies par CSS. Ainsi celles qui sont sensibles à la casse, comme les valeurs des attributs de HTML "id" et "class", les noms des polices et les URIs qui sont hors du cadre de cette spécification. Noter en particulier que les noms des éléments ne sont pas dépendants de la casse pour HTML, alors qu'en XML ils le sont.
  • En CSS2, les identifiants (ainsi que les noms des éléments et ceux des classes et des IDs des sélecteurs) ne peuvent contenir que les caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre. On peut aussi employer des caractères échappés ainsi que tous les caractères Unicode sous leur forme numérique (voir ci-après). Par exemple, l'identifiant "B&W?" peut s'écrire "B\&W\?" ou "B\26 W\3F".

    Noter que Unicode est équivalent code-à-code à ISO 10646 (voir [UNICODE] et [ISO10646]).

  • En CSS2, la barre oblique inverse (\) détermine trois types d' échappements de caractère.

    Premièrement, dans une chaîne, une barre oblique inverse suivie d'un caractère "nouvelle ligne" est ignorée (une chaîne n'est pas censée contenir la barre oblique inverse ni le caractère "nouvelle ligne").

    Deuxièmement, elle annule le sens des caractères spéciaux pour CSS. Tout caractère (sauf un nombre hexadécimal) peut être échappé ce qui neutralise sa signification particulière. Par exemple, "\"" est une chaîne constituée d'un seul guillemet double. Les préprocesseurs de feuilles de style ne devraient pas les supprimer des feuilles de style car celles-ci en seraient changées.

    Troisièmement, elle permet aux auteurs une référence à des caractères qui autrement serait difficile à insérer dans un document. Dans ce cas, la barre oblique inverse s'emploie suivie d'au plus six chiffres hexadécimaux (0..9A..F) qui correspondent au code numérique d'un caractère ISO 10646 ([ISO10646]). Si à son tour un chiffre ou une lettre vient après ce nombre hexadécimal, il convient de préciser où celui-ci se termine. Deux façons d'y parvenir :

    1. avec un espace (ou un autre blanc) : "\26 B" ("&B"). Dans ce cas, l'agent utilisateur devrait considérer une paire "CR/LF" (13/10 en Unicode) comme un seul blanc ;
    2. en fournissant exactement 6 chiffres hexadécimaux : "\000026B" ("&B").

    En fait, on peut combiner ces deux méthodes. Un seul blanc est ignoré après un échappement hexadécimal. Noter que, pour obtenir un "vrai" espace après la séquence d'échappement, il faudra aussi l'échapper ou le doubler.

  • On considère toujours les caractères échappés comme faisant partie d'un identifiant ou d'une chaîne (ex. "\7B" n'est pas un signe de ponctuation, alors que "{" en est un, tout comme "\32" est permis au début du nom d'une classe et "2" ne l'est pas).

4.1.4 Les déclarations

Quelle que soit la version de CSS, une feuille de style CSS consiste en une liste de déclarations (voir la grammaire plus haut). Elles sont de deux sortes : les règles-at et les jeux de règles. Les blancs sont autorisés autour des déclarations.

Quand on utilise, dans cette spécification, des expressions comme "immédiatement avant" ou "immédiatement après", cela veut dire sans blancs ou commentaires intermédiaires.

4.1.5 Les règles-at

Les règles-at commencent par un mot-clé-at, composé du caractère "@" immédiatement suivi par un identifiant (ex. '@import', '@page').

Une règle-at consiste en tout ce qu'il y a jusqu'au premier point-virgule (;), celui-ci inclus, ou jusqu'au bloc suivant, selon le premier qui survient. Devant une règle-at inconnue de lui, un agent utilisateur CSS doit l'ignorer entièrement et poursuivre l'interprétation après celle-ci.

Les agents utilisateurs CSS2 doivent ignorer toute règle '@import' qui survient dans un bloc ou qui ne précède pas l'ensemble des jeux de règles.

Exemple(s) INTERDIT(s) :

Supposons, par exemple, un interpréteur CSS2 face à cette feuille de style :

@import "subs.css";
H1 { color: blue }
@import "list.css";

Le deuxième '@import' est invalide pour CSS2. L'interpréteur ignore celui-ci en entier, et la feuille de style se réduit dans les faits à :

@import "subs.css";
H1 { color: blue }

Exemple(s) INTERDIT(s) :

Dans l'exemple suivant, la deuxième règle '@import' n'est pas recevable parce qu'elle survient dans le bloc d'une règle '@media'.

@import "subs.css";
@media print {
  @import "print-main.css";
  BODY { font-size: 10pt }
}
H1 {color: blue }

4.1.6 Les blocs

Un bloc commence par une accolade gauche ({) et se termine par l'accolade droite (}) correspondante. On peut y mettre toutes sortes de caractères, sous la réserve que certains caractères aillent toujours par paires, celles-ci pouvant être imbriquées. Il s'agit des parenthèses ( ), des crochets [ ] et des accolades { }. Les guillemets simples (') et double (") doivent aussi aller par paires, leur contenu étant considéré alors comme une chaîne. Voir Atomisation plus haut pour la définition d'une chaîne.

Exemple(s) INTERDIT(s) :

Voici en exemple un bloc. Noter que l'accolade droite entre les guillemets doubles ne correspond pas à l'accolade ouvrante du bloc et que le deuxième guillemet simple est échappé, ce qui annule ainsi la correspondance avec le premier guillemet simple :

{ causta: "}" + ({7} * '\'') }

Noter que cette règle n'est pas valide pour CSS2, bien que correspondant à la définition d'un bloc donnée ci-dessus.

4.1.7 Les jeux de règles, les blocs de déclaration et les sélecteurs

Un jeu de règles (qualifié aussi de "règle") se compose d'un sélecteur suivi par un bloc de déclaration.

Un bloc de déclaration (qui est représenté dans la suite du texte par {bloc}) commence par une accolade gauche ({) et se termine par l'accolade droite (}) correspondante. On doit placer entre celles-ci une liste de déclarations séparées par des points-virgules (;) ou, sinon, ne rien y mettre.

Un sélecteur (voir aussi le chapitre sur les sélecteurs) consiste en tout ce qu'il y a jusqu'à la première accolade gauche, celle-ci exclue. Un sélecteur est toujours accompagné d'un {bloc}. Quand un agent utilisateur ne peut interpréter un sélecteur (par exemple, parce que celui-ci est invalide pour CSS2), il doit de ce fait en ignorer le {bloc}.

En CSS2, la virgule (,) placée dans un sélecteur a un sens particulier. Cependant, comme on ne sait pas si celle-ci va prendre d'autres significations dans les versions ultérieures de CSS, si une partie du sélecteur comportait une quelconque erreur, la déclaration entière devrait être ignorée, même si le reste de celui-ci apparaissait valide pour CSS2.

Exemple(s) INTERDIT(s) :

Par exemple, comme le caractère "&" n'est pas un jeton valide en CSS2, un agent utilisateur CSS2 doit ignorer la totalité de la deuxième ligne, et les éléments H3 ne prendront pas la couleur rouge :

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

Exemple(s):

Voici un exemple plus complexe. Les deux premières paires d'accolades se trouvent dans une chaîne, elles ne délimitent pas la fin du sélecteur. Cette déclaration est donc valide pour CSS2 :

P[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 Les déclarations et propriétés

Une déclaration est : soit vide ; soit constituée d'une propriété, suivie du caractère deux-points (:) puis d'une valeur. Il peut y avoir des blancs autour de chacun de ceux-ci.

En raison du mode de fonctionnement des sélecteurs, on peut regrouper les multiples déclarations qui se rapportent à un même sélecteur en les séparant par des points-virgules (;).

Exemple(s):

Ainsi, les règles suivantes :

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

sont équivalentes à celle-ci :

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

Une propriété est un identifiant. On peut utiliser pour sa valeur toutes sortes de caractères, sous réserve des parenthèses ("( )"), des crochets ("[ ]"), des accolades ("{ }") et des guillemets simples (') ou doubles (") qui doivent toujours aller par paires, les points-virgules en dehors d'une chaîne doivent être échappés. Les parenthèses, les crochets et les accolades peuvent être imbriqués. Les caractères entre des guillemets sont interprétés comme une chaîne.

La syntaxe des valeurs est spécifiée pour chacune des propriétés ; dans tous les cas, les valeurs sont construites à partir d'identifiants, de chaînes, de nombres, de longueurs, de pourcentages, d'URIs, de couleurs, d'angles, de durées et de fréquences.

Un agent utilisateur doit ignorer une déclaration dont le nom de la propriété ou sa valeur est invalide. Chacune des propriétés CSS2 a ses propres restrictions syntaxiques et sémantiques sur les valeurs qu'elle accepte.

Exemple(s) INTERDIT(s) :

Prenons par exemple un interpréteur CSS2 et cette feuille de style :

H1 { color: red; font-style: 12pt }  /* valeur invalide : 12pt */
P { color: blue;  font-vendor: any;  /* propriété invalide : font-vendor */
    font-variant: small-caps }
EM EM { font-style: normal }

Dans la première ligne, la seconde déclaration comporte une valeur de '12pt' invalide, et dans la deuxième ligne, la deuxième déclaration contient une propriété non définie 'font-vendor'. L'interpréteur va ignorer celles-ci, réduisant la feuille de style dans les faits à la suivante :

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

4.1.9 Les commentaires

Les commentaires commencent par les caractères "/*" et se terminent par "*/". On peut les placer partout entre les jetons, leur contenu n'a aucune influence sur le rendu. On ne peut pas les imbriquer.

CSS permet aussi l'utilisation des délimiteurs SGML ("<!--" et "-->") à certains endroits, mais ne délimitent pas un commentaire en CSS. On les emploie aussi pour masquer les feuilles de style dans un document source HTML (dans l'élément STYLE) aux agents utilisateurs antérieurs à HTML 3.2. Voir la spécification HTML 4.0 ([HTML40]) pour plus d'informations.

4.2 Les règles de traitement des erreurs d'interprétation

Dans certains cas, les agents utilisateurs doivent ignorer une partie d'une feuille de style invalide. Cette spécification définit le terme ignorer, qui signifie l'examen de cette partie invalide par l'agent utilisateur (pour déterminer où celle-ci commence et se termine), tout en agissant comme si cette partie n'avait pas été là.

Pour permettre l'ajouts futurs de nouvelles propriétés et valeurs, les agents utilisateurs doivent suivre les règles suivantes en fonction des scénarios décrits ici :

  • Propriétés inconnues. Les agents utilisateurs doivent ignorer une déclaration dont la propriété est inconnue. Par exemple, pour cette feuille de style :
    H1 { color: red; rotation: 70minutes }

    l'agent utilisateur la traitera comme si elle était :

    H1 { color: red }
  • Valeurs invalides. Les agents utilisateurs doivent ignorer une déclaration qui comporte une valeur invalide. Par exemple :
    IMG { float: left }       /* valide pour CSS2 */
IMG { float: left here }  /* "here" n'est pas une valeur de 'float' */
IMG { background: "red" } /* les mots-clés ne sont pas entre guillemets en CSS2 */
IMG { border-width: 3 }   /* on doit spécifier une unité à une valeur numérique */
    un interpréteur CSS2 honorerait la première règle de la feuille de style et en ignorerait les suivantes, comme si celle-ci avait été :
    IMG { float: left }
IMG { }
IMG { }
IMG { }

    L'agent utilisateur qui voudrait aller vers une conformité avec une future spécification CSS peut aussi suivre une, ou plusieurs, de ces autres règles-ci.

  • Mots-clés-at invalides. Les agents utilisateurs doivent ignorer un mot-clé-at invalide ainsi que tout ce qui le suit jusqu'au point-virgule (;) inclus ou jusqu'au {bloc} prochains, selon celui qui survient en premier. Par exemple, considérons la feuille de style suivante :
    @three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 { color: blue }

    La règle-at '@three-dee' n'est pas définie en CSS2. Ainsi, la règle-at (jusqu'à la troisième accolade droite incluse) est ignorée, et la feuille de style est réduite dans les faits à :

    H1 { color: blue }

4.3 Les valeurs

4.3.1 Les entiers et les nombres

Quelques valeurs peuvent avoir le type entier (dénoté par <integer>) ou le type nombre (dénoté par <nombre>). Les nombres et les entiers sont seulement spécifiés en notation décimale. Un <entier> consistent un, ou plusieurs, chiffres de "0" à "9". A <nombre> peut être un <entier> ou encore zéro, ou plusieurs chiffres, suivi par un point (.) et un, ou plusieurs, chiffres. Les deux types pouvant être précédés par le signe "-" ou "+".

Noter que plusieurs propriétés, qui admettent comme valeur un entier ou un nombre, limitent en fait leurs valeurs dans une plage donnée, souvent à une valeur positive.

4.3.2 Les longueurs

Les longueurs s'appliquent aux mesures horizontales et verticales.

Une valeur de longueur (dénotée par <longueur> dans cette spécification) est formée d'un caractère de signe facultatif ('+' ou '-', '+' étant le défaut), suivi immédiatement par un <nombre> (avec un point décimal ou non) et suivi immédiatement par un identifiant d'unité (ex. px, deg, etc.). Pour une valeur de longueur '0', l'identifiant d'unité est facultatif.

[Errata: Cependant, le type <nombre> admettant déjà le signe "+" ou "-", la définition précédente implique la possibilité de mettre deux caractères pour le signe. Bien que les types de valeurs suivants puissent en accepter deux, on considère qu'ils n'admettent qu'un caractère de signe :

  • Longueur
  • Pourcentage
  • Angle]

Certaines propriétés autorisent des valeurs de longueur négatives, mais cela peut compliquer le modèle de mise en forme, cela peut aussi dépendre des limites spécifiques des agents utilisateurs. Dans le cas où une valeur de longueur négative n'est pas reconnue, elle devrait être convertie à la valeur la plus proche qui le soit.

Il existe deux types d'unité de longueur : les relatives et les absolues. Les unités de longueurs relatives se rapportent à une autre propriété de longueur. Les feuilles de style qui en emploient seront plus facilement adaptable d'un média à un autre (par exemple d'un moniteur vers une imprimante laser).

Voici les unités relatives :

  • em : la valeur de 'font-size' pour la police concernée
  • ex : la valeur de 'x-height' pour la police concernée
  • px : une quantité de pixels, en fonction de l'appareil de visualisation.

Exemple(s) :

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

L'unité 'em' correspond à la valeur calculée pour la propriété 'font-size' d'un élément donné. Sauf quand cette unité est spécifiée dans la propriété 'font-size' elle-même, auquel cas, elle se réfère à la taille de la police de l'élément parent. On peut l'utiliser pour des mesures de quantités verticales ou horizontales. (En typographie, on l'appelle aussi carré typographique ou corps).

L'unité 'ex' est définie par rapport à la valeur de la propriété 'x-height'. Cette valeur correspond à la hauteur du caractère "x" minuscule. Elle est définie même pour les polices qui n'en contiennent pas.

Exemple(s) :

Ainsi :

H1 { line-height: 1.2em }

cette règle précise que la hauteur de ligne des éléments H1 sera 20% plus grande que leur taille de police. À l'inverse :

H1 { font-size: 1.2em }

la taille de police des éléments H1 sera 20% plus grande que la taille de police héritée par ceux-ci.

Les valeurs en 'em' et 'ex' se réfèrent à la valeur initiale de la propriété quand on les spécifie pour la racine de l'arbre du document (ex. "HTML" pour le langage HTML).

Les valeurs exprimées en pixel s'entendent relativement à la résolution de l'appareil de visualisation, c.à.d. le plus souvent un moniteur. Dans le cas où la densité de pixels de l'appareil de sortie est trop éloignée de celle d'un moniteur typique, l'agent utilisateur devrait redimensionner les valeurs en pixel. On recommande une valeur pour le pixel de référence qui soit égale à l'angle visuel d'un pixel sur un appareil de densité 96dpi (96 ppp) situé à une longueur de bras du spectateur. Pour une longueur de bras nominale de 28 pouces (71 cm), l'angle visuel serait de 0.0213 degrés.

À cette distance, un pixel correspond à une taille d'environ 0.26 mm (soit 1/96 pouce). Une fois retranscrit par une imprimante laser, pour une lecture à moins d'une longueur de bras (55 cm ou 21 pouces), celui-ci a une taille d'environ 0.21 mm. Avec une imprimante de résolution 300 ppp (point par pouce), il serait rendu en 3 points (0.25 mm) et, avec imprimante de 600 ppp, en environ 5 points.

Les deux illustrations suivantes montrent les conséquences de la distance de lecture et de la résolution d'un appareil sur la perception d'un pixel. Dans la première, une distance de lecture de 71 cm (28 pouce) correspond à un pixel de 0.26 mm, et une distance de 3.5 m (12 pied) à un pixel de 1.3 mm.

Montre que les pixels doivent grandir avec la distance. [D]

Dans la seconde, une aire de 1px par 1px est recouverte avec un seul point pour un appareil en basse résolution (un moniteur), alors que cette même surface nécessite 16 points pour un appareil en haute résolution (comme une imprimante laser en 400 ppp).

Montre qu'il faut plus de pixels d'appareil (points) pour couvrir une aire de 1x1 px en haute définition qu'en basse. [D]

Les éléments enfants n'héritent pas des valeurs relatives spécifiées pour leur parent ; ils en héritent (généralement) des valeurs calculées.

Exemple(s) :

Dans les règles suivantes, la valeur calculée de 'text-indent' des éléments H1, enfants de l'élément BODY, sera de 36pt, et non 45pt.

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* i.e., 36pt */
}
H1 { font-size: 15pt }

Les unités de longueurs absolues ne sont utiles que si les propriétés physiques du média de sortie sont connues. Voici les unités absolues :

  • in : pouce (inch) -- un pouce est égal à 2.54 cm.
  • cm : centimètre
  • mm : millimètre
  • pt : point -- le point de CSS2 est égal à 1/72 de pouce.
  • pc : pica -- un pica est égal à 12 points.

Exemple(s) :

H1 { margin: 0.5in }      /* pouces  */
H2 { line-height: 3cm }   /* centimètres */
H3 { word-spacing: 4mm }  /* millimètres */
H4 { font-size: 12pt }    /* points */
H4 { font-size: 1pc }     /* picas */

Si la valeur de longueur spécifiée n'est pas reconnue, les agents utilisateurs doivent en donner une valeur approchante

4.3.3 Les pourcentages

Une valeur de pourcentage (dénotée par <pourcentage> est formée d'un caractère facultatif pour le signe ('+' ou '-', '+' étant par défaut) immédiatement suivi par un <nombre> et immédiatement suivi par le caractère '%'.

Les valeurs de pourcentage sont toujours relatives à une autre valeur, par exemple une longueur. Chacune des propriétés qui admettent des pourcentages définit aussi la valeur à laquelle le pourcentage se rapporte. Cette valeur peut être celle d'une autre propriété du même élément, d'une propriété d'un ancêtre ou de la valeur issue du contexte de formatage (ex. la largeur d'un bloc conteneur). Quand une valeur de pourcentage est spécifiée pour une propriété de l'élément racine et que celle-ci est définie par rapport à la valeur héritée d'une propriété donnée, alors la valeur résultante est égale au produit de la valeur de pourcentage par la valeur initiale de cette propriété.

Exemple(s) :

Les éléments enfants héritant (généralement) des valeurs calculées de leur parent, dans l'exemple suivant, les enfants de l'élément P hériteront d'une valeur 12pt pour la propriété 'line-height', et non de la valeur en pourcentage (ici, 120%) :

P { font-size: 10pt }
P { line-height: 120% }  /* 120% de 'font-size' */

4.3.4 URL + URN = URI

Les URLs (Uniform Resource Locators, voir [RFC1738] et [RFC1808]) indiquent l'adresse d'une ressource sur le Web. Une nouvelle appellation destinée à identifier une ressource est l'URN (Uniform Resource Name). Les deux réunis forment ce qu'on nomme les URIs (Uniform Resource Identifiers, voir [URI]).

Les valeurs d'URI dans cette spécification sont dénotées par <uri>. On utilise la notation fonctionnelle "url()" pour désigner les URIs dans les valeurs de propriétés, comme ici :

Exemple(s) :

BODY { background: url("http://www.bg.com/pinkish.gif") }

Une valeur d'URI est formée par les caractères 'url(' suivis par un blanc facultatif, suivi par un guillemet facultatif simple (') ou double ("), suivis par l'URI lui-même, suivi par un guillemet fermant simple ou double, s'il y a lieu, suivi par un blanc facultatif et enfin par ')'. Les guillemets doivent être de la même sorte.

Exemple(s) :

Un exemple sans guillemets :

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Les parenthèses, les virgules, les blancs et les guillemets simples ou doubles qui apparaissent dans un URI doivent être échappés avec une barre oblique inverse, ex. '\(', '\)', '\,', etc.

Selon le type d'URI, il doit aussi être possible d'écrire les caractères précédents sous forme d'échappement URI, où "(" = %28, ")" = %29, etc., tel que décrit dans [URI].

Pour créer des feuilles de style modulaires indépendantes de l'adresse absolue d'une ressource, les auteurs peuvent employer des URIs relatifs. Les URIs relatifs (décrits dans [RFC1808]) sont résolus en URIs complets à partir d'un URI de base. L'algorithme normatif de ce processus est défini au chapitre 3 de RFC 1808. Pour les feuilles de style CSS, l'URI de base correspond à celui de la feuille de style, et non à celui du document source.

Exemple(s) :

Supposons par exemple que la règle suivante :

BODY { background: url("yellow") }

se trouve dans une feuille de style désignée par l'URI :

http://www.myorg.org/style/basic.css

L'arrière-plan de l'élément BODY dans le document source sera carrelé avec l'image issue de la ressource désignée par cet URI :

http://www.myorg.org/style/yellow

La manière de gérer les URIs qui pointent vers des ressources non disponibles ou inappropriées peut varier d'un agent utilisateur à l'autre.

4.3.5 Les compteurs

Les compteurs sont dénotés par des identifiants (voir les propriétés 'counter-increment' et 'counter-reset'). On se réfère à la valeur d'un compteur au travers des notations 'counter(<identifiant>)' ou 'counter(<identifiant>, <list-style-type>)'. La valeur par défaut étant 'decimal'.

Pour référencer une séquence de compteurs imbriqués, on utilise les notations 'counters(<identifiant>, <chaîne>)' ou 'counters(<identifiant>, <chaîne>, <list-style-type>)'. Voir "Les compteurs imbriqués et leur portée" dans le chapitre sur le contenu généré.

En CSS2, on ne peut se référer aux valeurs des compteurs qu'avec la propriété 'content'. Noter que la valeur 'none' est admise pour <list-style-type> : 'counter(x, none)' résulte en une chaîne vide.

Exemple(s) :

Voici une feuille de style qui numérote les paragraphes (P) pour chacun des chapitres (H1). Les paragraphes utilisent une numérotation en chiffre romains, suivis par un point et un espace :

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

Les compteurs qui sont hors du champs d'action d'une propriété 'counter-reset' sont considérés avoir été remis à zéro par la propriété 'counter-reset' de l'élément racine.

4.3.6 Les couleurs

La valeur d'un champs <couleur> est spécifiée par un mot-clé ou par une valeur numérique RGB.

La liste des noms de mots-clés de couleur est : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. Ces 16 couleurs sont définies dans la spécification HTML 4.0 ([HTML40]). En complément de ces couleurs, les utilisateurs peuvent spécifier des mots-clés qui correspondent aux couleurs utilisées par certains objets de l'environnement de l'utilisateur. Consulter le chapitre sur les couleurs système pour plus d'informations.

Exemple(s) :

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

On utilise le modèle de couleur RGB pour la spécification numérique des couleurs. Les exemples ci-dessous indiquent tous la même couleur :

Exemple(s) :

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }
EM { color: rgb(100%, 0%, 0%) }

Une valeur RGB en notation hexadécimale est formée d'un caractère '#' immédiatement suivi par trois ou bien six caractères hexadécimaux. La notation RGB en trois chiffres (#rgb) est convertie dans celle en six chiffres (#rrggbb) par réplication, et non par ajout de zéros. Par exemple, #fbo se transforme en #ffbb00. Ceci assure que la couleur blanche (#ffffff) puisse être spécifiée avec la notation courte (#fff) et que celle-ci soit indépendante de la profondeur de couleur de l'écran.

Une valeur RGB en notation fonctionnelle est formée par les caractères 'rgb(', suivis par une liste de trois valeurs numériques (soit trois entiers, soit trois pourcentages) séparées par des virgules et suivi par ')'. La valeur entière 255 correspond à 100% et à f ou ff en notation hexadécimale : rgb(255,255,255) = rgb(100%,100%,100%) = #fff. Les blancs sont permis autour de chacune des valeurs.

Toutes les couleurs RGB sont spécifiées dans l'espace de couleur sRGB (voir [SRGB]). La fidélité du rendu des couleurs peut varier d'un agent utilisateur à l'autre, mais l'emploi de sRGB définit une mesure objective et sans ambiguïté des couleurs, en accord avec des standards internationaux (voir [COLORIMETRY]).

Les agents utilisateurs conformes peuvent se limiter à appliquer une correction gamma dans leurs efforts à rendre les couleurs. L'espace sRGB spécifie un gamma d'affichage de 2.2 dans certaines conditions spécifique de vision. Les agents utilisateurs devraient adapter les couleurs données en CSS, en conjonction avec le rendu "naturel" du gamma d'un appareil de sortie, de manière, à produire un gamma effectif de 2.2. Voir le chapitre sur la correction gamma pour plus de détails. Noter que seules les couleurs spécifiées en CSS sont concernées, les images, par exemple, sont censées emporter leurs propres informations de couleur.

Les valeurs situées hors du gamut de l'appareil devraient être rognées : les valeurs de rouge, vert et bleu doivent être modifiées pour rester dans les limites supportées par l'appareil. Pour un moniteur CRT typique, dont le gamut est le même que celui de sRGB, ces trois règles sont équivalentes :

Example(s):

EM { color: rgb(255,0,0) }       /* entier de 0 à 255 */
EM { color: rgb(300,0,0) }       /* ramené à rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* ramené à rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* ramené à rgb(100%,0%,0%) */

D'autres appareils, dont les imprimantes, ont des gamuts différents de celui de sRGB ; certaines couleurs hors de la plage 0..255 de sRGB seront représentables (à l'intérieur du gamut de l'appareil), d'autres, bien que dans cette plage, seront hors du gamut de l'appareil et seront de ce fait rognées.

Remarque : Bien que les couleurs puissent avoir un impact informationnel important pour les documents, les rendant plus lisibles, merci de considérer le fait que certaines combinaisons de couleurs peuvent causer des difficultés aux utilisateurs qui ont des déficiences visuelles. Si vous utilisez une image de fond ou spécifiez une couleur d'arrière-plan, veuillez choisir des couleurs de premier plan en accord avec leur fond.

4.3.7 Les angles

Les valeurs d'angles (dénotées par <angle> dans le texte) sont employées avec les feuilles de style auditives.

Elles sont formées d'un caractère de signe facultatif ('+' ou '-', '+' étant par défaut) immédiatement suivi par un <nombre> et immédiatement suivi par un identifiant d'unité d'angle.

[Errata : Comme pour les longueurs, l'unité peut être omise si la valeur est "0" : on peut écrire "0deg" simplement "0".]

Les identifiants d'unité d'angle sont :

  • deg : degrés
  • grad : grades
  • rad : radians

Les valeur d'angle peuvent être négatives. L'agent utilisateur devrait les normaliser dans la plage de 0 à 360 degrés. Par exemple, -10deg et 350deg sont équivalents.

Un angle droit, par exemple, fait '90deg' ou '100grad' ou '1.570796326794897rad'.

4.3.8 Les durées

Les valeurs de durée (dénotées par <durée> dans ce texte) sont employées avec les feuilles de style auditives.

Elles sont formées d'un <nombre> immédiatement suivi par un identifiant d'unité de durée.

[Errata : Comme pour les longueurs, l'unité peut être omise si la valeur est "0" : on peut écrire "0ms" simplement "0".]

Les identifiants d'unité de durée sont :

  • ms : millisecondes
  • s : secondes

Les valeurs de durée ne peuvent pas être négatives.

4.3.9 Les fréquences

Les valeurs de fréquence (dénotées par <fréquence> dans le texte) sont employées avec les feuilles de style auditives.

Elles sont formées d'un <nombre> immédiatement suivi par un identifiant d'unité de fréquence.

[Errata : Comme pour les longueurs, l'unité peut être omise si la valeur est "0" : on peut écrire "0Hz" simplement "0".]

Les identifiants d'unité de fréquence sont :

  • Hz: Hertz
  • kHz: kilo Hertz

Les valeurs de fréquence ne peuvent pas être négatives.

Par exemple, 200Hz (ou 200hz) est un son grave et 6kHz (ou 6khz) est un son aigu.

4.3.10 Les chaînes

Les chaînes s'inscrivent entre des guillemets simples ou doubles. On ne peut pas mettre de guillemets doubles entre d'autres guillemets doubles, à moins de les échapper (ainsi, '\"' ou "\22"). De la même façon pour les guillemets simples ("\'" ou "\27").

Exemple(s) :

"voici une 'chaîne'"
"voici une \"chaîne\""
'voici une "chaîne"'
'voici une \'chaîne\''

Une chaîne ne peut pas contenir directement un caractère nouvelle ligne. Pour cela, on emploie le caractère échappé "\A" (en notation hexadécimale, A est le caractère Unicode pour une nouvelle ligne, celui-ci est donc la représentation générique pour "nouvelle ligne" en CSS). Voir la propriété 'content' pour un exemple.

Il est possible de couper les chaînes pour les répartir sur plusieurs lignes, pour des raisons esthétiques ou autres, mais il faut dans ce cas échapper la nouvelle ligne elle-même avec une barre oblique inverse (\). Par exemple, les deux sélecteurs qui suivent sont les mêmes :

Exemple(s) :

A[TITLE="un titre qui\
est assez court"] {/*...*/}
A[TITLE="un titre qui est assez court"] {/*...*/}

4.4 La représentation du documents par CSS

Une feuille de style CSS est une séquence de caractères issus du Jeu de Caractères Universel, Universal Character Set (voir [ISO10646]). Pour leur transport et leur stockage, ces caractères doivent être encodés selon un encodage compatible avec le jeu de caractères disponibles en US-ASCII (ex. ISO 8859-x, SHIFT JIS, etc.). Pour une bonne introduction aux jeux de caractères et leurs encodages, consulter la spécification HTML 4.0 ([HTML40], chapitre 5). Voir aussi la spécification XML 1.0 ([XML10], chapitres 2.2 et 4.3.3, et l'Appendice F.

Quand une feuille de style est incorporée dans un document, comme avec l'élément STYLE ou l'attribut "style" en HTML, celle-ci partage le même encodage de caractères que ce document.

Quand une feuille de style réside dans un fichier séparé, les agents utilisateurs doivent observer les priorités suivantes pour déterminer l'encodage des caractères du document (par ordre de priorité décroissant) :

  1. Un paramètre HTTP "charset" dans un champs "Content-Type" ;
  2. La règle-at @charset ;
  3. Des mécanismes du langage du document appelant (ex. l'attribut "charset" de l'élément LINK en HTML).

Il ne peut y avoir qu'une règle @charset dans une feuille de style externe et elle doit survenir au tout début de celle-ci, aucun caractère ne devant précéder. Cette règle ne doit pas apparaître dans une feuille de style incorporée. Les auteurs spécifient le nom d'un encodage après "@charset". Ce nom doit correspondre à celui d'un jeu de caractère inscrit dans les registres de l'IANA (voir [IANA] et aussi [CHARSETS] pour une liste complète de ceux-ci). Par exemple :

Exemple(s) :

@charset "ISO-8859-1";

Cette spécification ne précise pas lesquels des encodages de caractères un agent utilisateur doit reconnaître.

Noter que compter sur la construction avec @charset pose un problème théorique car on ne sait pas a priori la façon dont celle-ci est encodée. En pratique, cependant, les encodages les plus répandus sur Internet sont basés sur ASCII, UTF-16, UCS-4 ou (rarement) sur EBCDIC. Cela signifie en général que l'agent utilisateur est capable de détecter de façon sûre la famille d'encodage d'un document à partir de ses octets initiaux, ce qui lui permet ensuite d'en déterminer l'encodage exact.

4.4.1 La référence aux caractères absents d'un encodage

Une feuille de style peut faire appel à des caractères qui n'ont pas de représentation dans un encodage donné. Ceux-ci doivent être écrits sous la forme de références échappées des caractères ISO 10646. C'est la même façon de faire que pour les références des caractères numériques dans les documents HTML ou XML (voir [HTML40], chapitres 5 et 25).

On ne devrait employer ce mécanisme que si on a affaire à un petit nombre seulement de ces caractères à échapper. Si la plus grande part du document y fait appel, alors les auteurs devraient employer un encodage plus approprié pour celui-ci (ex. avec un document qui contient beaucoup de caractères grecs, les auteurs pourraient utiliser "ISO-8859-7" ou "UTF-8").

Les processeurs intermédiaires qui utilisent un encodage différent peuvent traduire ces séquences d'échappement en des séquences d'octets pour ce même encodage. Néanmoins, il ne doivent pas modifier celles qui annulent le sens spécial d'un caractère ASCII.

Les agents utilisateurs conformes doivent faire correspondre correctement avec Unicode tous les caractères d'un encodage donné qui sont reconnus (ou se comporter comme s'ils le faisaient).

Par exemple, un document transmis en ISO-8859-1 (Latin-1) ne peut pas contenir des lettres greques telles quelles : "κουρος" ("kouros" en grec) doit être écrit "\3BA\3BF\3C5\3C1\3BF\3C2".

Remarque : En HTML 4.0, les références de caractères numériques sont interprétées dans les valeurs de l'attribut "style" mais pas dans le contenu de l'élément STYLE. À cause de cette divergence, nous recommandons aux auteurs l'utilisation du mécanisme d'échappement des caractères de CSS plutôt que les références de caractères numériques, pour l'attribut "style" comme pour l'élément STYLE :

<SPAN style="voice-family: D\FC rst">...</SPAN>

plutôt que :

<SPAN style="voice-family: D&#252;rst">...</SPAN>


Les sélecteurs

5 Les sélecteurs

  • 5.1 La reconnaissance d'un motif
  • 5.2 La syntaxe des sélecteurs
    • 5.2.1 Le regroupement
  • 5.3 Le sélecteur universel
  • 5.4 Les sélecteurs de type
  • 5.5 Les sélecteurs descendants
  • 5.6 Les sélecteurs d'enfant
  • 5.7 Les sélecteurs d'enfants adjacents
  • 5.8 Les sélecteurs d'attribut
    • 5.8.1 La correspondance entre les attributs et leurs valeurs
    • 5.8.2 Les valeurs par défaut des attributs dans les DTDs
    • 5.8.3 Les sélecteurs de classe
  • 5.9 Les sélecteurs d'ID
  • 5.10 Les pseudo-éléments et les pseudo-classes
  • 5.11 Les pseudo-classes
    • 5.11.1 La pseudo-classe :first-child
    • 5.11.2 Les pseudo-classes d'ancre: :link et :visited
    • 5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus
    • 5.11.4 La pseudo-classe de langue : :lang
  • 5.12 Les pseudo-éléments
    • 5.12.1 Le pseudo-élément :first-line
    • 5.12.2 Le pseudo-élément :first-letter
    • 5.12.3 Les pseudo-éléments :before et :after

5.1 La reconnaissance d'un motif

En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur.

Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Par exemple, ceux-ci sont insensibles à la casse en HTML, par contre, ils le sont en XML.

Cette table résume la syntaxe du sélecteur de CSS2 :

Motif | Signification | Décrit au chapitre...
* | Correspond à tout élément. | Sélecteur universel
E | Correspond à tout élément E (c.à.d., un élément de type E). | Sélecteurs de type
E F | Correspond à tout élément F qui est un descendant de l'élément E. | Sélecteurs descendants
E > F | Correspond à tout élément F aussi un enfant de l'élément E. | Sélecteurs d'enfant
E:first-child | Correspond à un élément E aussi le premier enfant de son élément parent. | La pseudo-classe :first-child
E:link E:visited | Correspond à un élément E qui est une ancre dans la source dont le lien n'a pas été visité (:link) ou bien l'a déjà été (:visited). | Les pseudo-classes de lien
E:active E:hover E:focus | Correspond à l'élément E au cours de certaines actions de l'utilisateur. | Les pseudo-classes dynamiques
E:lang(c) | Correspond à l'élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document). | La pseudo-classe :lang()
E + F | Correspond à tout élément F immédiatement précédé par un élément E. | Les sélecteurs adjacents
E[foo] | Correspond à tout élément E avec l'attribut "foo" (quelles qu'en soient les valeurs). | Sélecteurs d'attribut
E[foo="warning"] | Correspond à tout élément E dont l'attribut "foo" a exactement la valeur "warning". | Sélecteurs d'attribut
E[foo~="warning"] | Correspond à tout élément E dont l'attribut "foo" a pour valeur une liste de valeurs séparées par des blancs et dont une de celles-ci est "warning". | Sélecteurs d'attribut
E[lang|="en"] | Correspond à tout élément E dont l'attribut "lang" a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par "en". | Sélecteurs d'attribut
DIV.warning | Seulement en HTML. Identique à DIV[class~="warning"]. | Sélecteurs de classe
E#myid | Correspond à tout élément E dont l'ID est "myid". | Sélecteurs d'ID

5.2 La syntaxe des sélecteurs

Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par un sélecteur d'attribut, un sélecteur d'ID ou une pseudo-classes, zéro ou plusieurs de ceux-ci, dans n'importe quel ordre. Le sélecteur simple a une correspondance si tous ses composants sont vérifiés.

Un sélecteur consiste en une succession d'un, ou plusieurs, sélecteurs simples, séparés par des combinateurs. Ces combinateurs sont : les blancs et les caractères ">" et "+". Des blancs peuvent être insérés entre un combinateur et ses sélecteurs simples.

Les éléments de l'arbre du document en correspondance avec un sélecteur sont appelés sujets de ce sélecteur. Un sélecteur consistant en un seul sélecteur simple est en correspondance avec tout élément qui satisfait à ses conditions. Quand on place un sélecteur simple avec son combinateur au début d'une succession d'autres sélecteurs, ceci entraîne un supplément de contraintes pour la correspondance. C'est pourquoi, les sujets d'un sélecteur forment toujours un sous-ensemble des éléments qui correspondent au sélecteur simple situé le plus à droite.

On peut accoler un pseudo-élément au dernier sélecteur d'une succession ; dans ce cas, l'information de style s'applique sur une partie de chacun des sujets.

5.2.1 Le regroupement

On peut regrouper plusieurs sélecteurs dans une liste, séparés par des virgules, quand ceux-ci partagent les mêmes déclarations.

Exemple(s) :

Dans cet exemple, on condense trois règles qui ont les mêmes déclarations en une seule :

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

ceci est équivalent à :

H1, H2, H3 { font-family: sans-serif }

CSS offre d'autres mécanismes "raccourcis" semblables, comme les déclarations multiples et les propriétés raccourcies.

5.3 Le sélecteur universel

Le sélecteur universel, noté "*", est vérifié pour le nom de n'importe quel type d'élément. Il agit sur chacun des éléments de l'arbre du document.

Si le sélecteur universel n'est pas le seul composant d'un sélecteur simple, on peut l'omettre. Par exemple :

  • *[LANG=fr] et [LANG=fr] sont équivalents.
  • *.warning et .warning sont équivalents.
  • *#myid et #myid sont équivalents.

5.4 Les sélecteurs de type

Un sélecteur de type correspond au nom d'un type d'élément dans le langage du document. Il correspond à chaque instance de ce type d'élément dans l'arbre du document.

Exemple(s) :

La règle suivante concerne tous les éléments H1 d'un arbre :

H1 { font-family: sans-serif }

5.5 Les sélecteurs descendants

Un auteur peut vouloir disposer d'un sélecteur pour atteindre un élément donné, celui-ci étant lui-même un descendant d'un autre élément de l'arbre du document (ex. "Toucher ces éléments EM qui sont dans un élément H1"). Les sélecteurs descendants sont l'expression de cette relation dans un motif. Ceux-ci se composent de deux sélecteurs, ou plus, séparés par un blanc. Un sélecteur descendant de la forme "A B" se vérifie quand un élément B est un descendant arbitraire d'un élément A, son ancêtre.

Exemple(s) :

Considérons par exemple les règles suivantes :

H1 { color: red }
EM { color: red }

Bien que l'intention ait pu être l'emphase d'un texte en changeant sa couleur, l'effet sera perdu dans ce cas-ci :

<H1>Ce titre est <EM>très</EM> important</H1>

Nous tenons compte de cette éventualité en ajoutant une règle au jeu précédent, celle-ci fixe une couleur bleu au texte d'un élément EM survenant dans un élément H1 :

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

La troisième règle s'appliquera à l'élément EM de cet extrait-ci :

<H1>Ce <SPAN class="myclass">titre
est <EM>très</EM> important.</SPAN></H1>

Exemple(s) :

Avec ce sélecteur :

DIV * P

on touche les éléments P qui sont les petits-enfants, ou les descendants plus lointains, d'un élément DIV. Noter les blancs facultatifs de chaque côté du "*".

Exemple(s) :

Dans cette règle suivante, on a une combinaison de sélecteur descendant et de sélecteur d'attribut, celle-ci concerne les éléments qui, à la fois, (1) ont un attribut "href" et (2) sont contenus dans un élément P lui-même dans un élément DIV :

DIV P *[href]

5.6 Les sélecteurs d'enfant

Un sélecteur d'enfant se vérifie quand un élément est l'enfant d'un autre élément. Celui-ci se compose de deux sélecteurs, ou plus, séparés par le caractère ">".

Exemple(s) :

La règle suivante applique un style à tous les enfants P de l'élément BODY :

BODY > P { line-height: 1.3 }

Exemple(s) :

Dans cet exemple-ci, on a combiné un sélecteur descendant et un sélecteur d'enfant :

DIV OL>LI P

Cette règle concerne tout élément P qui est un descendant d'un élément LI, celui-ci devant être l'enfant d'un élément OL qui, à son tour, doit être un descendant de l'élément DIV. Noter l'absence des blancs, facultatifs, autour de la combinateur ">".

Pour des renseignements sur la façon de sélectionner le premier enfant d'un élément, voir le chapitre sur la pseudo-classe :first-child plus loin.

5.7 Les sélecteurs d'enfants adjacents

Les sélecteurs d'enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l'arbre du document et quand E1 y précède immédiatement E2.

Selon le contexte, les éléments adjacents génèrent un formatage des objets dont la mise en forme est gérée automatiquement (ex. les marges verticales des boîtes adjacentes qui fusionnent). Avec le combinateur "+", les auteurs peuvent ajouter des styles aux éléments adjacents.

Exemple(s) :

En exemple, cette règle précise qu'un élément P qui suit un élément MATH ne devrait pas avoir d'alinéa :

MATH + P { text-indent: 0 }

Le suivant produit une réduction de l'espace vertical entre un élément H1 et l'élément H2 qui le suit juste après :

H1 + H2 { margin-top: -5mm }

Exemple(s) :

Ici, la règle est similaire à la précédente, à la différence qu'elle comporte un sélecteur d'attribut en plus. Ainsi, une mise en forme particulière s'applique aux éléments H1 avec un attribut class="opener" :

H1.opener + H2 { margin-top: -5mm }

5.8 Les sélecteurs d'attribut

Avec CSS2, on peut spécifier des règles qui s'applique aux attributs définis dans le document source.

5.8.1 La correspondance entre les attributs et leurs valeurs

Les sélecteurs d'attribut peuvent trouver une correspondance de quatre façons :

[att]
Quand un élément a un attribut "att", quelle que soit sa valeur ;
[att=val]
Quand un élément a un attribut "att" dont la valeur est exactement "val" ;
[att~=val]
Quand un élément avec un attribut "att" qui admet comme valeur une suite de valeurs séparées par des blancs, une des valeurs est exactement "val". Avec ce sélecteur, les valeurs de la liste ne doivent pas contenir de blancs (car ceux-ci font déjà office de séparateurs) ;
[att|=val]
Quand un élément avec un attribut "att" qui admet comme valeur une suite de valeurs séparées par des tirets, la première valeur est "val". La correspondance intervient toujours au début de la valeur de l'attribut. Ceci, principalement, pour permettre une correspondance sur les sous-codes des langues qui sont décrits dans RFC 1766 ([RFC1766]).

Les valeurs d'attribut doivent être des identifiants ou des chaînes. La sensibilité à la casse des noms et des valeurs d'attributs dans les sélecteurs dépendent du langage du document.

Exemple(s) :

Par exemple, ce sélecteur d'attribut correspond avec ceux des éléments H1 qui ont un attribut "title", quelle que soit sa valeur :

H1[title] { color: blue; }

Exemple(s) :

Dans cet exemple, le sélecteur correspond avec tous les éléments SPAN dont la valeur de l'attribut "class" est exactement "exemple" :

SPAN[class=exemple] { color: blue; }

On peut utiliser plusieurs sélecteurs d'attribut qui se réfèrent à plusieurs attributs d'un élément, ou même, plusieurs fois au même attribut.

Exemple(s) :

Ici, le sélecteur correspond avec tous les éléments SPAN dont l'attribut "bonjour" a exactement la valeur "soleil" et l'attribut "adieu" exactement la valeur "nuages" :

SPAN[bonjour="soleil"][adieu="nuages"] { color: blue; }

Exemple(s) :

Les sélecteurs suivants illustrent la différence entre "=" et "~=". Le premier sera vérifié pour, en exemple, la valeur "copyright copyleft copyeditor" de l'attribut "rel". Le second uniquement quand l'attribut "href" aura la valeur "http://www.w3.org/".

A[rel~="copyright"]
A[href="http://www.w3.org/"]

Exemple(s) :

La règle suivante cache tous les éléments dont la valeur de l'attribut "lang" est "fr" (c.à.d. en langue française).

*[LANG=fr] { display : none }

Exemple(s) :

Cette règle-ci sera vérifiée pour les valeurs de l'attribut "lang" qui commence par "en", y inclus "en", "en-US" et "en-cockney" :

*[LANG|="en"] { color : red }

Exemple(s) :

De la même façon, la feuille de style auditive ci-dessous permet la lecture d'un dialogue avec des voix différentes pour chaque personnage :

DIALOGUE[character=romeo]
     { voice-family: "Lawrence Olivier", charles, male }

DIALOGUE[character=juliet]
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Les valeurs par défaut des attributs dans les DTDs

La correspondance se fait sur les valeurs d'attributs dans l'arbre du document. Pour des langages de document autres que HTML, les valeurs par défaut des attributs peuvent être définies dans un DTD ou ailleurs. Les feuilles de style devraient être construites pour fonctionner même si les valeurs par défaut n'étaient pas inclues dans l'arbre du document.

Exemple(s) :

Considérons, par exemple, un élément EXEMPLE avec un attribut "notation" et sa valeur par défaut "decimal". L'extrait du DTD pourrait être :

<!ATTLIST EXEMPLE notation (decimal,octal) "decimal">

Si la feuille de style contient les règles :

EXEMPLE[notation=decimal] { /*... paramètres par défaut des propriétés ...*/ }
EXEMPLE[notation=octal] { /*... autres paramètres ...*/ }

alors, pour les cas où l'attribut a une valeur par défaut, non fixé explicitement, il faudrait rajouter cette règle-ci :

EXAMPLE { /*... paramètres par défaut de la propriété ...*/ }

Ce sélecteur étant moins spécifique qu'un sélecteur d'attribut, celui-ci ne sera employé que dans les situations par défaut. Il faudra tenir compte explicitement de toutes les autres valeurs d'attribut qui ne doivent pas recevoir le même style que le défaut.

5.8.3 Les sélecteurs de classe

Pour les feuilles de style employées avec HTML, les auteurs, visant l'attribut "class", peuvent utiliser la notation avec un point (.) en remplacement de celle avec "~=". Ainsi, "DIV.valeur" et "DIV[class~=valeur]" ont la même signification en HTML. La valeur de l'attribut doit suivre immédiatement le caractère ".".

Exemple(s) :

Par exemple, on peut appliquer un style à ceux des élément avec l'attribut class~="pastoral", comme suit :

*.pastoral { color: green }  /* tous les éléments avec class~=pastoral */
ou simplement avec :
.pastoral { color: green }  /* tous les éléments avec class~=pastoral */

Dans ce qui suit, on applique seulement le style aux éléments H1 avec l'attribut class~="pastoral" :

H1.pastoral { color: green }  /* les éléments H1 avec class~=pastoral */

Selon ces règles, le premier élément H1 n'aurait pas son texte en vert, contrairement au second :

<H1>Pas vert</H1>
<H1 class="pastoral">Vraiment vert</H1>

Pour une correspondance sur un sous-ensemble des valeurs de "class", chacune des valeurs doit être précédée par un ".", dans n'importe quel ordre.

Exemple(s) :

Par exemple, cette règle suivante est vérifiée pour chacun des éléments P dont la valeur de l'attribut "class" est constituée d'une suite de valeurs séparées par des blancs, parmi celles-ci "pastoral" et "marine" :

P.pastoral.marine { color: green }

La règle est appliquée pour une valeur class="pastoral blue aqua marine", mais pas pour class="pastoral blue".

Remarque : Avec une telle importance donnée par CSS à l'attribut "class", les auteurs pourraient presque construire leur propre "langage de document" en partant d'éléments qui ont une faible vocation de présentation (comme DIV et SPAN en HTML) et en leur appliquant un style via cet attribut. Les auteurs devraient éviter une telle pratique car les significations des éléments de structure d'un langage de document sont reconnues et acceptées, celles des classes définies par un auteur risquant de ne pas l'être.

5.9 Les sélecteurs d'ID

Les langages de document peuvent contenir des attributs déclarés de type ID. Ceux-ci sont particuliers dans la mesure où il ne peut y avoir deux de ces attributs avec une même valeur ; quel que soit le langage du document, un attribut ID sert à identifier un élément unique. En HTML, les attributs ID sont représentés par "id" ; en XML, les applications peuvent utiliser d'autres noms pour ceux-ci, mais avec les mêmes restrictions.

Les auteurs peuvent utiliser l'attribut ID d'un langage donné pour identifier une instance d'un élément dans l'arbre du document. Un sélecteur d'ID de CSS correspond avec un tel élément au travers de l'identifiant qui lui est assigné. Ce sélecteur est formé du caractère "#" immédiatement suivi par la valeur de l'ID.

Exemple(s) :

Le sélecteur d'ID suivant correspond à l'élément H1 dont la valeur de l'attribut ID est "chapitre1" :

H1#chapitre1 { text-align: center }

Dans cet exemple, la règle s'applique à l'élément avec un ID dont la valeur est "z98y". Il s'agit de l'élément P :

<HEAD>
  <TITLE>Toucher P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Un texte élargi</P>
</BODY>

Par contre, dans celui-ci, la règle s'applique seulement à un élément H1 avec un ID dont la valeur est "z98y". Ici, l'élément P ne sera pas concerné :

<HEAD>
  <TITLE>Touche seulement H1</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Un texte élargi</P>
</BODY>

Les sélecteurs d'ID sont plus spécifiques que les sélecteurs d'attribut. En HTML, par exemple, le sélecteur #p123 a plus de poids que le sélecteur [ID=p123], compte tenu de la cascade.

Remarque : En XML 1.0 [XML10], c'est dans un DTD que l'on répertorie les attributs qui contiennent les IDs des éléments. Au moment d'interpréter un document XML, les agents utilisateurs ne lisant pas toujours le DTD, ceux-ci risquent de ne pas connaître l'ID d'un élément. Un auteur qui sait ou suspecte cette possibilité devrait employer un sélecteur d'attribut normal : [name=p371] plutôt que #p371. Comme l'ordre de cascade diffère selon qu'on emploie un sélecteur d'attribut ou un sélecteur d'ID, il peut être nécessaire de compléter les déclarations avec une priorité "!important" : [name=p371] {color: red !important}. Bien entendu, dans un document XML 1.0 sans DTD, les éléments n'ont pas du tout d'IDs.

5.10 Les pseudo-éléments et les pseudo-classes

En CSS2, le style est habituellement lié à un élément selon sa position dans l'arbre du document. Ce modèle simple est suffisant la plupart du temps, mais du fait de la structure de cet arbre, n'est pas adapté dans certains contextes usuels de publication. Par exemple, en HTML 4.0 (voir [HTML40]), il n'existe pas d'éléments qui se réfèrent à la première ligne d'un paragraphe, et donc aucun sélecteur simple en CSS ne peut y correspondre.

C'est pourquoi CSS introduit les concepts de pseudo-éléments et de pseudo-classes ce qui permet une mise en forme à partir d'informations absentes de l'arbre du document.

  • Les pseudo-éléments créent des abstractions dans l'arbre en plus des éléments déjà spécifiés par le langage du document. Ainsi, certains langages n'offrent pas de mécanismes de correspondance avec la première lettre ou la première ligne du contenu d'un élément. Les pseudo-éléments de CSS permettent aux auteurs d'y accéder, ce qui serait autrement impossible. Ces pseudo-éléments leur permettent de donner un style à un contenu qui n'apparaît même pas dans le document source. Par exemple, les pseudo-éléments :before et :after autorisent une action sur un contenu généré.
  • Les pseudo-classes classent les éléments selon des caractéristiques autres que leur nom, attribut ou contenu, celles-ci ne pouvant pas en principe être déduites de l'arbre du document. Les pseudo-classes peuvent être dynamiques, dans le sens où un élément peut les acquérir ou les perdre pendant l'interaction de l'utilisateur avec le document. Une exception, la pseudo-classe ':first-child', qui peut se déduire de l'arbre. La pseudo-classe ':lang()' également dans certains cas.

Ni les pseudo-éléments, ni les pseudo-classes n'apparaissent dans la source ou l'arbre du document.

Les pseudo-classes sont autorisées n'importe où dans le sélecteur, alors qu'un pseudo-élément ne peut être spécifié qu'après le sujet du sélecteur.

Les pseudo-éléments et pseudo-classes sont insensibles à la casse.

Certaines pseudo-classes s'excluent mutuellement, d'autres peuvent s'appliquer simultanément au même élément. Les conflits éventuels se résolvent selon l'ordre normal de cascade.

Les agents utilisateurs conformes à HTML peuvent ignorer toutes les règles comportant dans leur sélecteurs les pseudo-éléments :first-line ou :first-letter, ou bien, peuvent alternativement ne supporter qu'une partie de leurs propriétés.

5.11 Les pseudo-classes

5.11.1 La pseudo-classe :first-child

La pseudo-classe :first-child correspond au premier élément enfant d'un autre élément.

Exemple(s) :

Dans l'exemple suivant, le sélecteur désigne chacun des éléments P qui soit le premier enfant d'un élément DIV. La règle supprime l'alinéa du premier paragraphe d'un élément DIV :

DIV > P:first-child { text-indent: 0 }
Dans l'extrait suivant, ce même sélecteur viserait l'élément P dans l'élément DIV :
<P> Le dernier P avant la note.
<DIV class="note">
   <P> Le premier P à l'intérieur de la note.
</DIV>
mais, dans cet extrait-ci, il ne toucherait pas le second élément P :
<P> Le dernier P avant la note.
<DIV class="note">
   <H2>Note</H2>
   <P> Le premier P à l'intérieur de la note.
</DIV>

Exemple(s) :

La règle suivante applique un style de texte gras à chacun des élément EM descendants d'un élément P, celui-ci étant un premier enfant :

P:first-child EM { font-weight : bold }

Noter que les boîtes anonymes n'apparaissent pas dans l'arbre du document, c'est pourquoi elles ne sont pas prises en compte au moment de la mise en forme du premier enfant.

Par exemple, l'élément EM qui est dans :

<P>abc <EM>défaut</EM>
celui-ci est le premier enfant de l'élément P.

Les deux sélecteurs suivants sont équivalents :

* > A:first-child   /* A est le premier enfant pour tout élément */
A:first-child       /* Idem */

5.11.2 Les pseudo-classes d'ancre : :link et :visited

En général, les agents utilisateurs représentent différemment les liens qui n'ont pas été visités de ceux qui l'ont déjà été. CSS en fournit un équivalent au travers des pseudo-classes ':link' et ':visited'.

  • La pseudo-classe :link s'applique aux liens qui n'ont pas été visités ;
  • La pseudo-classe :visited s'applique lorsque le lien a été visité par l'utilisateur.

Remarque : Après un certain temps, les agents utilisateurs peuvent revenir de l'état visité à l'état non-visité du lien.

Ces deux états s'excluent mutuellement.

Le langage du document détermine quelles ancres ont des sources hyperliens. Ainsi en HTML 4.0, les pseudo-classes d'ancre s'appliquent aux éléments A avec un attribut "href". Les deux déclarations CSS2 suivantes produisent le même effet :

A:link { color: red }
:link  { color: red }

Exemple(s) :

Pour ce lien :

<A class="external" href="http://out.side/">lien externe</A>
si celui est visité, la règle suivante :
A.external:visited { color: blue }
celle-ci rendra bleue la couleur du lien.

5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus

Les agents utilisateurs interactifs changent parfois l'aspect du rendu en réponse aux actions de l'utilisateur. CSS2 propose trois pseudo-classes pour un usage courant :

  • La pseudo-classe :hover, qui est appliquée quand l'utilisateur désigne un élément (au moyen d'un appareil de pointage) sans l'activer. Par exemple, un agent utilisateur visuel pourrait appliquer celle-ci quand le pointeur (d'une souris) survole la boîte produite par un élément. Les agents utilisateurs qui n'ont pas de capacités interactives ne sont pas tenus d'appliquer cette pseudo-classe. Certains agents utilisateurs conformes dotés de ces capacités interactives peuvent être incapables de l'appliquer (ex. un crayon optique) ;
  • La pseudo-classe :active, qui est appliquée quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.
  • La pseudo-classe :focus, qui s'applique quand un élément reçoit l'attention (celui-ci acceptant les événements du clavier ou d'autres formes d'entrées de texte).

Ces pseudo-classes ne s'excluent pas mutuellement. Un élément peut correspondre à plusieurs d'entre elles au même moment.

CSS ne définit pas lesquels des éléments peuvent être dans un de ces états ou comment ceux-ci entrent et sortent de ces états. L'écriture peut varier, selon que les éléments réagissent aux actions de l'utilisateur, ou non ; les divers appareils et agents utilisateurs peuvent avoir différentes façons de désigner ou d'activer les éléments.

Les agents utilisateurs ne sont pas tenus, en raison des transitions provoquées par les pseudo-classes, de remettre en forme le document en cours d'affichage. Par exemple, une feuille de style peut spécifier que la taille de la police ('font-size') d'un lien sous l'effet de la pseudo-classe :active soit plus grande que celle d'un lien inactif, et un agent utilisateur, comme cela peut modifier la position des lettres, peut en ignorer la règle.

Exemple(s) :

A:link    { color: red }    /* lien non-visité */
A:visited { color: blue }   /* lien visité   */
A:hover   { color: yellow } /* lien survolé     */
A:active  { color: lime }   /* lien activé    */

Noter que la règle A:hover doit être placé après A:link et A:visited, autrement les règles de cascade feront que la propriété 'color' spécifiée par celle-ci sera cachée. De la même façon, comme la règle A:active est placée après A:hover, la couleur spécifiée par celle-ci (lime) sera appliquée quand l'utilisateur active et survole l'élément A.

Exemple(s) :

Voici un exemple de combinaison de pseudo-classes dynamiques :

A:focus { background: yellow }
A:focus:hover { background: white }

Le dernier sélecteur correspond à un élément A qui a l'attention et qui est survolé.

Au sujet de la représentation des contours de l'objet qui a l'attention, consulter le chapitre sur les contours dynamiques pour l'attention.

Remarque : En CSS1, la pseudo-classe ':active' et les pseudo-classes ':link' et ':visited' s'excluaient mutuellement. Ce n'est plus le cas. Un élément peut correspondre aux pseudo-classes ':visited' et ':active' (ou ':link' et ':active'), les règles normales de cascade déterminant lesquelles des propriétés s'appliquent.

5.11.4 La pseudo-classe de langue : :lang

Quand le langage du document spécifie une manière de déterminer le langage humain d'un élément, on peut écrire des sélecteurs CSS pour viser un élément selon la langue que celui-ci emploie. Par exemple en HTML [HTML40], on peut déterminer la langue employée en combinant l'attribut "lang", l'élément META et, d'une certaine façon, des informations issues du protocole (tel que les entêtes HTTP). En XML, on utilise un attribut nommé xml:lang, d'autres méthodes de détermination spécifiques au langage d'un document pouvant exister.

La pseudo-classe ':lang(C)' est vérifiée pour un élément dans la langue C. La lettre C représente un code de langue tel que spécifié dans HTML 4.0 [HTML40] et RFC 1766 [RFC1766]. La correspondance s'effectue de la même façon que pour l'opérateur '|='.

Exemple(s) :

Les règles suivantes fournissent les marques de citations pour un document HTML, selon que celui-ci est en français ou en allemand :

HTML:lang(fr) { quotes: '« ' ' »' }
HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

La seconde paire de règles applique en fait la propriété 'quotes' aux éléments Q, en fonction de la langue du parent. Ceci pour tenir compte du choix des marques de citations, celles-ci dépendent typiquement de la langue employée par l'élément qui les contient, et non de la citation elle-même. Ainsi, ce morceau d'anglais qui devrait être « by surprise » (et non “by surprise”), au milieu de cette phrase en français.

5.12 Les pseudo-éléments

5.12.1 Le pseudo-élément :first-line

Le pseudo-élément :first-line produit un style particulier sur la première ligne formatée d'un paragraphe. Par exemple :

P:first-line { text-transform: uppercase }

La règle précédente signifie "mettre les lettres de la première ligne de chaque paragraphe en majuscule". Cependant, le sélecteur "P:first-line" ne correspond à aucun élément HTML réel. Celui-ci correspond en fait à un pseudo-élément que l'agent utilisateur conforme va insérer au début de chaque paragraphe.

Noter que la longueur de la première ligne dépend de plusieurs facteurs, dont la largeur de la page, la taille de la police, etc. Ainsi un paragraphe quelconque en HTML tel que :

<P>Voici un paragraphe HTML plutôt
long qui va être découpé en plusieurs
lignes. La première ligne sera identifiée
à l'aide d'une séquence de balises fictives.
Les autres lignes vont rester ordinaires
dans la suite du paragraphe.</P>
Celui-ci va apparaître avec le découpage des lignes suivant :
VOICI UN PARAGRAPHE HTML PLUTÔT LONG
qui va être découpé en plusieurs lignes.
La première ligne sera identifiée à
l'aide d'une séquence de balises fictives.
Les autres lignes vont rester ordinaires
dans la suite du paragraphe.
Un agent utilisateur pourrait le "récrire" et y inclure la séquence de balises fictives pour le pseudo-élément :first-line. Cette séquence fictive aide à représenter comment les propriété sont héritées.
<P><P:first-line>Voici un paragraphe HTML plutôt
long </P:first-line>qui va être découpé
en plusieurs lignes. La première ligne sera identifiée à
l'aide d'une séquence de balises fictives. Les autres lignes
vont rester ordinaires dans la suite du paragraphe.</P>

Quand un pseudo-élément coupe un élément réel, on peut souvent décrire l'effet désiré avec une séquence de balises fictives qui ferment puis ré-ouvrent cet élément. Ainsi, si on balise le paragraphe de l'exemple avec un élément SPAN :

<P><SPAN class="test">Voici un paragraphe HTML plutôt long
qui va être découpé en plusieurs lignes.</SPAN>
La première ligne sera identifiée à l'aide d'une séquence
de balises fictives. Les autres lignes vont rester ordinaires dans la suite du
paragraphe.</P>
L'agent utilisateur pourrait générer la séquence de balises fictives, ouvrantes et fermantes, de façon appropriée, pour l'élément SPAN au moment d'insérer celle du pseudo-élément :first-line.
<P><P:first-line><SPAN class="test"> Voici un paragraphe
HTML plutôt long</SPAN></P:first-line><SPAN class="test"> qui
va être découpé en plusieurs lignes.</SPAN> La
première ligne sera identifiée à l'aide d'une séquence de
balises fictives. Les autres lignes vont rester ordinaires dans la suite du
paragraphe.</P>

Dans le cas où une certaine première ligne est aussi la première d'un certain élément de type bloc A et en même temps que l'ancêtre B de celui-ci, la séquence de balise fictive devient :

<B>...<A>...<B:first-line><A:first-line>Voici la première ligne</A:first-line></B:first-line>

Toutes les balises fictives se trouvent dans le plus petit des élément de type bloc, l'ordre d'imbrication des balises fictives A:first-line et B:first-line correspondant à celui des éléments A et B.

La "première ligne mise en forme" d'un élément de type bloc correspond à la première ligne dans le flot de l'élément, ignorant ainsi d'éventuels éléments flottants ou en position absolue. Par exemple :

<div>
  <p style="float: left">Paragraphe flottant...</p>
  <p>La première ligne commence ici...</p>
</div>

Un sélecteur 'div:first-line' s'appliquerait à la première ligne du second paragraphe, car le premier paragraphe se trouve en dehors du flot normal.

Le pseudo-élément :first-line ne peut s'attacher qu'à un élément de type bloc.

Le pseudo-élément :first-line est similaire à un élément de type en-ligne, avec certaines restrictions. Seules les propriétés suivantes peuvent lui être appliquées : les propriétés de police, les propriétés de couleur, les propriétés d'arrière-plan, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' et 'clear'.

5.12.2 Le pseudo-élément :first-letter

Le pseudo-élément :first-letter peut être employé pour faire des capitales initiales et des lettrines, ce sont des effets typographiques courants. Ce genre de lettre initiale est assimilé à un élément de type en-ligne quand la valeur de sa propriété 'float' est 'none', et assimilé à un élément flottant autrement.

Le pseudo-élément :first-letter admet ces propriétés : les propriétés de police, les propriétés de couleur, les propriétés d'arrière-plan, 'text-decoration', 'vertical-align' (seulement si la valeur de la propriété 'float' est 'none'), 'text-transform', 'line-height', les propriétés de marge, les propriétés d'espacement, les propriétés de bordure, 'float', 'text-shadow' et 'clear'.

Cette feuille de style produit une lettrine qui s'étend sur deux lignes :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Lettrine</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Les premiers</SPAN> mots parmi ceux d'un article
  de journal.</P>
 </BODY>
</HTML>

Ce qui pourrait apparaître de cette manière :

Illustration de l'effet combiné des pseudo-éléments :first-letter et :first-line. [D]

La séquence de balises fictives en est :

<P>
<SPAN>
<P:first-letter>
L
</P:first-letter>es premiers
</SPAN>
mots parmi ceux d'un article de journal.
</P>

Noter que les balises du pseudo-élément :first-letter (c.à.d., le premier caractère) viennent buter contre le contenu, alors que la balise ouvrante du pseudo-élément :first-line s'insère juste après celle ouvrante de l'élément auquel il est accolé.

Pour obtenir le formatage des lettrines traditionnelles, les agents utilisateurs peuvent approcher les tailles des polices, par exemple dans l'alignement des lignes de base. Le contour des glyphes peut aussi intervenir dans le formatage.

Les caractères de ponctuation (c.à.d. les caractères définis en Unicode [UNICODE] dans les classes de ponctuation "open" (Ps), "close" (Pe) et "other" (Po) ), qui précèdent la première lettre, ceux-ci devraient être pris en compte, comme ici :

Les guillemets initiaux devraient être pris en compte par :first-letter. [D]

Le pseudo-élément :first-letter ne peut correspondre qu'avec une partie d'un élément de type bloc.

Certaines combinaisons de lettres, dans une langue donnée, peuvent obéir à des règles particulières. En hollandais, par exemple, quand la combinaison "ij" survient au début d'un mot, le pseudo-élément :first-letter devrait les prendre en compte ensemble.

Exemple(s) :

L'exemple suivant illustre l'interaction de pseudo-éléments qui sont enchevêtrés. La première lettre de chacun des éléments P sera verte et aura une taille de police de '24pt'. La suite de cette première ligne sera bleue, le reste des lignes du paragraphe sera rouge.

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Voici un morceau de texte qui est formaté sur deux lignes.</P>

En supposant qu'un retour à la ligne survient avant le mot "sur", la séquence de balises fictives en serait :

<P>
<P:first-line>
<P:first-letter>
V
</P:first-letter>oici un morceau de texte qui est formaté
</P:first-line>
sur deux lignes.
</P>

Noter que l'élément P:first-letter se tient à l'intérieur de l'élément P:first-line. Le pseudo-élément :first-letter hérite des propriétés appliquées au pseudo-élément :first-line, cependant, si on lui spécifie une même propriété, c'est la valeur de cette dernière qui sera retenue.

5.12.3 Les pseudo-éléments :before et :after

Les pseudo-élément ':before' et ':after' servent à insérer un contenu généré avant ou après celui d'un élément. Le chapitre sur le texte généré en donne une explication.

Exemple(s) :

H1:before {content: counter(chapno, upper-roman) ". "}

En combinaison avec les pseudo-éléments :first-line et :first-letter, les pseudo-éléments :before et :after s'appliquent à la première lettre ou la première ligne, y compris le texte inséré.

Exemple(s) :

P.special:before {content: "Spécial ! "}
P.special:first-letter {color: gold}

Ceci donnera une couleur or au "S" de "Spécial ! ".


L'assignation des valeurs des propriétés, la cascade et l'héritage

6 L'assignation des valeurs des propriétés, la cascade et l'héritage

  • 6.1 Les valeurs spécifiées, calculées et réelles
    • 6.1.1 Les valeurs spécifiées
    • 6.1.2 Les valeurs calculées
    • 6.1.3 Les valeurs réelles
  • 6.2 L'héritage
    • 6.2.1 La valeur 'inherit'
  • 6.3 La règle @import
  • 6.4 La cascade
    • 6.4.1 L'ordre de cascade
    • 6.4.2 Les règles avec la valeur !important
    • 6.4.3 Le calcul de la spécificité d'un sélecteur
    • 6.4.4 L'ordre de priorité des indications de présentation en dehors de CSS

6.1 Les valeurs spécifiées, calculées et réelles

Une fois qu'un agent utilisateur a parcouru un document et en a construit un arbre, celui-ci, pour chacun des éléments de l'arbre, doit attribuer une valeur pour chacune des propriétés concernées par le type de média visé.

La valeur finale d'une propriété est le résultat d'un calcul en trois étapes : celle-ci est déterminée par la spécification (la valeur "spécifiée"), puis, si nécessaire, calculée en valeur absolue (la valeur "calculée") et finalement transformée en accord avec les contraintes de son contexte (la valeur "réelle").

6.1.1 Les valeurs spécifiées

Les agents utilisateurs doivent d'abord appliquer une valeur spécifiée à une propriété selon le mécanisme suivant (dans l'ordre de priorité) :

  1. Si la cascade donne une valeur, utiliser celle-ci ;
  2. Sinon, si la propriété est héritée, utiliser la valeur de l'élément parent, qui est en général une valeur calculée ;
  3. Sinon, utiliser la valeur initiale de la propriété. Cette valeur initiale est définie pour chaque propriété.

La racine de l'arbre du document n'ayant pas de parent, et ne pouvant donc pas hériter de valeurs, c'est la valeur initiale qui est utilisée si nécessaire.

6.1.2 Les valeurs calculées

Les valeurs spécifiées peuvent être absolues (ex. les valeurs 'red' et '2mm' ne sont pas relatives à une autre valeur) ou relatives (ex. les valeurs 'auto', '2em' et '12%' se rapportent à une autre valeur). Une valeur absolue ne requiert aucune opération supplémentaire pour établir sa valeur calculée.

Par contre, une valeur relative doit subir une transformation qui aboutit à sa valeur calculée : une valeur en pourcentage doit être multipliée par une valeur de référence (celle-ci est précisée pour chaque propriété), une valeur avec une unité relative (em, ex, px) devra devenir absolue par multiplication avec les tailles de police ou de pixel appropriées, les valeurs 'auto' doivent être calculée selon les formules données pour chaque propriété, certains mots-clés ('smaller', 'bolder', 'inherit') doivent être remplacés en accord avec leurs définitions.

Dans la plupart des cas, les éléments héritent de valeurs calculées. Cependant, certaines propriétés ont des valeurs spécifiées qui sont héritées (ex. la valeur numérique de la propriété 'line-height'). Dans les cas où les éléments enfants n'héritent pas de valeurs calculées, ceci est décrit dans les définitions des propriétés.

6.1.3 Les valeurs réelles

Bien qu'une valeur calculée soit en principe prête à l'emploi, un agent utilisateur peut ne pas pouvoir l'utiliser dans un environnement donné. Par exemple, celui-ci ne peut rendre les épaisseurs des bordures qu'avec un nombre entier de pixels, en conséquence, il lui faudra peut-être effectuer une approximation. La valeur réelle est égale à la valeur calculée après approximation éventuelle.

6.2 L'héritage

Les éléments enfants héritent de certaines valeurs de leurs éléments parents dans l'arbre du document. Chacune des propriété définit si elle est héritée, ou non.

Supposons un élément accentué (ici EM) dans un élément H1 :

<H1>Le titre <EM>est</EM> important !</H1>

Si aucune couleur n'est précisée pour l'élément EM, le mot accentué "est" héritera de la couleur de l'élément parent, ainsi, si l'élément H1 a une couleur bleu, EM le sera également.

Pour appliquer une propriété de style "par défaut" à un document, un auteur peut l'appliquer à la racine de l'arbre du document. Par exemple en HTML, on peut utiliser les éléments HTML ou BODY pour cet usage. Noter que ceci fonctionnera même; si on omet la balise BODY dans la source HTML, l'interpréteur HTML inférant la balise manquante.

Exemple(s) :

Par exemple ici, tous les descendants de l'élément BODY auront la valeur de couleur 'black', la propriété 'color' étant héritée :

BODY { color: black; }

Les valeurs de pourcentage spécifiées ne sont pas héritées, celles calculées le sont.

Exemple(s) :

Par exemple, cette feuille de style :

BODY { font-size: 10pt }
H1 { font-size: 120% }

et cet extrait d'un document :

<BODY>
  <H1>Un <EM>grand</EM> titre</H1>
</BODY>

Ici, la propriété 'font-size' de l'élément H1 aura une valeur calculée de '12pt' (120% de la valeur de son parent). Et, comme la valeur de la propriété 'font-size' est héritée, la valeur calculée pour l'élément EM sera aussi '12pt'. Si l'agent utilisateur ne dispose pas d'une police de 12pt mais, par exemple, d'une police de 11pt, la valeur réelle de la propriété 'font-size' de ces éléments pourrait être '11pt'.

6.2.1 La valeur 'inherit'

On peut spécifier pour chacune des propriétés la valeur 'inherit', ce qui signifie, pour un élément donné, que la propriété de cet élément prend la même valeur calculée que pour celle de son parent. La valeur héritée qui est normalement utilisée comme une valeur refuge, peut être renforcée par une valeur 'inherit' explicite.

[Errata: La valeur 'inherit' provoque l'héritage des valeurs par les propriétés. Ceci s'applique également aux propriétés dont la valeur n'est normalement pas héritée.]

Exemple(s):

Dans l'exemple ci-dessous, on applique les propriétés 'color' et 'background' à l'élément BODY. La valeur de 'color' sera héritée par tous ses éléments et leur fond sera transparent. Si ces règles font partie de la feuille de style de l'utilisateur, un texte en noir sur fond blanc sera respecté dans tout le document.

BODY {
  color: black !important;
  background: white !important;
}

* {
  color: inherit !important;
  background: transparent;
}

6.3 La règle @import

La règle '@import' permet aux utilisateurs l'importation de règles de style à partir d'une autre feuille de style. Les règles @import doivent précéder toutes autres règles dans la feuille de style. Le mot-clé '@import' doit être suivi de l'URI de la feuille de style à intégrer. On admet aussi la forme avec une chaîne de caractères, celle-ci sera considérée comme étant enserrée dans url(...).

Exemple(s) :

Les lignes suivantes ont une signification équivalente et illustrent les deux syntaxes (celle avec "url()" et celle avec une simple chaîne) :

@import "mystyle.css";
@import url("mystyle.css");

Comme les agents utilisateurs ne sont pas tenus de rassembler les ressources pour des types de média inconnus d'eux, les auteurs peuvent spécifier des règles @import selon les médias requis. Les imports conditionnels précisent leurs types, séparés par des virgules après l'URI.

Exemple(s) :

Les feuilles de styles importées et enveloppées dans une règle @media produiraient les mêmes effets, avec ce média, que les feuilles de style suivantes, néanmoins ces dernières peuvent épargner aux agents utilisateurs des téléchargements inutiles.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

Si le type de média n'est pas précisé, l'import est inconditionnel. De même, si on spécifie le type de média 'all'.

6.4 La cascade

Les feuilles de style ont trois origines différentes : l'auteur, l'utilisateur et l'agent utilisateur.

  • L'auteur : produit des feuilles de style pour un document source selon les conventions du langage de ce document. Par exemple en HTML, celles-ci peuvent être incorporées dans le document ou reliées à celui-ci.
  • L'utilisateur : peut être capable d'indiquer une information de style pour un document particulier. Par exemple, celui-ci peut désigner une feuille de style contenue dans un fichier ou un agent utilisateur peut fournir l'interface pour produire une feuille de style personnelle (ou faire comme s'il l'avait fait).
  • L'agent utilisateur: l'agent utilisateur conforme doit appliquer sa feuille de style par défaut (ou faire comme s'il l'avait fait) avant toutes les autres feuilles de style d'un document. Cette feuille de style devrait présenter les éléments du langage du document de façon à satisfaire au rendu généralement admis pour ceux-ci dans ce langage. Par exemple, pour des navigateurs visuels, l'élément EM en HTML est rendu avec une police en italique. Voir l'appendice A pour une feuille de style par défaut recommandée pour les documents HTML 4.0.

    Noter que cette feuille de style par défaut peut varier si l'utilisateur change les réglages de son système (ex. les couleurs du système). Cependant, il peut être impossible de modifier les valeurs de celle-ci, en raison d'une implémentation réduite de l'agent utilisateur.

Les champs d'action de ces trois feuilles de style vont se recouper, leur interaction dépendant des règles de la cascade.

La cascade de CSS définit un ordre de priorité, ou poids, pour chaque règle de style. Quand plusieurs règles sont mises en œuvre, celle avec le plus grand poids a la préséance.

Les règles des feuilles de style de l'auteur ont, par défaut, plus de poids que celles de l'utilisateur. Au contraire, l'ordre de priorité est inversé pour les règles "!important". Les règles d'un auteur et d'un utilisateur sont prioritaires sur celles de la feuille de style par défaut de l'agent utilisateur.

Les feuilles de style importées suivent aussi la cascade, leur poids dépendant de leur ordre d'importation. Des règles étant spécifiées dans une feuille de style donnée, celles-ci remplacent les règles de même poids importées d'une autre feuille de style. Les feuilles de style importées peuvent elles-même importer et remplacer d'autres feuilles de style, récursivement, les mêmes règles de préséance leur étant appliquées.

6.4.1 L'ordre de cascade

Pour trouver la valeur d'une combinaison élément/propriété, les agents utilisateurs doivent suivre l'ordre de tri suivant :

  1. Trouver toutes les déclarations qui concernent l'élément et la propriété en question, pour le type de média visé. Celles-ci s'appliquent si le sélecteur correspond à cet élément ;
  2. Un tri primaire est effectué sur les déclarations selon leur poids et leur origine : pour une déclaration normale, les feuilles de style de l'auteur surclassent celles de l'utilisateur, ces dernières surclassant la feuille de style par défaut. Pour une déclaration avec "!important", celles-ci surclassent les déclarations normales. Une feuille de style importée est considérée comme ayant la même origine que celle qui l'a importée ;
  3. Un tri secondaire est effectué selon la spécificité des sélecteurs : les plus spécifiques surclasseront ceux plus généraux. Les pseudo-éléments et les pseudo-classes sont considérés respectivement comme des éléments et des classes normaux ;
  4. Un tri final selon l'ordre de spécification : si deux règles ont les mêmes poids, origines et spécificités, c'est la dernière survenue qui l'emporte. Les règles issues de feuilles de style importées sont considérées comme étant survenues avant chacune de celles de la feuille de style elle-même.

Mis à part le cas de la valeur "!important" attachée à certaines déclarations individuelles, cette stratégie donne la priorité aux feuilles de style de l'auteur sur celles de l'utilisateur. C'est pourquoi, il est important que l'agent utilisateur lui laisse la possibilité de neutraliser l'effet d'une feuille de style donnée (ex. au moyen d'un menu déroulant).

6.4.2 Les règles avec la valeur !important

CSS essaye de préserver un équilibre entre les prérogatives de l'auteur et celles de l'utilisateur. Par défaut, les règles d'une feuille de style de l'auteur surclassent celles de l'utilisateur (voir la règle de cascade numéro 3).

Par souci d'équilibre, les déclarations avec "!important" (les mots-clés "!" et "important" suivent la déclaration) établissent ainsi leur préséance sur les déclarations normales. Aussi bien les feuilles de style de l'auteur que celles de l'utilisateur peuvent contenir des déclarations avec "!important", celles de l'utilisateurs ayant priorité. Cette fonction de CSS améliore l'accessibilité des documents, offrant à ceux des utilisateurs qui ont des besoins particuliers (une grande taille de police, d'autres combinaisons de couleur, etc.), une certaine maîtrise de la présentation.

Remarque : Voici un changement sémantique par rapport à CSS1. Dans cette spécification-là, les règles avec "!important" d'un auteur avaient préséance sur celles de l'utilisateur.

Le fait de déclarer une propriété raccourcie (ex. 'background') avec la valeur "!important" confère ce poids à toutes ses sous-propriétés.

Exemple(s) :

Dans l'exemple ci-dessous, la première règle de la feuille de style de l'utilisateur comporte une déclaration "!important", celle-ci surclasse la déclaration correspondante dans la feuille de l'auteur. La deuxième va également l'emporter, étant marquée "!important". Cependant, en l'absence de cette marque, la troisième de l'utilisateur ne sera pas retenue, au profit de la deuxième de l'auteur (par ailleurs, un style appliqué avec une propriété raccourcie). Autrement, sur la deuxième et la troisième règle de l'auteur, c'est la deuxième qui sera retenue, la troisième n'étant pas marquée "!important". Ceci montre que ce genre de déclaration a bien une fonction, même au sein des feuilles de style de l'auteur.

/* Extrait de la feuille de style de l'utilisateur */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* Extrait de la feuille de style de l'auteur */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

6.4.3 Le calcul de la spécificité d'un sélecteur

La spécificité d'un sélecteur est déterminée comme suit :

  • compter 1 si le sélecteur est un attribut 'style' plutôt qu'un sélecteur, sinon 0 (= a) (Dans HTML, les valeurs de l'attribut 'style' d'un élément sont des règles de feuille de style. Ces règles sont dépourvues de sélecteurs, donc a=1, b=0, c=0 et d=0)
  • compter le nombre d'attributs ID (= a) dans le sélecteur ;
  • compter le nombre des autres attributs et pseudo-classes dans le sélecteur (= b) ;
  • compter le nombre des noms d'élément dans le sélecteur (= c) ;
  • ignorer les pseudo-elements.

Assembler les quatre nombres a-b-c-d (dans un système de nombres avec une base étendue) pour obtenir la spécificité.

Exemple(s) :

Des exemples :

*             {}  /* a=0 b=0 c=0 d=0 -> spécificité =   0, 0, 0, 0 */
LI            {}  /* a=0 b=0 c=0 d=1 -> spécificité =   0, 0, 0, 1 */
UL LI         {}  /* a=0 b=0 c=0 d=2 -> spécificité =   0, 0, 0, 2 */
UL OL+LI      {}  /* a=0 b=0 c=0 d=3 -> spécificité =   0, 0, 0, 3 */
H1 + *[REL=up]{}  /* a=0 b=0 c=1 d=1 -> spécificité =   0, 0, 1, 1 */
UL OL LI.red  {}  /* a=0 b=0 c=1 d=3 -> spécificité =   0, 0, 1, 3 */
LI.red.level  {}  /* a=0 b=0 c=2 d=1 -> spécificité =   0, 0, 2, 1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> spécificité =   0, 1, 0, 0 */
style=" "         /* a=1 b=0 c=0 d=0 -> spécificité = 1, 0, 0, 0 */

Pour HTML, les valeurs de l'attribut "style" sont des règles de feuille de style. Ces règles n'ont pas de sélecteurs, mais dans l'optique du point 3 de l'algorithme de cascade, on considère qu'elles ont un sélecteur d'ID (spécificité : a=1, b=0, c=0). Et dans l'optique du point 4, on considère qu'elles surviennent après toutes les autres règles.

<HEAD>
<TITLE>Specificity Example</TITLE>
<STYLE type="text/css">
p#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

Dans l'exemple ci-dessus, la couleur de l'élément P serait verte. La déclaration dans l'attribut 'style' va surclasser celle dans l'élément STYLE du fait de la règle de cascade 3, puisqu'il a une plus grande spécificité.

Remarque : La spécificité est seulement basée sur la forme du sélecteur. En effet, un sélecteur de la forme "[id=p33]" est compté comme un sélecteur d'attribut (a=0, b=1, c=0), même si l'attribut "id" est défini comme un "ID" dans le DTD du document source.

6.4.4 L'ordre de priorité des indications de présentation en dehors de CSS

L'agent utilisateur peut privilégier les indications de présentation provenant d'autres sources que les feuilles de style, par exemple l'élément FONT ou l'attribut "align" en HTML. Dans ce cas, ces indications doivent être traduites dans leurs règles équivalentes de CSS avec une spécificité égale à zéro. Ces règles sont censées se trouver au début de la feuille de style de l'auteur, permettant leur surclassement par les règles subséquentes de cette feuille de style.

Remarque : Durant une période de transition, cette manière de faire facilitera la coexistence des attributs stylistiques et des feuilles de style.

Remarque : Pour CSS1, ces indications de présentations en dehors de CSS avaient une spécificité égale à 1, et non O. Ce changement est du à l'introduction du sélecteur universel, qui a une spécificité de 0.


Les types de médias

7 Les types de médias

  • 7.1 Introduction aux types de médias
  • 7.2 La spécification des feuilles de style en fonction du média
    • 7.2.1 La règle @media
  • 7.3 Les types de médias reconnus
    • 7.3.1 Les groupes de médias

7.1 Introduction aux types de médias

Une des fonctions primordiales des feuilles de style repose sur le fait de pouvoir spécifier comment représenter un document pour différents médias : un écran, une feuille de papier, un synthétiseur de parole, un appareil braille, etc.

Certaines propriétés CSS fonctionnent exclusivement avec un média donné (ex. la propriété 'cue-before' pour les agents utilisateurs auditifs). Cependant, il peut arriver qu'une même propriété fasse partie de différentes feuilles de style propres à un média, cette propriété prenant alors des valeurs en fonction de ce média. Par exemple, la propriété 'font-size' peut jouer un rôle aussi bien dans un rendu sur écran que dans une page imprimée. Ces deux médias sont suffisamment dissemblables pour nécessiter des valeurs particulières pour cette même propriété ; le rendu typique d'un document sur un moniteur demande une plus grande taille de police que sur une feuille de papier. L'expérience montre également que les polices sans-serif ont une plus grande lisibilité à l'écran, et inversement, que les polices serif sont plus lisibles sur le papier. Pour ces raisons, il faut pouvoir dire qu'une feuille de style, ou une partie de celle-ci, ne concerne que certains types de médias.

7.2 La spécification des feuilles de style en fonction du média

Pour l'instant, on peut adjoindre les feuilles de style appropriées aux médias concernés de deux façons :

  • En spécifiant le média visé dans la feuille de style au travers des règles-at @media ou @import ;

    Exemple(s) :

    @import url("loudvoice.css") aural;
@media print {
  /* la feuille de style pour l'impression vient ici */
}
  • En spécifiant le média visé dans le langage du document. Par exemple avec HTML 4.0 ([HTML40]), on utilise l'attribut "media" de l'élément LINK pour attacher une feuille de style externe à un média donné :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
      <TITLE>Un lien vers le média cible</TITLE>
      <LINK rel="stylesheet" type="text/css"
     media="print, handheld" href="foo.css">
   </HEAD>
   <BODY>
      <P>Le corps du document...
   </BODY>
</HTML>

La règle @import est définie dans le chapitre sur la cascade.

7.2.1 La règle @media

Une règle @media spécifie les types de médias (séparés par des virgules) d'un jeu de règles (entres des accolades). La construction @media permet d'écrire des règles pour divers médias au sein d'une même feuille de style :

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

7.3 Les types de médias reconnus

Un type de média nomme un jeu de propriétés CSS. Un agent utilisateur qui prétend reconnaître un type de média par son nom doit en appliquer toutes les propriétés.

Les noms choisis pour les types de médias CSS rappellent celui des appareils cibles pour lesquels les propriétés sont significatives. Suit la liste des types de médias, les descriptions entre parenthèses ne sont pas normatives. Ces descriptions donnent seulement une indication sur l'appareil auquel le type de média se réfère.

all
convient pour tous les appareils ;
aural
destiné aux synthétiseurs de parole. Voir les détails fournis dans le chapitre sur les feuilles de style auditives ;
braille
destiné aux appareils braille à retour tactile ;
embossed
destiné aux appareils à impression braille ;
handheld
destiné aux appareils portatifs (typiquement ceux avec petits écrans, monochromes et à bande passante limitée) ;
print
destiné à un support paginé opaque et aux documents vus sur écran en mode aperçu avant impression. Consulter le chapitre sur les médias paginés pour des informations sur les questions de mise en forme spécifiques à ceux-ci ;
projection
destiné aux présentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents. Consulter le chapitre sur les médias paginés pour des informations sur les questions spécifiques à ceux-ci ;
screen
destiné principalement aux moniteurs couleurs ;
tty
destiné aux médias utilisant une grille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifs aux capacités d'affichage réduites. Les auteurs ne devraient pas utiliser de valeurs exprimées en pixel avec ce type de média ;
tv
destiné aux appareils du type télévision (avec ces caractéristiques : basse résolution, couleur, défilement des pages limité, sonorisé).

Les noms des types de médias ne sont pas sensibles à la casse.

Comme les technologies évoluent rapidement, CSS2 n'arrête pas une liste définitive des types de médias pouvant être des valeurs pour @media.

Remarque : Des versions ultérieures de CSS pourraient accroître cette liste. Les auteurs ne devraient pas employer de noms de types de médias qui ne sont pas encore définis par la spécification CSS.

7.3.1 Les groupes de médias

Chacune des propriétés CSS définit les types de médias pour lesquels cette propriété doit être implémentée par un agent utilisateur conforme. Les propriétés s'appliquant généralement à plusieurs médias, la partie "Media" dans la définition de chacune d'entre elles en précise les groupes de médias plutôt qu'une liste des divers types individuels. La propriété s'applique ainsi à tous les types de médias concernés, ceux-ci étant représentés par des groupe de médias.

CSS2 définit les groupes de médias suivants :

  • continu ou paginé. Quand il est écrit "les deux", cela signifie que la propriété s'applique aux deux groupes de médias ;
  • visuel, auditif ou tactile ;
  • grille (pour les appareils avec grille de caractères) ou bitmap. Quand il est écrit "les deux", cela signifie que cette propriété s'applique aux deux groupes de médias ; groups.
  • interactif (pour les appareils qui interagissent avec l'utilisateur) ou statique (à l'inverse, pour ceux qui n'interagissent pas avec celui-ci). Quand il est écrit "les deux", cela signifie que la propriété s'applique aux deux groupes de médias ;
  • all (comprend tous les types de médias).

La table suivante montre les relations entre les groupes de médias et les types de médias :
Relations entre les groupes de médias et les types de médias
Types de médias | Groupes de médias
 | continu/paginé | visuel/auditif/tactile | grille/bitmap | interactif/statique
aural | continu | auditif | sans objet | les deux
braille | continu | tactile | grille | les deux
embossed | paginé | tactile | grille | les deux
handheld | les deux | visuel | les deux | les deux
print | paginé | visuel | bitmap | statique
projection | paginé | visuel | bitmap | statique
screen | continu | visuel | bitmap | les deux
tty | continu | visuel | grille | les deux
tv | les deux | visuel, auditif | bitmap | les deux


Le modèle des boîtes

8 Le modèle des boîtes

  • 8.1 Les dimensions des boîtes
  • 8.2 Exemples de marges, d'espacements et de bordures
  • 8.3 Les propriétés de marge : 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' et 'margin'
    • 8.3.1 La fusion des marges
  • 8.4 Les propriétés d'espacement : 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' et 'padding'
  • 8.5 Les propriétés de bordure
    • 8.5.1 L'épaisseur de bordure : les propriétés 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' et 'border-width'
    • 8.5.2 La couleur de bordure : les propriétés 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' et 'border-color'
    • 8.5.3 Le style de bordure : les propriétés 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' et 'border-style'
    • 8.5.4 Les propriétés raccourcies de bordure : 'border-top', 'border-bottom', 'border-right', 'border-left' et 'border'

Le modèle des boîtes de CSS décrit les boîtes rectangulaires qui sont générées pour les éléments de l'arbre du document et qui sont assemblées selon le modèle de mise en forme visuel. La boîte de page, qui en représente un cas particulier, est décrite plus en détails au chapitre sur les médias paginés.

8.1 Les dimensions des boîtes

Chaque boîte possède une aire de contenu (ex. une texte, une image, etc.) entourée en option par une aire d'espacement, une aire de bordure et une aire de marge ; Le schéma suivant illustre les relations entre ces aires et la terminologie employée pour les désigner :

[D]

On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.).

On appelle le périmètre de chacune des quatre aires (contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords :

Le bord du contenu ou bord interne
Celui-ci entoure le rendu du contenu de l'élément.
Le bord de l'espacement
Celui-ci entoure la boîte de l'espacement. Si la valeur de l'espacement est 0, son bord est confondu avec celui du contenu. Le bord d'espacement d'une boîte définit le bord du bloc conteneur établi par la boîte ;
Le bord de la bordure
Celui-ci entoure la boîte de la bordure. Si la valeur de la bordure est 0, son bord est confondu avec celui de l'espacement.
Le bord de la marge ou bord externe
Celui-ci entoure la boîte de la marge. Si la valeur de la marge est 0, son bord est confondu avec celui de la bordure.

On peut se référer à chacun de ces bords selon qu'il se trouve du côté gauche, droite, haut ou bas.

Les dimensions de l'aire du contenu d'une boîte, celles-ci étant la largeur du contenu et la hauteur du contenu, dépendent de plusieurs facteurs : l'élément générant la boîte a-t-il une propriété 'width' ou bien 'height', la boîte contient-elle du texte ou d'autres boîtes, la boîte est-elle une table, etc. Les largeurs et hauteurs des boîtes sont traitées dans le chapitre concernant les détails du modèle de mise en forme visuel.

On obtient la largeur de la boîte en additionnant les marges, bordures et espacements gauches et droites avec le largeur du contenu. De même pour la hauteur de la boîte, en additionnant les marges, bordures et espacement hauts et bas avec la hauteur du contenu.

Le style qui est appliqué à l'arrière-plan du contenu et aux aires de l'espacement et de la marge, est spécifié au travers de la propriété 'background' de l'élément qui génère la boîte. L'arrière-plan des marges est toujours transparent.

8.2 Exemples de marges, d'espacements et de bordures

Cet exemple illustre les interactions des marges, espacements et bordures. Soit le document HTML suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemples de marges, d'espacements et de bordures</TITLE>
    <STYLE type="text/css">
      UL {
        background: #ff9933;         /* orange */
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* Les bordures ne sont pas spécifiées */
      }
      LI {
        color: white;                /* Le texte a une couleur blanche */
        background: #3366cc;         /* Le fond du contenu et de l'espacement sera bleu */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Noter l'espacement droit 0px */
        list-style: none             /* Aucuns glyphes devant les items de liste */
                                     /* Les bordures ne sont pas spécifiées */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* Applique une bordure sur les quatre côtés */
        border-color: green;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>Premier élément de liste
      <LI class="withborder">Second élément de liste plus
           long pour montrer la mise à la ligne.
    </UL>
  </BODY>
</HTML>

celui-ci aboutit à un arbre du document avec, entre autres relations, un élément UL ayant deux éléments enfants LI.

Le premier des schémas qui suivent illustre ce que cela pourrait donner. Le second montre les interactions entre les marges, espacements et bordures de l'élément UL et ceux de ses éléments enfants LI.

[D]

Noter que :

  • La largeur du contenu de chaque boîte LI est calculée en partant du haut ; le bloc conteneur de chacune des boîtes LI est établi par l'élément UL ;
  • La hauteur de chacune des boîtes LI est issue de la somme de la hauteur du contenu et des espacements, bordures et marges hautes et basses. Noter que les marges verticales entres les deux boîtes ont fusionné ;
  • La largeur de l'espacement droit des boîtes LI ont une valeur de 0 (pour la propriété 'padding'). Ceci est visible dans la seconde illustration ;
  • Les marges des boîtes LI sont transparentes, elles le sont toujours, ainsi le fond des aires d'espacement et du contenu de l'élément UL, de couleur verte, est visible au travers de ces marges ;
  • Le second élément LI se voit appliquer une bordure en trait pointillé (par la propriété 'border-style').

8.3 Les propriétés de marge : 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' et 'margin'

Ces propriétés spécifient la largeur de l'aire de la marge d'une boîte. La propriété raccourcie 'margin' spécifie la valeur de la marge pour les quatre côtés à la fois, les autres propriétés fixant celle de leur côté respectif.

Les propriétés définies ici se réfèrent au type de valeur <marge-largeur>, celui-ci accepte une des valeurs suivantes :

<longueur>
Spécifie une largeur fixe ;
<pourcentage>
Le pourcentage est calculé par rapport à la largeur du bloc conteneur de la boîte générée. Ceci est vrai aussi pour les propriétés 'margin-top' et 'margin-bottom', sauf dans un contexte de page où le pourcentage se réfère à la hauteur de la boîte de la page.
auto
Voir le chapitre traitant du calcul des largeurs et hauteurs de marge pour son comportement.

Les valeurs négatives pour les propriétés de marge sont admises, sous réserve des implémentations particulières des agents utilisateurs.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Valeur : <marge-largeur> | inherit
Initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Média : visuel

Ces propriétés spécifient les marges du haut, de droite, du bas et de gauche d'une boîte.

Exemple(s) :

H1 { margin-top: 2em }
'margin'
Valeur : <marge-largeur>{1,4} | inherit
Initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

La propriété raccourcie 'margin' sert à spécifier de manière groupée les propriétés 'margin-top', 'margin-right', 'margin-bottom' et 'margin-left' dans la feuille de style.

Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour la marge du haut et celle du bas, et la seconde pour la marge droite et celle de gauche. Avec trois valeurs, la marge du haut reçoit la première valeur, les marges gauche et droite la deuxième et la marge du bas la troisième. Pour quatre valeurs, celles-ci s'appliquent respectivement aux marges du haut, de droite, du bas et de gauche.

Exemple(s) :

BODY { margin: 2em }         /* les quatres marges reçoivent la valeur 2em */
BODY { margin: 1em 2em }     /* les marges du haut et du bas = 1em, de droite et de gauche = 2em */
BODY { margin: 1em 2em 3em } /* haut=1em, droite=2em & gauche=2em, bas=3em */

Cette dernière règle équivaut à l'exemple ci-dessous :

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* valeur copiée du côté opposé (droit) */
}

8.3.1 La fusion des marges

Dans cette spécification, l'expression marges de fusion signifie que les marges adjacentes (sans qu'une aire d'espacement ou de bordure ne les séparent) de deux ou plusieurs boîtes (celles-ci pouvant être l'une à côté de l'autre ou imbriquées), ces marges se combinent pour n'en former qu'une seule.

En CSS2, les marges horizontales ne fusionnent jamais.

Les marges verticales peuvent fusionner entre certaines boîtes :

  • Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent. La largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes. Dans le cas de marges négatives, on soustrait la plus grande des valeurs des marges négatives adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes. Et s'il n'y pas de marges positives, on déduit de zéro la plus grande des marges négatives, en valeur absolue. Note : Les boîtes adjacentes peuvent être générées par des éléments sans liens de parenté, liens du même degré ou d'ascendance-descendance ;
  • Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas ;
  • Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas.

Consulter les exemples de marges, d'espacements et de bordures pour une illustration de la fusion des marges.

8.4 Les propriétés d'espacement : 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' et 'padding'

Ces propriétés spécifient la largeur de l'aire d'espacement d'une boîte. La propriété raccourcie 'padding' spécifie la valeur de l'espacement pour les quatres côtés à la fois, les autres propriétés fixant celle de leur côté respectif.

Les propriétés définies ici se réfèrent au type de valeur <espacement-largeur>, celui-ci accepte une des valeurs suivantes :

<longueur>
Spécifie une largeur fixe.
<pourcentage>
Le pourcentage est calculé par rapport à la largeur du bloc conteneur de la boîte générée. De même pour les propriétés 'padding-top' et 'padding-bottom'.

À la différence des propriétés de marge, les valeurs d'espacement ne peuvent pas être négatives. Les valeurs de pourcentage des propriétés d'espacement, tout comme celles des propriétés de marge, se réfèrent à la largeur du bloc conteneur de la boîte générée.

[Errata : Les cinq propriétés d'espacement ('padding', 'padding-top', 'padding-right', 'padding-bottom' et 'padding-left') devraient préciser qu'elles ne s'appliquent pas aux rangées, aux groupes de rangées, aux groupes d'entête, aux groupes de pied, aux colonnes et groupes de colonnes des tables.]

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Valeur : <espacement-largeur> | inherit
Initiale : 0
S'applique à : tous les éléments
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

Ces propriétés spécifient les espacements du haut, de droite, du bas et de gauche d'une boîte.

Exemple(s) :

BLOCKQUOTE { padding-top: 0.3em }
'padding'
Valeur : <espacement-largeur>{1,4} | inherit
Initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

La propriété raccourcie 'padding' sert à spécifier de manière groupée les propriétés 'padding-top', 'padding-right', 'padding-bottom' et 'padding-left' dans la feuille de style.

Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour l'espacement du haut et celui du bas, et la seconde pour l'espacement de droite et celui de gauche. Avec trois valeurs, l'espacement du haut reçoit la première valeur, les espacements gauche et droite la deuxième et l'espacement du bas la troisième. Pour quatre valeurs, celles-ci s'appliquent respectivement aux espacements du haut, de droite, du bas et de gauche.

La couleur ou l'image de la surface de l'aire d'espacement sont indiquées avec la propriété 'background' :

Exemple(s) :

H1 {
  background: white;
  padding: 1em 2em;
}

Dans cet exemple, on spécifie un espacement vertical de '1em' ('padding-top' et 'padding-bottom') et un espacement horizontal de '2em' ('padding-right' et 'padding-left'). L'unité 'em' s'entend relativement à la taille de la police de l'élément : une valeur '1em' correspond à la taille de la police utilisée.

8.5 Les propriétés de bordure

Ces propriétés spécifient l'épaisseur, la couleur et le style de l'aire de bordure d'une boîte. Celles-ci s'appliquent à tous les éléments.

Remarque : Plus particulièrement en HTML, les agents utilisateurs peuvent rendre les bordures de certains éléments (ex. les boutons, les menus, etc.) dans un aspect différent de celui des éléments "ordinaires".

8.5.1 L'épaisseur de bordure : les propriétés 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' et 'border-width'

Ces propriétés spécifient l'épaisseur de l'aire de bordure. Les propriétés définies ici se réfèrent au type de valeur <bordure-épaisseur>, celui-ci accepte l'une des valeurs suivantes :

thin
Une bordure mince.
medium
Une bordure moyenne.
thick
Une bordure épaisse.
<longueur>
L'épaisseur de la bordure a une valeur explicite. Cette valeur explicite ne peut être négative.

L'interprétation des trois premières valeurs dépend de l'agent utilisateur. Cependant, celui-ci doit respecter les directives suivantes :

'thin' <='medium' <= 'thick'.

De plus, leurs épaisseurs doivent rester constantes dans tout le document.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Valeur : <bordure-épaisseur> | inherit
Initiale : medium
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Ces propriétés spécifient les valeurs d'épaisseur des bordures du haut, de droite, du bas et de gauche d'une boîte.

'border-width'
Valeur : <bordure-épaisseur>{1,4} | inherit
Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété raccourcie sert à spécifier de manière groupée les propriétés 'border-top-width', 'border-right-width', 'border-bottom-width' et 'border-left-width' dans la feuille de style.

Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour la bordure du haut et celle du bas, et la seconde pour la bordure de droite et celle de gauche. Avec trois valeurs, la bordure du haut reçoit la première valeur, les bordures gauche et droite la deuxième et la bordure du bas la troisième. Pour quatre valeurs, celles-ci s'appliquent respectivement aux bordures du haut, de droite, du bas et de gauche.

Exemple(s) :

Les commentaires dans l'exemple ci-dessous précisent les valeurs des bordures du haut, de droite, du bas et de gauche :

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 La couleur de bordure : les propriétés 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' et 'border-color'

Ces propriétés spécifient la couleur des bordures d'une boîte.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Valeur : <couleur> | transparent | inherit
Initiale : la valeur de la propriété 'color'
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel
'border-color'
Valeur : [<couleur> | transparent]{1,4} | inherit
Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

La propriété 'border-color' spécifie la couleur des quatre côtés de la bordure. Voici la signification des valeurs que celle-ci admet :

<couleur>
Spécifie la valeur d'une couleur ;
transparent
La bordure est transparent (tout en ayant une épaisseur).

La propriété 'border-color' admet une à quatre valeurs, les valeurs étant appliquées sur les quatres côtés de la bordure de la même façon que pour la propriété 'border-width' définie plus haut.

Quand, pour un élément, aucune valeur de couleur n'est spécifiée par une propriété de bordure, les agents utilisateurs doivent utiliser celle de la propriété 'color' de cet élément comme valeur calculée pour la couleur de bordure.

Exemple(s) :

Ici, la bordure aura l'aspect d'un trait plein noir.

P {
  color: black;
  background: white;
  border: solid;
}

8.5.3 Le style de bordure : les propriétés 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' et 'border-style'

Ces propriétés spécifient le dessin des bordures d'une boîte (en trait plein, trait double, trait pointillé, etc.). Les propriétés définies ici se réfèrent au type de valeur <bordure-style>, celui-ci accepte l'une des valeurs suivantes :

none
Aucune bordure. Cette valeur force la valeur calculée de la propriété 'border-width' à 0 ;
hidden
Idem à 'none', sauf pour la résolution des conflits de bordure des éléments de table ;
dotted
La bordure est une ligne en pointillé ;
dashed
La bordure est une ligne en tirets ;
solid
La bordure est une ligne en trait plein.
double
La bordure est une ligne double, de deux traits pleins. La somme de ces lignes et de l'espace entre elles est égale à la valeur de 'border-width'.
groove
La bordure donne l'impression qu'elle est gravée dans le canevas ;
ridge
À l'opposé de 'groove', la bordure semble sortir du canevas ;
inset
La bordure donne l'impression que la boîte entière est incrustée dans le canevas ;
outset
À l'opposé de 'inset', la bordure donne l'impression que la boîte entière est extrudée du canevas.

Les bordures sont dessinées en surimpression sur l'arrière-plan de la boîte. Les couleurs adoptées pour le dessin des valeurs 'groove', 'ridge', 'inset' et 'outset' devraient se baser sur celle de la propriété 'border-color' de l'élément, cependant, les agents utilisateurs peuvent employer leur propre algorithme pour déterminer les couleurs qui vont être appliquées. Par exemple, si la propriété 'border-color' avait une valeur 'silver', un agent utilisateur pourrait simuler la pente d'une bordure à l'aide d'un dégradé allant du blanc vers un gris foncé.

Les agents utilisateurs conformes peuvent remplacer l'interprétation des valeurs 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' et 'outset' par celle de la valeur 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
Valeur : <bordure-style> | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel
'border-style'
Valeur : <bordure-style>{1,4} | inherit
Initial: voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

La propriété 'border-style' admet une à quatre valeurs, les valeurs étant appliquées sur les quatres côtés de la bordure de la même façon que pour la propriété 'border-width' définie plus haut.

Exemple(s) :

#xy34 { border-style: solid dotted }

Dans cet exemple, les bordures horizontales auront la valeur 'solid' et les verticales la valeur 'dotted'.

La valeur initiale de style de bordure étant 'none', aucune bordure ne sera visible si on ne spécifie pas de valeur de style pour celle-ci.

8.5.4 Les propriétés raccourcies de bordure : 'border-top', 'border-bottom', 'border-right', 'border-left' et 'border'

'border-top', 'border-right', 'border-bottom', 'border-left'
Valeur : [ <bordure-épaisseur> || <bordure-style> || [ <couleur> | transparent ] ] | inherit
Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété raccourcie spécifie les épaisseurs, les styles et les couleurs des bordures du haut, de droite, du bas et de gauche d'une boîte.

Exemple(s) :

H1 { border-bottom: thick solid red }

Cette règle-ci va appliquer une épaisseur, un style et une couleur à la bordure du bas, celle sous l'élément H1. Les valeurs omises dans la déclaration sont censées garder leur valeur initiale. Dans la règle suivante, comme celle-ci ne précise pas de valeur de couleur pour la bordure, celle-ci prendra la valeur de la propriété 'color' de l'élément H1 :

H1 { border-bottom: thick solid }
'border'
Valeur : [ <bordure-épaisseur> || <bordure-style> || [ <couleur> | transparent ] ] | inherit
Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

La propriété raccourcie 'border' spécifie les mêmes épaisseurs, couleurs et styles pour les quatre côtés d'une boîte. À la différence des propriétés 'margin' et 'padding', cette propriété 'border' ne permet pas de donner des valeurs propres à chacune des quatre bordures. Pour cela, il faut employer l'une, ou plusieurs, des propriétés individuelles de bordure.

Exemple(s) :

Par exemple, la première règle équivaut aux quatre qui la suivent :

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

Dans une certaine mesure, les actions des propriétés se recoupent, aussi l'ordre dans lequel elles surviennent revêt de l'importance.

Exemple(s) :

Considérons cet exemple :

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}

Ici, la valeur de la couleur de bordure gauche est 'black', et celles des autres bordures est 'red'. Ceci est causé par 'border-left' spécifiant l'épaisseur, le style et la couleur. Aucune valeur de couleur n'étant spécifiée, celle-ci est héritée de la propriété 'color'. Que cette dernière survienne après la propriété 'border-left' ne fait pas de différence.


Le modèle de mise en forme visuel

9 Le modèle de mise en forme visuel

  • 9.1 Introduction au modèle de mise en forme visuel
    • 9.1.1 La zone de visualisation
    • 9.1.2 Blocs conteneurs
  • 9.2 Le contrôle de la génération de la boîte
    • 9.2.1 Les éléments de type bloc et leurs boîtes
      • Les boîtes de bloc anonymes
    • 9.2.2 Les éléments de type en-ligne et leurs boîtes
      • Les boîtes en-ligne anonymes
    • 9.2.3 Les boîtes compactes
    • 9.2.4 Les boîtes en enfilade
    • 9.2.5 La propriété 'display'
  • 9.3 Les schémas de positionnement
    • 9.3.1 Le choix d'un schéma de positionnement : la propriété 'position'
    • 9.3.2 Les décalages des boîtes : les propriétés 'top', 'right', 'bottom', 'left'
  • 9.4 Le flux normal
    • 9.4.1 Le contexte de mise en forme bloc
    • 9.4.2 Le contexte de mise en forme en-ligne
    • 9.4.3 Le positionnement relatif
  • 9.5 Les flottants
    • 9.5.1 Le positionnement des flottants : la propriété 'float'
    • 9.5.2 Le contrôle du flux autour des flottants : la propriété 'clear'
  • 9.6 Le positionnement absolu
    • 9.6.1 Le positionnement fixe
  • 9.7 Les relations entre les propriétés 'display', 'position' et 'float'
  • 9.8 Comparaison entre les positionnements en flux normal, flottant et absolu
    • 9.8.1 Le flux normal
    • 9.8.2 Le positionnement relatif
    • 9.8.3 Faire flotter une boîte
    • 9.8.4 Le positionnement absolu
  • 9.9 La présentation en couches
    • 9.9.1 La spécification du niveau dans l'empilement : la propriété 'z-index'
  • 9.10 Le sens du texte : les propriétés 'direction' et 'unicode-bidi'

9.1 Introduction au modèle de mise en forme visuel

Ce chapitre 9 et le suivant décrivent le modèle de mise en forme visuel : l'interprétation par un agent utilisateur de l'arbre du document et du rendu de celui-ci par un média visuel .

Dans ce modèle, chaque élément de l'arbre produit zéro ou plusieurs boîtes selon le modèle de la boîte. La construction de ces boîtes est gouvernée par :

  • les dimensions de la boîte et son type ;
  • le schéma de positionnement (en flux normal, en positionnement flottant et absolu) ;
  • les relations entre les éléments dans l'arbre du document ;
  • des informations externes (ex. la taille de la zone de visualisation, les dimensions intrinsèques des images, etc.).

Les propriétés définies dans ce chapitre et le suivant concernent les médias continus et les médias paginés. Cependant, les propriétés de marge ont une signification particulière pour les médias paginés (voir le modèle de la page pour les détails).

Le modèle de mise en forme visuel ne précise pas tous les aspects de la mise en forme (ex. il ne spécifie pas d'algorithme pour l'interlettrage). Les agents utilisateurs conformes peuvent se comporter différemment pour les points de formatage qui ne sont pas abordés dans cette spécification.

9.1.1 La zone de visualisation

Les agents utilisateurs pour médias continus offrent généralement une zone de visualisation (une fenêtre ou une autre zone d'affichage sur un écran) grâce auquel les utilisateurs peuvent consulter un document. Les agents utilisateurs peuvent changer l'affichage du document quand cet espace est redimensionné (voir le bloc conteneur initial). Si la zone de visualisation est plus petite que le bloc conteneur initial, l'agent utilisateur devrait proposer un mécanisme de défilement. Dans un canevas, il ne peut y avoir plus d'une zone de visualisation, les agents utilisateurs pouvant néanmoins rendre plusieurs canevas (c.à.d, présenter des vues différentes du même document).

9.1.2 Les blocs conteneurs

En CSS2, les positions et les tailles d'un grand nombre de boîtes sont calculées en fonction des bords d'une boîte rectangulaire ; on l'appelle un bloc conteneur. La plupart des boîtes générées se comportent comme des blocs conteneurs pour les boîtes qui en sont les descendantes : on dit que la boîte "établit" le bloc conteneur de ses descendants. L'expression "le bloc conteneur d'une boîte" signifie "le bloc conteneur dans lequel se trouve la boîte", et non la propre boîte que celle-ci génère.

Chaque boîte se voit attribuer une position vis-à-vis de son bloc conteneur, celle-ci n'est pas forcément confinée à l'intérieur de ce conteneur et peut en déborder.

La racine de l'arbre du document génère une boîte qui fait office de bloc conteneur initial pour les constructions subséquentes.

On peut spécifier la largeur du bloc conteneur initial de l'élément racine avec la propriété 'width'. Quand celle-ci a la valeur 'auto', c'est l'agent utilisateur qui fournit cette largeur initiale (par exemple en utilisant la largeur effective de la zone de visualisation).

On peut aussi spécifier la hauteur du bloc conteneur initial de l'élément racine avec la propriété 'height'. Quand celle-ci a la valeur 'auto', la hauteur du bloc conteneur va s'allonger pour prendre en compte le contenu du document.

Le bloc conteneur initial ne peut pas être positionné ou être flottant (c.à.d., les agents utilisateurs ignorent les propriétés 'position' et 'float' de l'élément racine).

Les détails concernant la méthode de calcul des dimensions d'un bloc conteneur sont abordés dans le chapitre 10 suivant.

9.2 Le contrôle de la génération de la boîte

Les paragraphes suivants décrivent les types de boîtes susceptibles d'être générées en CSS2. Le type d'une boîte affecte en partie son comportement dans le modèle de mise en forme visuel. La propriété 'display', décrite plus loin, spécifie le type d'une boîte.

9.2.1 Les éléments de type bloc et leurs boîtes

Les éléments de type bloc sont ceux des éléments du document source dont le rendu visuel forme un bloc (ex. les paragraphes). La propriété 'display' admet des valeurs qui confèrent un type bloc à un élément : 'block', 'list-item', 'compact' et 'run-in' (dans certains cas ; voir les passages traitant des boîtes compactes et des boîtes en enfilade), et 'table'.

Les éléments de type bloc génèrent une boîte de bloc principale qui ne contient que des boîtes de bloc. La boîte de bloc principale établit le bloc conteneur des boîtes des descendants et du contenu généré, c'est aussi elle qui intervient dans le schéma de positionnement. La boîte de bloc principale participe au contexte de mise en forme de type bloc.

D'autres éléments de type bloc génèrent des boîtes supplémentaires hors de la boîte principale : ceux des éléments qui ont une valeur 'list-item' et ceux qui ont des marqueurs. Ces boîtes se positionnent en fonction de la boîte principale.

Les boîtes de bloc anonymes

Dans un document tel que celui-ci :

<DIV>
  Du texte
  <P>Plus de texte
</DIV>
À supposer que les éléments DIV et P aient tous deux la valeur 'display: block', l'élément DIV accueille à la fois un contenu de type en-ligne et un contenu de type bloc. Pour illustrer leur formatage, nous considérons que "Du texte" est contenu dans une boîte de bloc anonyme.

diagram showing the three boxes for the example above [D]

Schéma montrant trois boîtes, l'une d'entre elles est anonyme.

Autrement dit, quand une boîte de bloc (comme ici celle produite par l'élément DIV) contient une autre boîte de bloc (comme l'élément P), alors on la contraint à n'avoir que des boîtes de bloc, les éléments de type en-ligne étant emballés dans une boîte de bloc anonyme.

Exemple(s) :

Ce modèle s'appliquerait à l'exemple suivant :

/* Note : les agents utilisateurs en HTML peuvent ne pas respecter ces règles */
BODY { display: inline }
P    { display: block }

Ces règles étant appliquées à ce document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Un texte anonyme interrompu par un bloc</TITLE>
</HEAD>
<BODY>
Voici un texte anonyme avant le P.
<P>Ceci est le contenu de P.</P>
Voici un texte anonyme après le P.
</BODY>

L'élément BODY contient un morceau (noté C1) de texte anonyme suivi par un élément de type bloc, suivi encore par un autre morceau (C2) de texte anonyme. La mise en forme finale aboutirait à une boîte de bloc anonyme pour l'élément BODY, celle-ci contiendrait une boîte de bloc anonyme enveloppant C1, la boîte de bloc de l'élément P et une autre boîte de bloc anonyme pour C2.

Les propriétés des boîtes anonymes héritent des valeurs des propriétés de la boîte non-anonyme qui les contient (par exemple dans le schéma au-dessus, celle de l'élément DIV). Les propriétés qui ne sont pas héritées conservent leur valeur initiale. Par exemple dans le schéma, la boîte anonyme hérite de la police de l'élément DIV mais ses marges auront une valeur de 0.

9.2.2 Les éléments de type en-ligne et leurs boîtes

Les éléments de type en-ligne sont ceux des éléments du document source qui n'ont pas la forme de nouveaux blocs de contenu ; ce contenu est distribué en lignes (ex. des parties de texte mises en exergue au sein d'un paragraphe, des images dans une ligne, etc.). La propriété 'display' admet des valeurs qui confèrent un type en-ligne à un élément : 'inline', 'inline-table', 'compact' et 'run-in' (dans certains cas, voir les passages traitant des boîtes compactes et des boîtes en enfilade). Les éléments de type en-ligne génèrent des boîtes en-ligne.

Les boîtes en-ligne peuvent participer à plusieurs contextes de mise en forme :

  • Dans une boîte de bloc, celle-ci répond à un contexte de mise en forme en-ligne ;
  • Quand c'est une boîte en-ligne compacte, elle se positionne dans la marge d'une boîte de bloc ;
  • Les boîtes des marqueurs se positionnent aussi en dehors d'une boîte de bloc.

Les boîtes en-ligne anonymes

Dans cet extrait de document :

<P>Du texte <EM>accentué</em> en exemple</P>

L'élément P génère une boîte de bloc contenant plusieurs boîtes en-ligne. Une boîte en-ligne pour "accentué" est produite par l'élément de type en-ligne (EM), mais c'est un élément de type bloc (P) qui génère les autres boîtes en-ligne pour "Du texte" et "en exemple". Ces dernières sont appelées boîtes en-ligne anonymes, car elles ne sont pas associées à un élément en-ligne.

Les boîtes de ce genre héritent des propriétés de celles de leur parent de type bloc. Les propriétés non transmissibles conservent leur valeur initiale. Dans l'exemple précédent, la couleur des boîtes anonymes initiales est héritée de l'élément P, mais leurs fonds restent transparents.

Pour cette spécification, on emploiera simplement l'expression boîte anonyme pour désigner les boîtes anonymes de type en-ligne ou bloc, quand le contexte détermine sans ambiguïté leur type.

D'autres types de boîtes anonymes sont produites lors de la mise en forme des tables.

9.2.3 Les boîtes compactes

Le comportement d'une boîte compacte se définit ainsi :

  • Quand une boîte de bloc (celle-ci n'étant pas flottante ni n'ayant un positionnement absolu) suit une boîte compacte, celle-ci prend la forme d'une boîte en-ligne sur une ligne. La largeur de la boîte résultante est comparée à l'une des marges latérales de la boîte de bloc. On détermine laquelle des marges gauche ou droite employer selon la valeur de la propriété 'direction' de l'élément qui génère le bloc conteneur de la boîte compacte et des suivantes. Si la largeur de la boîte en-ligne est inférieure ou égale à celle de la marge, celle-ci est positionnée dans la marge de la façon décrite juste après.
  • Autrement, la boîte compacte devient une boîte de bloc.

La position de la boîte compacte dans la marge est la suivante : elle se trouve en dehors (à droite ou à gauche) de la première boîte de ligne du bloc, et elle en affecte le calcul de la hauteur. La propriété 'vertical-align' de la boîte compacte détermine sa position verticale en fonction de cette boîte de ligne. La boîte compacte a toujours une position horizontale dans la marge de la boîte de bloc.

Un élément dont le formatage ne tient pas sur une ligne ne peut pas se trouver dans la marge de l'élément qui le suit. Par exemple en HTML, un élément avec une valeur 'compact' et qui contient un élément BR aura toujours un type de boîte bloc (en considérant que le comportement par défaut de BR consiste en l'insertion d'un caractère de mise à la ligne). Pour le placement d'un texte sur plusieurs lignes dans la marge, la propriété 'float' est souvent plus appropriée.

Voici l'illustration d'une boîte compacte :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Un exemple de boîte compacte</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Court
        <DD><P>Ici une description.
      <DT>Trop long pour tenir dans la marge
        <DD><P>Ici une autre description.
    </DL>
  </BODY>
</HTML>

Cet exemple pourrait être rendu ainsi :

Court    Ici une description.

Trop long pour la marge
         Ici une autre description.

On peut utiliser la propriété 'text-align' pour aligner l'élément compacte dans la marge : contre le bord gauche de la marge (avec la valeur 'left'), contre le bord droit ('right') ou au centre ('center'). La valeur 'justify' ne s'applique pas, celle-ci sera considérée comme étant 'left' ou 'right', selon la valeur de la propriété 'direction' de l'élément de type bloc dans les marges duquel l'élément compact se trouve (si la valeur de la propriété 'direction' est 'ltr', ce sera 'left', si c'est 'rtl', ce sera 'right').

Consulter le chapitre traitant du contenu généré pour des informations sur l'interaction entre les boîtes compactes et le contenu généré.

9.2.4 Les boîtes en enfilade

Le comportement d'une boîte en enfilade se définit ainsi :

  • Quand une boîte de bloc (celle-ci n'étant pas flottante ni n'ayant un positionnement absolu) suit la boîte en enfilade, cette dernière devient la première boîte en-ligne de la boîte de bloc ;
  • Autrement, la boîte en enfilade devient une boîte de bloc.

Une boîte en enfilade présente un intérêt pour les titres en enfilade, ainsi cet exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Un exemple de boîte en enfilade</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>Un titre en enfilade.</H3>
    <P>Et un paragraphe qui le suit.
  </BODY>
</HTML>

Cet exemple pourrait être rendu ainsi :

  Un titre en enfilade. Et un
  paragraphe qui le suit.

Les propriétés de l'élément en enfilade sont héritées de son parent dans la source, et non de celles de la boîte de bloc dont il fait visuellement partie.

Consulter le chapitre traitant du contenu généré pour des informations sur l'interaction entre les boîtes en enfilade et le contenu généré.

9.2.5 La propriété 'display'

'display'
Valeur : inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initiale : inline
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : all

Les valeurs de cette propriété ont le sens suivant :

block
induit un élément à générer une boîte de bloc principale ;
inline
induit un élément à générer une ou plusieurs boîtes en-ligne ;
list-item
induit un élément (ex. l'élément LI en HTML) à générer une boîte de bloc principale et une boîte en-ligne pour un item de liste ; Consulter la partie traitant des listes pour des informations et des exemples de mise en forme de celles-ci ;
marker
Cette valeur précise la qualité de marqueur du contenu généré apparaissant avant ou après une boîte. Elle ne devrait être employée qu'avec les pseudo-éléments :before et :after liés à des éléments de type bloc. Dans certains cas, cette valeur est interprétée comme 'inline'. Consulter le chapitre sur les marqueurs pour plus d'informations ;
none
cette valeur fait qu'aucune boîte n'est générée par l'élément dans la structure de formatage (c.à.d., cet élément n'a pas d'influence sur la mise en forme du document). Les éléments qui en descendent ne génèrent pas de boîtes non plus ; on ne peut plus modifier leur comportement avec la propriété 'display'.

Noter qu'une valeur 'none' ne crée pas de boîte invisible, elle ne crée pas de boîte du tout. CSS comprend des mécanismes permettant la génération de boîtes dans la structure de formatage, boîtes qui influencent la mise en forme mais qui ne sont pas visibles. Consulter la partie traitant de la visibilité pour les détails ;

run-in et compact
ces valeurs créent une boîte de bloc ou en-ligne, selon le contexte. Les propriétés s'appliquent aux boîtes compactes ou en enfilade en fonction de leur statut final (types bloc ou en-ligne). Par exemple, la propriété 'white-space' ne s'applique que si la boîte a un type bloc ;
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell et table-caption
ces valeurs donnent à un élément le comportement de celui d'une table (avec les restrictions décrites au chapitre sur les tables).

Noter que, malgré la valeur initiale 'inline' de la propriété 'display', les règles de la feuille de style par défaut de l'agent utilisateur peuvent surclasser celle-ci. Voir dans l'appendice traitant de la proposition de feuille de style pour HTML 4.0.

Exemple(s) :

Voici des exemples pour la propriété 'display' :

P   { display: block }
EM  { display: inline }
LI  { display: list-item }
IMG { display: none }      /* Les images ne sont pas affichées */

Les agents utilisateurs conformes pour HTML peuvent ignorer la propriété 'display'.

9.3 Les schémas de positionnement

En CSS2, trois schémas de positionnement peuvent déterminer l'emplacement d'une boîte :

  1. Le flux normal. En CSS2, celui-ci inclus le formatage en bloc des boîtes de bloc, le formatage en-ligne des boîtes en-ligne, le positionnement relatif des boîtes de bloc ou en-ligne, et le positionnement des boîtes compactes et en enfilade ;
  2. Les flottants. Dans ce modèle, une boîte est d'abord positionnée selon le flux normal, puis elle en est extirpée et repoussée le plus possible vers la droite ou la gauche. Le contenu peut s'écouler le long d'un flottant.
  3. Le positionnement absolue. Dans ce modèle, une boîte est complètement retirée du flux normal (elle n'a pas d'influence sur les éléments de même degré de parenté survenant après elle), et est positionnée en fonction d'un bloc conteneur.
Remarque : Les schémas de positionnement CSS2 aident les auteurs à rendre leurs documents plus accessibles, leur évitant de tricher avec le balisage pour obtenir des effets de mise en page (ex. les images transparentes).

9.3.1 Le choix d'un schéma de positionnement : la propriété 'position'

Les propriétés 'position' et 'float' déterminent lequel des algorithmes de positionnement employer pour le calcul de l'emplacement d'une boîte.

'position'
Valeur : static | relative | absolute | fixed | inherit
Initiale : static
S'applique à : tous les éléments, sauf à un contenu généré
Héritée : non
Pourcentage : sans objet
Médias : visuel

Les valeurs de cette propriété ont le sens suivant :

static
La boîte est normale, placée selon le flux normal. Les propriétés 'left', 'top', 'right' et 'bottom' ne s'y appliquent pas ;
relative
L'emplacement de la boîte est calculé selon le flux normal (ce qu'on appelle la position dans le flux normal). Ensuite la boîte est déplacée relativement à cette position dans le flux normal. Quand une boîte B a une position relative, l'emplacement de la boîte suivante est calculé comme si B n'avait pas été déplacée ;
absolute
L'emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés 'left', 'right', 'top', et 'bottom'. Celles-ci spécifient les déplacements en fonction du bloc conteneur. Les boîtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté. Bien que les boîtes en position absolue aient également des marges, celles-ci ne fusionnent pas avec d'autres marges ;
fixed
L'emplacement de la boîte est calculé comme pour 'absolute', mais la boîte est en plus fixe par rapport à une référence donnée. Pour les médias continus, par rapport à la zone de visualisation (la boîte ne bouge pas lors d'un défilement). Pour les médias paginés, par rapport à la page, même si celle-ci apparaît dans une zone de visualisation (par exemple lors d'un aperçu avant impression). Les auteurs peuvent souhaiter un tel comportement en fonction d'un média donné. Par exemple, une boîte qui reste fixe en haut d'une zone de visualisation sur un écran, mais pas en haut de chaque page imprimée. Ils peuvent indiquer des spécifications séparées à l'aide d'une règle @media comme ceci :

Exemple(s) :

@media screen {
  H1#first { position: fixed }
}
@media print {
  H1#first { position: static }
}

9.3.2 Les décalages des boîtes : les propriétés 'top', 'right', 'bottom', 'left'

On dit qu'un élément est positionné quand la valeur de sa propriété 'position' est autre que 'static'. Ces éléments génèrent des boîtes positionnées qui sont disposées selon les quatre propriétés suivantes :

'top'
Valeur : <longueur> | <pourcentage> | auto | inherit
Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la hauteur du bloc conteneur
Médias : visuel

Cette propriété spécifie le décalage du bord de la marge du haut d'une boîte par rapport à celui de la boîte du bloc conteneur.

'right'
Valeur : <longueur> | <pourcentage> | auto | inherit
Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

Cette propriété spécifie le décalage du bord droit du contenu d'une boîte par rapport à celui de la boîte du bloc conteneur.

'bottom'
Valeur : <longueur> | <pourcentage> | auto | inherit
Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la hauteur du bloc conteneur
Médias : visuel

Cette propriété spécifie le décalage du bord du bas du contenu d'une boîte par rapport à celui de la boîte du bloc conteneur.

'left'
Valeur : <longueur> | <pourcentage> | auto | inherit
Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

Cette propriété spécifie le décalage du bord gauche du contenu d'une boîte par rapport à celui de la boîte du bloc conteneur.

Les significations des valeurs de ces quatre propriétés sont :

<longueur>
Le décalage est représenté par une distance fixe à partir du bord de référence ;
<pourcentage>
Le décalage est représenté par un pourcentage de la largeur du bloc conteneur (pour les propriétés 'left' et 'right') ou la hauteur de celui-ci (pour les propriétés 'top' et 'bottom'). Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (par exemple celle-ci dépendant de la hauteur du contenu), les propriétés 'top' et 'bottom' sont censées avoir la valeur 'auto' ;
auto
L'effet de cette valeur dépend des propriétés associées, lesquelles ont aussi cette même valeur 'auto'. Voir les passages traitant de la largeur et de la hauteur des éléments non-remplacés en position absolue.

Pour les boîtes en position absolue, les décalages sont déterminés par rapport à la boîte du bloc conteneur. Pour les boîtes en position relative, ils sont déterminés par rapport aux bords externes de la boîte elle-même (c.à.d., la boîte reçoit un emplacement dans le flux normal, puis elle est décalée de cet emplacement en fonction des valeurs des propriétés de position).

9.4 Le flux normal

Les boîtes dans un flux normal appartiennent à un contexte de mise en forme, bloc ou en-ligne, mais pas les deux en même temps. Les boîtes de bloc participent à un contexte de mise en forme bloc, les boîtes en-ligne à un contexte de mise en forme en-ligne.

9.4.1 Le contexte de mise en forme bloc

Dans un contexte de mise en forme bloc, les boîtes sont placées l'une après l'autre, verticalement, en commençant en haut du bloc conteneur. Les propriétés de marge régissent la distance verticale entre deux blocs successifs. Dans ce contexte de mise en forme, les marges verticales de deux boîtes de bloc adjacentes fusionnent.

En contexte bloc, le bord externe gauche de chaque boîte touche le bord gauche de son bloc conteneur (c'est le bord droit dans un formatage de droite à gauche). Ceci reste vrai en présence de flottants (bien que le contenu de l'aire de la boîte puissent rétrécir de ce fait).

Pour des informations au sujet des fins de page avec les médias paginés, consulter le passage traitant des fins de page admises.

9.4.2 Le contexte de mise en forme en-ligne

Dans un contexte de mise en forme en-ligne, les boîtes sont placées horizontalement, l'une après l'autre, en commençant en haut du bloc conteneur. Les marges, bordures et espacements sont conservées entre celles-ci. Les boîtes peuvent être alignées verticalement de différentes façons : selon leurs hauts ou leurs bas, ou selon les lignes de base du texte qui y est contenu. On appelle l'aire rectangulaire, qui contient les boîtes sur une ligne, une boîte de ligne.

La largeur d'une boîte de ligne dépend de son bloc conteneur. La hauteur d'une boîte de ligne est déterminée en fonction des règles précisées au chapitre sur les calculs de la hauteur de ligne. La hauteur d'une boîte de ligne est toujours suffisante pour chacune des boîtes que celle-ci contient. Cependant, elle peut être plus grande que la plus haute des boîtes contenues (quand, par exemple, celles-ci sont alignées selon leur ligne de base). L'alignement vertical d'une boîte dont la hauteur est inférieure à celle de sa boîte de ligne, est déterminé par la propriété 'vertical-align'.

Quand des boîtes en-ligne ne peuvent pas tenir dans une seule boîte de ligne, celles-ci se répartissent sur deux ou plusieurs boîtes de ligne empilées verticalement. Ainsi, un paragraphe consiste en un empilement vertical de boîtes de ligne. Ces boîtes de ligne s'empilent les unes sur les autres, sans séparation entre elles, et elles ne se chevauchent jamais.

En général, le bord gauche d'une boîte de ligne touche celui de son bloc conteneur. Cependant, il peut se trouver des boîtes flottantes entre le bord du bloc conteneur et celui de la boîte de ligne. Ainsi, bien que, dans le même contexte de mise en forme en-ligne, les boîtes de ligne aient la plupart du temps la même largeur, celle-ci peut varier si l'espace horizontal disponible se réduit du fait de la présence de ces flottants. Par contre, les boîtes de ligne varient généralement en hauteur dans le même contexte de mise en forme en-ligne (par exemple une ligne peut contenir une image de grande hauteur, les autres ne contenant que du texte).

Quand la largeur totale des boîtes en-ligne est inférieure à celle de la boîte de ligne qui les contient, leur distribution horizontale dans celle-ci est déterminée par la propriété 'text-align'. Si cette propriété a la valeur 'justify', l'agent utilisateur peut étirer les boîtes en-ligne en conséquence.

La largeur d'une boîte en-ligne ne pouvant excéder celle d'une boîte de ligne, celles qui sont trop longues sont découpées en plusieurs boîtes qui sont réparties sur plusieurs boîtes de ligne. Les marges, bordures et espacements n'ont pas de représentation visuelle à l'endroit où ces coupures interviennent. Les formatages des marges, bordures et espacements peuvent ne pas être entièrement définis si la coupure intervient dans une imbrication bi-directionnelle.

Les boîtes en-ligne peuvent aussi être découpées à l'intérieur d'une même boîte de ligne du fait du traitement bi-directionnel du texte.

Voici un exemple d'assemblage de boîte en-ligne. Le paragraphe suivant (produit par l'élément HTML de type bloc P) contient un texte anonyme parsemé d'éléments EM et STRONG :

<P>Plusieurs <EM>mots accentués</EM> apparaissent
<STRONG>dans cette</STRONG> phrase.</P>

L'élément P génère une boîte de bloc qui contient cinq boîtes en-ligne, dont trois sont anonymes :

  • Anonyme : "Plusieurs"
  • EM : "mots accentués"
  • Anonyme : "apparaissent"
  • STRONG : "dans cette"
  • Anonyme : "phrase."

Pour la mise en forme du paragraphe, l'agent utilisateur fait glisser les cinq boîtes dans des boîtes de ligne. Ici, la boîte générée par l'élément P établit le bloc conteneur pour les boîtes de ligne. Si celui-ci est suffisamment grand, toutes les boîtes de ligne vont pouvoir tenir dans une seule boîte :

 Plusieurs mots accentués apparaissent dans cette phrase.

Dans le cas contraire, les boîtes en-ligne seront découpées et réparties sur plusieurs boîtes de ligne. Le paragraphe précédent pourrait être découpé comme ceci :

Plusieurs mots accentués apparaissent
dans cette phrase.
ou comme cela :
Plusieurs mots
accentués apparaissent dans cette
phrase.

Dans ce dernier exemple, la boîte de l'élément EM a été découpée en deux boîtes EM (appelons-les "morceau1" et "morceau2"). Les marges, bordures, espacements ou encore les ornements de texte ne produisent aucun effet visible après "morceau1" ou avant "morceau2".

Voyons cet exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple de flot en-ligne sur plusieurs lignes</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px;
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Il y a plusieurs <EM>mots accentués</EM> ici.</P>
  </BODY>
</HTML>

Dépendant de la largeur de l'élément P, les boîtes pourraient être réparties comme ceci :

Image montrant l'effet d'un saut de ligne sur l'affichage des marges, bordures et espacement. [D]

  • La marge s'insère avant "mots" et après "accentués".
  • L'espacement s'insère à gauche, en haut et en bas de "mots", et en haut, à droite et en bas de "accentués". Une bordure en tirets est tracées sur les trois côtés cités dans chaque cas.

9.4.3 Le positionnement relatif

Une fois que l'emplacement d'une boîte a été déterminé, selon les modèles de flux normal ou flottant, cette boîte peut être déplacée relativement à celui-ci. C'est ce qu'on appelle le positionnement relatif. Le décalage d'une boîte (B1) de cette manière n'a pas d'influence sur la boîte (B2) qui la suit : la boîte B2 reçoit un emplacement comme si la boîte B1 n'avait pas été décalée, et l'emplacement de B2 sera resté le même après l'application du décalage sur B1. Ainsi, le positionnement relatif peut impliquer le chevauchement des boîtes.

Une boîte en position relative conserve la taille qu'elle avait dans le flux normal, ainsi que les retours à la ligne la superficie originale qui lui était réservée. Le chapitre sur les blocs conteneurs précise les cas où une boîte en position relative établit un nouveau bloc conteneur.

Un élément génère une boîte en position relative quand la valeur de sa propriété 'position' est 'relative'. Le décalage de celle-ci est spécifié par les propriétés 'top', 'bottom', 'left' et 'right'.

Les propriétés 'left' et 'right' déplacent la(les) boîte(s) horizontalement, sans changer sa(leur) taille. Le déplacement se fait vers la droite pour la propriété 'left' et vers la gauche pour 'right'. Les boîtes n'étant ni découpées ni étirées par ces propriétés, les valeurs calculées pour le déplacement vérifient toujours : déplacement gauche = - déplacement droit.

Quand les propriétés 'left' et 'right' ont la valeur 'auto' (qui est leur valeur initiale), les valeurs calculées pour le déplacement sont égales à '0' (c.à.d. les boîtes restent à leur emplacement original).

Quand la propriété 'left' a la valeur 'auto', sa valeur calculée devient celle négative de la propriété 'right' (c.à.d. les boîtes se déplacent vers la gauche, de la quantité de cette valeur).

Et inversement, quand la propriété 'right' a la valeur 'auto'.

Quand aucunes des propriétés 'left' et 'right' n'ont la valeur 'auto', la position de la boîte est sous l'effet d'une double contrainte, une des deux propriétés sera ignorée. C'est selon la valeur de la propriété 'direction' ; quand celle-ci a la valeur 'ltr', c'est la valeur de la propriété 'left' qui est retenue, celle de la propriété 'right' devenant la valeur négative de 'left', et inversement, quand la propriété 'direction' a la valeur 'rtl'.

Par exemple, ces deux feuilles de style sont équivalentes :

DIV.a8 { position: relative; left: -1em; right: auto }

DIV.a8 { position: relative; left: auto; right: 1em }

Les propriétés 'top' et 'bottom' gèrent le déplacement vertical des boîtes en position relative. Ces propriétés doivent également avoir des valeurs en opposition. Quand toutes deux ont la valeur 'auto', leurs valeurs calculées deviennent '0'. Quand l'une d'entre elles a la valeur 'auto', celle-ci prend la valeur opposée de l'autre. Quand aucunes des deux n'ont la valeur 'auto', la valeur de la propriété 'bottom' sera ignorée (c.à.d. la valeur calculée pour la propriété 'bottom' devient celle négative de la propriété 'top').

Le mouvement dynamique des boîtes en position relative peut produire un effet d'animation en conjonction avec des langages de script (voir également la propriété 'visibility'). On peut aussi employer le positionnement relatif comme une forme générale pour l'écriture en exposant ou en indice, la hauteur de ligne n'étant cependant pas automatiquement ajustée pour considérer le positionnement. Voir les calculs des hauteurs de ligne pour plus d'information.

D'autres exemples de positionnement relatif apparaissent dans le chapitre traitant de la comparaison entre le flux normal, les flottants et le positionnement absolu.

9.5 Les flottants

Une boîte flottante est déplacée vers la gauche ou la droite sur la ligne courante. La caractéristique la plus intéressante d'un flottant (ou boîte "flottée" ou "flottante") réside dans le fait que le contenu peut s'écouler le long de ses flancs (on peut empêcher ce comportement avec la propriété 'clear'). Ce contenu descend le long du flanc droit d'une boîte flottante à gauche et le long du flanc gauche pour celle flottante à droite. Voici une introduction au positionnement flottant et à l'écoulement du contenu ; la propriété 'float' le détail des règles régissant ce comportement.

Une boîte flottante doit avoir une largeur explicite (spécifiée par la propriété 'width' ou la largeur intrinsèque pour les éléments remplacés). Ces boîtes deviennent des boîtes de bloc qui sont mues vers la gauche ou la droite et qui vont buter sur le bord du bloc conteneur ou sur le bord externe d'un autre flottant. Leur haut s'aligne sur le haut de la boîte de ligne concernée (ou, quand il n'y a pas de boîte de ligne, sur le bas de la boîte de bloc précédente). Quand il n'y a pas assez de place pour le flottant dans la largeur de la ligne, celui-ci se déplace vers le bas, d'une ligne à l'autre, jusqu'à en trouver une suffisamment large.

Une boîte flottante se trouvant hors du flux normal, les boîtes de bloc non positionnées, crées avant et après elle, s'écoulent verticalement comme si celle-ci n'existait pas. Cependant, les boîtes de lignes, crées juste après la boîte flottante, se réduisent pour laisser de la place à celle-ci. Le contenu de la ligne, celui avant la boîte flottée, se répand dans la première ligne disponible contre l'autre bord de cette boîte.

Plusieurs flottants peuvent être adjacents, ce modèle s'applique aussi aux flottants adjacents dans la même ligne.

Exemple(s) :

La règle suivante fait flotter à gauche toutes les boîtes des éléments IMG qui ont un attribut class="icon" (et leur applique une valeur de marge gauche de '0') :

IMG.icon {
  float: left;
  margin-left: 0;
}

Considérons la source HTML et la feuille de style suivantes :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Exemple de flottants</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="Cette image pour illustrer les flottants.">
       Un échantillon de texte qui n'a pas...
  </BODY>
</HTML>

La boîte de l'élément IMG flotte à gauche. Le contenu qui le suit vient contre la droite du flottant, commençant sur la même ligne que celui-ci. Les boîtes de ligne se trouvant à droite du flottant sont raccourcies pour tenir compte de sa présence, celles-ci reprennent leur largeur "normale" (celle du bloc conteneur établi par l'élément P) après le flottant. Ce document pourrait apparaître ainsi :

Illustration de l'interaction des boîtes flottantes avec les marges. [D]

La mise en forme aurait été exactement la même si ce document avait été :

<BODY>
  <P>Un échantillon de texte
  <IMG src=img.gif alt="Cette image pour illustrer les flottants.">
           qui n'a pas...
</BODY>

car le contenu se trouvant à gauche du flottant est déplacé par celui-ci et reformaté le long de son flanc droit.

Les marges des boîtes flottantes ne fusionnent jamais avec celles des boîtes adjacentes. Ainsi, dans l'exemple précédent, les marges verticales entre la boîte de P et la boîte flottée de IMG n'ont pas fusionné.

Un flottant peut chevaucher sur les autres boîtes du flux normal (par exemple quand une boîte proche de celui-ci a des marges négatives). Quand une boîte en-ligne déborde sur un flottant, le contenu, l'arrière-plan et les bordures de celle-ci apparaissent sur le flottant. Quand c'est une boîte de bloc, l'arrière-plan et les bordures de celle-ci apparaissent derrière le flottant, ceux-ci n'étant visibles qu'aux endroits où le flottant est transparent. Par contre, le contenu de la boîte de bloc passe avant le flottant.

Exemple(s) :

Voici une autre illustration d'un flottant qui déborde sur les bordures d'éléments dans le flux normal.

Une image flottante qui recouvre les bordures de deux paragraphes, les bordures s'interrompent à cet endroit. [D]

Une image flottante qui cache les bordures des boîtes de bloc qu'elle chevauche.

L'exemple suivant démontre l'usage de la propriété 'clear' pour empêcher l'écoulement d'un contenu le long d'un flottant.

Exemple(s) :

Supposons une règle telle que :

P { clear: left }

une mise en forme pourrait en être :

Une image flottante et l'effet de clear:left sur les deux paragraphes. [D]

La propriété 'clear: left' s'appliquant aux deux paragraphes, le second est "poussé en dessous" du flottant, la marge du haut de ce paragraphe va croître pour accomplir cet effet (voir la propriété 'clear').

9.5.1 Le positionnement des flottants : la propriété 'float'

'float'
Valeur : left | right | none | inherit
Initiale : none
S'applique à : tous les éléments, sauf ceux positionnés et ceux dont le contenu est généré
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété spécifie le flottement d'une boîte à gauche, à droite ou pas du tout. On peut l'employer pour des éléments générant des boîtes qui ne sont pas en position absolue. Voici la signification des valeurs que celle-ci admet :

left
L'élément génère une boîte de bloc qui flotte à gauche. Le contenu s'écoule sur son flanc droit en commençant en haut (en fonction de la valeur de la propriété 'clear'). En ignorant la valeur de la propriété 'display', sauf si cette valeur est 'none' ;
right
Identique à 'left', mais en inversant la gauche de la droite ;
none
La boîte ne flotte pas.

Voici les règles précises qui gouvernent le comportement des flottants :

  1. Le bord externe gauche d'une boîte flottant à gauche ne peut pas se trouver au-delà du bord gauche de bloc conteneur. Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées ;
  2. Pour une boîte donnée flottant à gauche, celle ci suivant dans la source un élément ayant déjà généré une autre boîte flottant à gauche, le bord externe gauche de cette boîte doit venir à droite du bord externe droit de la boîte précédente, ou, sinon, son sommet doit venir en dessous du bas de la boîte précédente. Inversement et de la même façon pour des boîtes flottant à droite ;
  3. Le bord externe droit d'une boîte flottant à gauche ne peut pas être placé à la droite d'un bord externe gauche d'une quelconque boîte flottant à sa droite. Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées ;
  4. Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus de celui de son bloc conteneur ;
  5. Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus d'une boîte de bloc ou flottante, générée par un élément précédent dans le document source ;
  6. Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus du sommet d'une boîte de ligne qui contient une boîte générée par un élément survenu plus tôt dans le document source ;
  7. Une boîte flottant à gauche, ayant une autre boîte de même type à sa gauche, ne devrait pas avoir son bord externe droit au-delà du bord droit de son bloc conteneur. (Plus librement, un flottant à gauche ne devrait pas dépasser le bord droit, à moins d'être déjà au maximum à gauche). Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées ;
  8. Une boîte flottante doit se trouver aussi haut que possible ;
  9. Une boîte flottant à gauche doit aller au maximum vers la gauche et, au maximum vers la droite pour celle flottant à droite. Une position plus haute est préférée à celle qui est plus à gauche ou à droite.

9.5.2 Le contrôle du flux autour des flottants : la propriété 'clear'

'clear'
Valeur : none | left | right | both | inherit
Initiale : none
S'applique à : ceux des éléments de type bloc
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété indique quels côtés d'une ou des boîtes d'un élément ne doivent pas être adjacents à une boîte flottante précédente. (Il peut arriver que l'élément lui-même ait des descendants flottants, la propriété 'clear' n'a alors aucun effet sur eux).

Cette propriété ne peut s'appliquer qu'aux élément de type bloc (dont les flottants). Dans le cas des boîtes compactes et en enfilade, la propriété s'applique à la boîte de bloc finale à laquelle celles-ci appartiennent.

Voici la signification des valeurs admises par la propriété quand on l'applique aux boîtes de bloc non flottantes :

left
La marge haute de la boîte générée est augmentée juste assez pour que le bord haut de sa bordure soit sous le bord externe bas d'une boîte flottant à gauche issue d'un élément précédent du document source ;
right
Reprendre le précédent en inversant gauche et droite ;
both
La boîte générée se déplace sous chacune des boîtes flottantes qui sont issues d'éléments précédents du document source ;
none
La boîte ne subit aucune contrainte de position vis-à-vis des flottants.

Quand on applique cette propriétés aux éléments flottants, une modification des règles de leur positionnement intervient. On ajoute une contrainte supplémentaire (la dixième) :

  • Le sommet du bord externe de cette boîte flottante doit se trouver en dessous de toutes boîtes précédentes qui flottent à gauche (pour la valeur 'clear:left'), ou qui flottent à droite (pour la valeur 'clear: right'), ou toutes celles qui flottent (pour la valeur 'clear: both').

9.6 Le positionnement absolu

Avec le modèle de positionnement absolu, une boîte est positionnée par rapport à son bloc conteneur. Celle-ci est entièrement retirée du flux normal (elle n'a aucune influence sur les éléments de même niveau de parenté survenant après). Les boîtes en position absolue établissent un nouveau bloc conteneur pour leurs descendants, ceux qui suivent le flux normal et ou ceux qui sont positionnés. Cependant, leurs contenus ne s'écoulent pas autour d'autres boîtes. Ces contenus peuvent, ou non, cacher ceux des autres boîtes, selon leur situation dans l'empilement des boîtes et leur chevauchement.

Dans cette spécification, quand on se réfère à un élément en position absolue (ou sa boîte), cela signifie que la propriété 'position' de celui-ci a les valeurs 'absolute' ou 'fixed'.

9.6.1 Le positionnement fixe

Le positionnement fixe est une variante du positionnement absolu. La seule différence est que le bloc conteneur d'une boîte en position fixe est établi par la zone de visualisation. Pour les médias continus, les boîtes en position fixe ne bougent pas quand on fait défiler le document. Sous cet angle, celles-ci ont un comportement similaire à celui des images d'arrière-plan fixes. Pour les médias paginés, ces boîtes se répètent sur chaque page. Par exemple, ceci peut présenter un intérêt pour placer une signature en bas de chacune d'entre elles

Les auteurs peuvent utiliser le positionnement fixe pour des présentations comme avec des cadres. Soit la mise en page suivante :

Illustration d'une disposition comme un cadre avec position:fixed. [D]

Ceci pourrait être réalisé avec ce document HTML et ces règles de style :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Un document avec des cadres en CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Nécessaire pour les hauteurs en pourcentage plus bas */
      #entete {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #cote {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #corps {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #pied {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="entete"> ...  </DIV>
    <DIV id="cote"> ...  </DIV>
    <DIV id="corps"> ...  </DIV>
    <DIV id="pied"> ...  </DIV>
  </BODY>
</HTML>

9.7 Les relations entre les propriétés 'display', 'position' et 'float'

Ces trois propriétés, 'display', 'position' et 'float', qui affectent la génération des boîtes et le positionnement, interagissent ainsi :

  1. Quand la valeur de la propriété 'display' est 'none', les agents utilisateurs doivent ignorer les propriétés 'position' et 'float'. L'élément ne génère pas de boîte dans ce cas ;
  2. Autrement, quand la valeur de la propriété 'position' est 'absolute' ou 'fixed', la propriété 'display' prend la valeur 'block' et la propriété 'float' la valeur 'none'. L'emplacement de la boîte sera déterminé selon ses propriétés 'top', 'right', 'bottom' et 'left' ainsi que celles de son bloc conteneur ;
  3. Autrement, quand la valeur de la propriété 'float' est autre que 'none', la boîte est flottante et la propriété 'display' prend une valeur qui est fonction de la table suivante :
    Valeur spécifiée | Valeur calculée
    inline-table | table
    inline, run-in, compact, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption | block
    autres | même chose que spécifié
  4. Autrement, les autres valeurs pour la propriété 'display' s'appliquent comme spécifiées.

Remarque : CSS2 ne spécifie pas de processus de mise en forme quand les valeurs de ces propriétés sont modifiées par le biais de scripts. Par exemple, que se passe-t-il pour un élément, dont la propriété 'width' a la valeur 'auto', quand il est repositionné ? Est-ce que l'écoulement des contenus est recommencé, ou est-ce que ceux-ci conservent leur formatage original ? La réponse ne se trouve pas dans ce document, les premières implémentations de CSS2 sont certainement divergentes sur ce point.

9.8 Comparaison entre les positionnements en flux normal, flottant et absolu

L'illustration des différences entre les positionnements en flux normal, relatif et absolu se fera à partir d'exemples basés sur cet extrait de document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Comparaison entre les schémas de positionnement</TITLE>
  </HEAD>
  <BODY>
    <P>Début du corps du contenu.
      <SPAN id="Externe"> Début du contenu d'Externe.
      <SPAN id="Interne"> Contenu d'Interne.</SPAN>
      Fin du contenu d'Externe.</SPAN>
      Fin du corps du contenu.
    </P>
  </BODY>
</HTML>

Avec ce document, nous supposerons les règles suivantes :

BODY { display: block; line-height: 200%;
       width: 400px; height: 400px }
P    { display: block }
SPAN { display: inline }

Pour chacun des exemples, les emplacements finaux des boîtes générées par les éléments Externe et Interne seront variables. Dans les dessins, les nombres à gauche indiquent la position des lignes en flux normal, celles-ci étant agrandies pour plus de clarté. Note : les échelles verticales et horizontales diffèrent selon les illustrations.

9.8.1 Le flux normal

Considérons les déclarations CSS pour les IDs Externe et Interne, celles-ci ne modifiant pas le flux normal des boîtes :

#Externe { color: red }
#Interne { color: blue }

L'élément P ne contient que des éléments en-ligne, c.à.d. du texte anonyme en-ligne et deux éléments SPAN. Ainsi, tout le contenu est dans un contexte de mise en forme en-ligne, à l'intérieur d'un bloc conteneur établit par l'élément P lui-même, comme ceci :

Illustration du flux normal du texte entre les boîtes du parent et de ses enfants. [D]

9.8.2 Le positionnement relatif

Pour illustrer l'effet du positionnement relatif, spécifions :

#Externe { position: relative; top: -12px; color: red }
#Interne { position: relative; top: 12px; color: blue }

Le texte suit un cours normal jusqu'à l'élément Externe. Celui-ci s'écoule alors pour occuper son volume dans le flux normal et prend ses marques, l'une étant représentée par la fin de la ligne 1. Ensuite, l'ensemble, constitué des boîtes en-ligne contenant le texte (qui est réparti sur trois lignes), est déplacé de la valeur '-12px' (vers le haut).

L'élément Interne, étant un enfant de Externe, devrait normalement voir son contenu poursuivre dans le flux après les mots "contenu d'Externe" (entre la ligne 1 et 2). Cependant, celui-ci étant lui-même placé relativement au contenu de Externe d'une valeur de '12px' (vers le bas), il va se retrouver à sa position de départ sur la ligne 2.

Noter que le contenu qui suit celui de l'élément Externe n'est pas affecté par le positionnement relatif de ce dernier.

Illustration des effets du positionnement relatif sur le contenu d'une boîte. [D]

Noter que si le décalage de l'élément Externe avait été '-24px', le texte de celui-ci et le texte du corps du contenu se seraient chevauchés.

9.8.3 Faire flotter une boîte

Voyons maintenant l'effet d'un flottement à droite sur le texte de l'élément Interne avec cette règle :

#Externe { color: red }
#Interne { float: right; width: 130px; color: blue }

Le texte suit le flux normal jusqu'à la boîte d'Interne, celle-ci étant hors du flot et flottant vers la marge droite (la propriété 'width' de la boîte est explicite). Les boîtes de ligne sur la gauche du flottant ont été réduites, le reste du texte du document se répartissant entre elles.

Illustration des effets du flottement sur une boîte. [D]

9.8.4 Le positionnement absolu

Voyons enfin, l'effet d'un positionnement absolu. Considérons les déclarations CSS suivantes pour Externe et Interne :

#Externe {
    position: absolute;
    top: 200px; left: 200px;
    width: 200px;
    color: red;
}
#Interne { color: blue }

ce qui positionne le sommet de la boîte d'Externe en fonction de son bloc conteneur. Celui-ci, pour une boîte positionnée donnée, est établi par l'ancêtre positionné de cette boîte qui est le plus proche (ou, s'il n'y en a pas, par le bloc conteneur initial, comme dans l'exemple qui suit). Le haut de la boîte d'Externe se trouve à '200px' en dessous du haut du bloc conteneur, et la gauche de sa boîte à '200px' du côté gauche de celui-ci. La boîte de l'élément enfant d'Externe suit le flot normal par rapport son parent.

Illustration des effets du positionnement absolu sur une boîte. [D]

Dans l'exemple suivant, nous avons une boîte en position absolue qui est un enfant d'une boîte en position relative. Bien que la boîte du parent, Externe, ne soit pas en réalité déplacée, le fait de spécifier la valeur 'relative' pour sa propriété 'position' lui permet d'être un bloc conteneur pour des descendants positionnés. Comme la boîte en-ligne d'Externe est découpée en morceaux répartis sur plusieurs lignes, les bords du haut et de gauche du premier d'entre eux (représentés en tirets épais dans le dessin) servent de références pour les décalages produits par les propriétés 'top' et 'left'.

#Externe {
  position: relative;
  color: red
}
#Interne {
  position: absolute;
  top: 200px; left: -100px;
  height: 130px; width: 130px;
  color: blue;
}

Ce qui donnerait le résultat suivant :

Illustration des effets du positionnement absolu d'une boîte en fonction de son bloc conteneur. [D]

Si on ne positionne pas la boîte d'Externe :

#Externe { color: red }
#Interne {
  position: absolute;
  top: 200px; left: -100px;
  height: 130px; width: 130px;
  color: blue;
}

Le bloc conteneur d'Interne devient le bloc conteneur initial (dans l'exemple). Voici dans ce cas où se placerait la boîte d'Interne :

Illustration des effets du positionnement absolu d'une boîte en fonction du bloc conteneur établi par un parent dans le flux normal. [D]

On peut employer le positionnement relatif ou absolu pour réaliser une marque de changement, comme dans l'exemple suivant. Ainsi avec ce document :

<P style="position: relative; margin-right: 10px; left: 10px;"> J'emploie deux tirets
en rouge comme marque de changement. Ceux-ci vont "flotter" à gauche de la ligne
contenant CE <SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>mot.</P>

Cet extrait pourrait être représenté ainsi :

Illustration de l'emploi de flottants pour créer un effet de signet. [D]

Premièrement, le paragraphe (dont les côtés du bloc conteneur sont tracés) suit le flux normal. Ce paragraphe est ensuite déplacé de '10px' à partir du bord gauche de celui-ci (c'est pourquoi on a laissé une marge de '10px' sur la droite, en prévision du décalage). Les deux tirets qui marquent le changement sont retirés du flux normal, puis placés sur la ligne concernée (en raison de 'top: auto'), et à '-1em' du bord gauche du bloc conteneur (celui établi par l'élément P à son emplacement final). En résultat, la marque de changement semble "flotter" à gauche de ladite ligne.

9.9 La présentation en couches

Dans les passages suivants, l'expression "devant" signifie au plus proche du spectateur qui regarde l'écran.

En CSS2, chaque boîte reçoit un emplacement selon trois dimensions. En plus de leurs positions horizontales et verticales, les boîtes s'échelonnent le long d'un "axe-z" et s'empilent les unes au-dessus des autres dans la mise en forme. Les positions sur l'axe-z sont particulièrement importantes lors des chevauchements visuels des boîtes. Cette partie traite de la façon dont celles-ci peuvent se positionner sur l'axe-z.

Chaque boîte participe d'un contexte d'empilement. Dans un contexte d'empilement donné, chacune des boîtes reçoit un entier pour son niveau dans l'empilement, cet entier représentant la position de la boîte sur l'axe-z, en rapport avec les autres boîtes de ce contexte. La valeur du niveau dans l'empilement d'une boîte peut être négative. Pour les boîtes situées au même niveau d'un contexte d'empilement, celles-ci s'empilent en partant du fond vers l'avant, en fonction de leur ordre dans l'arbre du document.

L'élément racine crée un contexte d'empilement racine, mais d'autres éléments peuvent établir des contextes d'empilement locaux. Les contextes d'empilement sont hérités. Un contexte d'empilement local est atomique, les boîtes d'autres contextes d'empilement ne pouvant interférer dans l'empilement des boîtes de celui-ci.

Un élément, établissant un contexte d'empilement local, génère une boîte avec deux ordres d'empilement : l'un pour le contexte d'empilement que lui-même crée (toujours égal à '0') et l'autre pour celui dont il fait lui-même partie (donné par la propriété 'z-index').

La boîte d'un élément occupe le même niveau dans l'empilement que celle de son parent, à moins que la propriété 'z-index' ne la contraigne à un autre niveau.

9.9.1 La spécification du niveau dans l'empilement : la propriété 'z-index'

'z-index'
Valeur : auto | <entier> | inherit
Initiale : auto
S'applique à : ceux des éléments positionnés
Héritée : non
Pourcentage : sans objet
Médias : visuel

Pour une boîte positionnée, la propriété 'z-index' spécifie :

  1. Le niveau dans l'empilement pour une boîte dans un contexte d'empilement donné ;
  2. L'établissement par une boîte d'un contexte d'empilement local.

Voici les significations des valeurs :

<entier>
Cet entier correspond au niveau dans l'empilement d'une boîte générée dans un contexte d'empilement donné. Cette boîte établit également un contexte d'empilement local dans lequel la valeur de son niveau est '0' ;
auto
Le niveau d'empilement de la boîte générée dans un contexte d'empilement donné est le même que celui de la boîte de son parent. Cette boîte n'établit pas un nouveau contexte d'empilement local.

Dans l'exemple suivant, les niveaux dans l'empilement des boîtes (nommées à partir de leur attribut "id") sont : "texte2"=0, "image"=1, "texte3"=2 et "texte1"=3. Le contexte d'empilement de "texte2" est hérité de la boîte racine. Les niveaux des autres boîtes étant spécifiés par la propriété 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Positionnement selon l'axe-z</TITLE>
    <STYLE type="text/css">
      .pile {
        position: absolute;
        left: 2in;
        top: 2in;
        width: 3in;
        height: 3in;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile"
           src="butterfly.gif" alt="L'image d'un papillon"
           style="z-index: 1">

    <DIV id="texte1" class="pile"
         style="z-index: 3">
      Ce texte se surimposera à l'image du papillon.
    </DIV>

    <DIV id="texte2">
      Ce texte sera en-dessous de tout.
    </DIV>

    <DIV id="texte3" class="pile"
         style="z-index: 2">
      Ce texte se trouvera sous texte1, mais se surimposera à l'image du papillon.
    </DIV>
  </BODY>
</HTML>

Cet exemple illustre la notion de transparence. Par défaut, une boîte laisse voir celles situées en arrière à travers les zones transparentes de son contenu. Ici, chacune des boîtes vient recouvrir celles en dessous de façon transparente. On peut annuler ce comportement en employant l'une des propriétés d'arrière-plan.

9.10 Le sens du texte : les propriétés 'direction' et 'unicode-bidi'

Les caractères de certaines écritures s'inscrivent de droite à gauche. Dans certains documents, notamment ceux en arabe ou en hébreu, et ceux avec un contexte de langues mixtes, plusieurs sens de lecture peuvent apparaître dans le texte d'un bloc (visuel) particulier. On appelle ce phénomène bi-directionnalité, ou "bidi" pour faire court.

Le standard Unicode ([UNICODE], chapitre 3.11), définit un algorithme complexe pour déterminer la directionalité d'un texte. Cet algorithme comporte une partie implicite, basée sur les propriétés des caractères, et des contrôles explicites, portant sur leurs incorporations et leurs contraintes. CSS2 s'appuie sur celui-ci pour atteindre un rendu bi-directionnel convenable. Les propriétés 'direction' et 'unicode-bidi' permettent aux auteurs de spécifier une adéquation des éléments et attributs d'un document avec cet algorithme.

Quand un document contient des caractères allant de droite à gauche, et si l'agent utilisateur peut afficher ces caractères (dans les glyphes appropriés, et non pas avec des substituts arbitraires comme des points d'interrogation, un code hexadécimal, un carré noir, etc.), l'agent utilisateur doit utiliser l'algorithme bi-directionnel. En apparence, cette obligation est univoque ; bien que les textes des documents en hébreu ou en arabe ne contiennent pas tous de parties bi-directionnelles, ceux-ci sont plus enclins à en contenir (par exemple des nombres, des extraits en d'autres langues) que ceux des documents écrits de gauche à droite ne contiendraient de parties écrites de droite à gauche.

Comme le sens de lecture d'un texte dépend de la structure et de la sémantique du langage du document, ces propriétés ne devraient la plupart du temps être utilisées que par les auteurs de descriptions de type de document (DTDs) ou d'autres documents spéciaux. Lorsqu'une feuille de style par défaut spécifie ces propriétés, les auteurs et les utilisateurs ne devraient pas spécifier de règles pour les surclasser. Une exception typique : la suppression du comportement bidi d'un agent utilisateur, et sa transcription du yiddish (habituellement en caractères hébreux) en caractères latins pour répondre à une requête de l'utilisateur.

La spécification HTML 4.0 ([HTML40], chapitre 8.2) définit le comportement bi-directionnel des éléments HTML. Les agents utilisateurs conformes pour HTML peuvent ignorer les propriétés 'direction' et 'unicode-bidi' des feuilles de style des auteurs et des utilisateurs. Le mot "ignorer" signifie ici que, si une valeur des propriétés 'unicode-bidi' ou 'direction' entrait en conflit avec l'attribut HTML 4.0 "dir", c'est la valeur de ce dernier que les agents utilisateurs peuvent choisir d'honorer. Ceux-ci ne sont pas tenus de reconnaître les propriété 'direction' et 'unicode-bidi' pour être conformes à CSS2, à moins d'être capables de représenter du texte bi-directionnel (et aussi, sauf pour le cas de HTML 4.0 comme précisé au-dessus). Les règles de style pour obtenir le comportement bidi, tel que défini dans [HTML40], sont intégrées dans l'exemple de feuille de style. Voir aussi la spécification HTML 4.0 pour d'autres questions liées à la bi-directionnalité.

'direction'
Valeur : ltr | rtl | inherit
Initiale : ltr
S'applique à : tous les éléments, mais voir les explications au-dessus
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété spécifie le sens d'écriture principal des blocs et le sens des incorporations et contraintes (voir 'unicode-bidi') pour l'algorithme bi-directionnel Unicode. En outre, elle spécifie le sens de mise en forme des colonnes des tables, le sens du débordement horizontal et l'emplacement d'une dernière ligne incomplète quand la propriété 'text-align' a pour valeur 'justify'.

Les valeurs de cette propriété ont la signification suivante :

ltr
Sens de gauche à droite [ndt. left-to-right] ;
rtl
Sens de droite à gauche [ndt. right-to-left].

La propriété 'unicode-bidi' doit avoir les valeurs 'embed' ou 'override' pour que la propriété 'direction' puisse agir sur les éléments de type en-ligne.

Remarque : Quand la propriété 'direction' est spécifiée pour les éléments des colonnes d'une table, celle-ci n'est pas héritée par les cellules des colonnes, les colonnes n'apparaissant pas dans l'arbre du document. Ainsi, on ne peut pas adresser facilement les règles d'héritage de l'attribut "dir", telles que décrites dans la spécification [HTML40], chapitre 11.3.2.1.

'unicode-bidi'
Valeur : normal | embed | bidi-override | inherit
Initiale : normal
S'applique à : tous les éléments, mais voir les explications au-dessus
Inherited: non
Pourcentage : N/A
Médias : visuel

Les valeurs de cette propriété ont la signification suivante :

normal
L'élément n'ouvre pas un niveau supplémentaire d'incorporation en fonction de l'algorithme bi-directionnel. Pour les éléments de type en-ligne, un réajustement implicite s'effectue au-delà des limites de l'élément ;
embed
Quand il s'agit d'un élément de type en-ligne, cette valeur ouvre un niveau supplémentaire d'incorporation en fonction de l'algorithme bi-directionnel. La propriété 'direction' donne le sens du niveau d'incorporation. Le réordonnancement s'effectue implicitement à l'intérieur de l'élément. Celui-ci correspond à l'insertion des caractères LRE (U+202A pour 'direction: ltr') ou RLE (U+202B pour 'direction: rtl') au début de l'élément et du caractère PDF à la fin de celui-ci ;
bidi-override
Quand il s'agit d'un élément de type en-ligne, ou bloc, ne contenant à son tour que des éléments de type en-ligne, ceci crée une contrainte. Cela signifie que le réordonnancement à l'intérieur de l'élément s'effectue strictement dans l'ordre de la propriété 'direction', la partie implicite de l'algorithme étant ignorée. Le réordonnancement correspond à l'insertion des caractères LRO (U+202D pour 'direction: ltr') ou RLO (U+202E pour 'direction: rtl') au début de l'élément et du caractère PDF (U+202C) à la fin de celui-ci.

L'ordonnancement final des caractères de chaque élément de type bloc est le même que celui décrit ci-dessus, comme si les caractères de contrôle bidi avaient été ajoutés, le balisage retiré et la succession de caractères qui en résulte, transmise à une implémentation de l'algorithme bi-directionnel Unicode comme du texte brut qui produirait les mêmes retours à la ligne que du texte stylé. Dans ce processus, les entités non textuelles, comme les images, sont traitées comme des caractères neutres, à moins que leur propriété 'unicode-bidi' n'ait une valeur autre que 'normal', auquel cas ces entités seraient considérées comme ayant une importance pour le sens indiqué par la propriété 'direction'.

Noter que pour autoriser l'écoulement de boîtes en-ligne dans une direction uniforme (soit entièrement de gauche à droite, ou inversement), plusieurs autres de ces boîtes en-ligne (dont des boîtes en-ligne anonymes) pourraient devoir être créées, et certaines d'entre elles devoir être découpées et réordonnée avant leur écoulement.

Du fait d'une limitation de l'algorithme Unicode à 15 niveaux d'incorporation, l'utilisation d'une autre valeur que 'normal' avec la propriété 'unicode-bidi' ne devrait se faire que de façon appropriée. Plus particulièrement, la valeur 'inherit' devrait faire l'objet d'une extrême prudence. Cependant, pour ceux des éléments destinés habituellement à un rendu en bloc (visuel), on préfèrera la spécification 'unicode-bidi: embed', pour conserver leur cohésion, dans le cas où leur propriété 'display' prendrait la valeur 'inline' (voir l'exemple plus loin).

Voici l'exemple d'un document XML contenant du texte bi-directionnel, qui illustre un principe de construction important : les auteurs de DTD devraient prendre en compte les questions bidi tant dans les éléments et attributs du langage concerné que dans les feuilles de style qui accompagnent le document. Celles-ci devraient être construites en distinguant les règles bidi des autres règles. Les règles bidi ne devraient pas être surclassées par d'autres feuilles de style, de manière à préserver les comportements bidi du langage du document ou du DTD.

Exemple(s) :

Pour cet exemple, les lettres en minuscules représentent des caractères lus de façon inhérente de gauche à droite, et les lettres en majuscules, ceux de droite à gauche :

<HEBREU>
  <PAR>HÉBREU1 HÉBREU2 anglais3 HÉBREU4 HÉBREU5</PAR>
  <PAR>HÉBREU6 <EMPH>HÉBREU7</EMPH> HÉBREU8</PAR>
</HEBREU>
<ANGLAIS>
  <PAR>anglais9 anglais10 anglais11 HÉBREU12 HÉBREU13</PAR>
  <PAR>anglais14 anglais15 anglais16</PAR>
  <PAR>anglais17 <HE-QUO>HÉBREU18 anglais19 HÉBREU20</HE-QUO></PAR>
</ANGLAIS>

S'agissant d'un document XML, c'est la feuille de style qui indique le sens d'écriture. Voici celle-ci :

/* Règles bidi */
HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}
ANGLAIS         {direction: ltr; unicode-bidi: embed}

/* Règles de présentation */
HEBREW, ANGLAIS, PAR  {display: block}
EMPH                  {font-weight: bold}

L'élément HEBREU forme un bloc avec un sens de lecture de droite à gauche, l'élément ANGLAIS un bloc avec un sens de lecture de gauche à droite. Les éléments PAR sont des blocs qui héritent du sens de lecture de leurs parents, Ainsi, les deux premiers sont lus en commençant en haut à droite, et les trois derniers en commençant en haut à gauche. Noter que les noms des éléments HEBREU et ANGLAIS ont été choisis exprès pour la démonstration ; en général, ceux-ci devraient l'être pour refléter la structure du document, sans référence à la langue employée.

L'élément EMPH, de type en-ligne, dont la propriété 'unicode-bidi' a la valeur 'normal' (la valeur par défaut), celui-ci n'a pas d'effet sur l'ordonnancement du texte. Par contre, l'élément HE-QUO crée une incorporation.

Quand la ligne a une grande longueur, la mise en forme de ce texte pourrait ressembler à ceci :

               5UERBÉH 4UERBÉH anglais3 2UERBÉH 1UERBÉH

                                8UERBÉH 7UERBÉH 6UERBÉH

anglais9 anglais10 anglais11 13UERBÉH 12UERBÉH

anglais14 anglais15 anglais16

anglais17 20UERBÉH anglais19 18UERBÉH

Noter que l'incorporation de HE-QUO amène HÉBREU18 à se trouver à droite de anglais19.

Si les lignes devaient être découpées, cela pourrait ressembler à :

       2UERBÉH 1UERBÉH
  -ÉH 4UERBÉH anglais3
                 5UERB

   -ÉH 7UERBÉH 6UERBÉH
                 8UERB

anglais9 anglais10 an-
glais11 12UERBÉH
13UERBÉH

anglais14 anglais15
anglais16

anglais17 18UERBÉH
20UERBÉH anglais19

HÉBREU18 devant être lu avant anglais 19, il se trouve dans la ligne au-dessus d'anglais19. Un simple découpage de la longue ligne de la mise en forme précédente n'aurait pas été correct. Noter aussi que la première syllabe de anglais19 aurait pu tenir sur la ligne d'avant, bien que, pour les mots lus de gauche à droite dans un contexte de lecture de droite à gauche, et vice versa, leurs césures soient généralement supprimées pour éviter l'affichage d'un tiret en plein milieu d'une ligne.


Détails du modèle de mise en forme visuel

10 Détails du modèle de mise en forme visuel

  • 10.1 Définition du "bloc conteneur"
  • 10.2 La largeur du contenu : la propriété 'width'
  • 10.3 Le calcul des largeurs et des marges
    • 10.3.1 Les éléments de type en-ligne non remplacés
    • 10.3.2 Les éléments de type en-ligne remplacés
    • 10.3.3 Les éléments de type bloc non remplacés dans un flux normal
    • 10.3.4 Les éléments de type bloc remplacés dans un flux normal
    • 10.3.5 Les éléments flottants non remplacés
    • 10.3.6 Les éléments flottants remplacés
    • 10.3.7 Les éléments non remplacés en position absolue
    • 10.3.8 Les éléments remplacés en position absolue
  • 10.4 Les largeurs minimales et maximales : 'min-width' and 'max-width'
  • 10.5 La hauteur du contenu : la propriété 'height'
  • 10.6 Le calcul des hauteurs et des marges
    • 10.6.1 Les éléments de type en-ligne non remplacés
    • 10.6.2 Les éléments de types en-ligne et bloc remplacés dans un flux normal et éléments flottants remplacés
    • 10.6.3 Les éléments de type bloc non remplacés dans un flux normal et éléments flottants non remplacés
    • 10.6.4 Les éléments non remplacés en position absolue
    • 10.6.5 Les éléments remplacés en position absolue
  • 10.7 Les hauteurs minimales et maximales : 'min-height' et 'max-height'
  • 10.8 Le calcul de la hauteur de ligne : les propriétés 'line-height' et 'vertical-align'
    • 10.8.1 L'interlignage et le demi-interlignage

10.1 Définition du "bloc conteneur"

La position et la taille de la boîte d'un élément sont parfois calculées par rapport à un certain rectangle, appelé le bloc conteneur de l'élément. On le définit ainsi :

  1. Le bloc conteneur dans lequel se range l'élément racine (on l'appelle dans ce cas le bloc conteneur initial), est déterminé par l'agent utilisateur ;
  2. Pour les autres éléments, sauf ceux en position absolue, le bloc conteneur est matérialisé par le bord du contenu de la boîte de type bloc de leur ancêtre le plus proche ;
  3. Pour ceux des éléments avec une spécification 'position: fixed', le bloc conteneur est établi par la zone de visualisation ;
  4. Pour ceux des éléments avec une spécification 'position: absolute', le bloc conteneur est établi par l'ancêtre le plus proche dont la valeur de la propriété 'position' est autre que 'static', de cette manière :
    1. Quand l'ancêtre est un élément de type bloc, le bloc conteneur est matérialisé par le bord de l'espacement de cet ancêtre ;
    2. Quand l'ancêtre est un élément de type en-ligne, le bloc conteneur dépend de la propriété 'direction'
      1. Si cette propriété a la valeur 'ltr', les bords du haut et de gauche du bloc conteneur se confondent avec ceux de la première boîte générée par cet ancêtre, et les bords du bas et de droite avec ceux de la dernière boîte générée par celui-ci ;
      2. Si cette propriété a la valeur 'rtl', les bords du haut et de droite du bloc conteneur se confondent avec ceux de la première boîte générée par cet ancêtre, et les bords du bas et de gauche avec ceux de la dernière boîte générée par celui-ci.

    Quand il n'existe pas un tel ancêtre, c'est le bord du contenu de la boîte de l'élément racine qui établit le bloc conteneur.

Exemple(s) :

Dans ce document, sans positionnement :

<HTML>
   <HEAD>
      <TITLE>Illustration des blocs conteneurs</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">Voici un texte dans le premier paragraphe...</P>
      <P id="p2">Voici un texte <EM id="em1">dans le
      <STRONG id="strong1">second</STRONG> paragraphe...</EM></P>
      </DIV>
   </BODY>
</HTML>

Les blocs conteneurs sont établis ainsi :
Pour la boîte générée par | Le bloc conteneur est établi par
body | bloc conteneur initial (selon l'agent utilisateur)
div1 | body
p1 | div1
p2 | div1
em1 | p2
strong1 | p2

Si on positionne "div1" :

   #div1 { position: absolute; left: 50px; top: 50px }

son bloc conteneur n'est plus "body" ; c'est "div1" qui est devenu le bloc conteneur initial (car il n'y a pas de boîtes d'autres ancêtres positionnés).

Si on positionne également "em1" :

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

La table des blocs conteneurs devient :

Pour la boîte générée par | Le bloc conteneur est établi par
body | bloc conteneur initial
div1 | bloc conteneur initial
p1 | div1
p2 | div1
em1 | div1
strong1 | em1

En positionnant "em1", son bloc conteneur devient la boîte de son plus proche ancêtre positionné (c.à.d. celle générée par "div1").

10.2 La largeur du contenu : la propriété 'width'

'width'
Valeur : <longueur> | <pourcentage> | auto | inherit
Initiale : auto
S'applique à : tous les éléments sauf ceux de type en-ligne non remplacés ainsi que les rangées et groupes de rangées des tables.
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

Cette propriété spécifie la largeur du contenu des boîtes générées par les éléments de type bloc et ceux remplacés.

Celle-ci ne s'applique pas aux éléments non remplacés et de type en-ligne. Les largeurs de leurs boîtes correspondent à celles de leur contenus représentés avant un décalage relatif de leurs enfants. Les boîtes en-ligne se répandent dans des boîtes de ligne. Les largeurs des boîtes de ligne sont données par leur bloc conteneur, celles-ci pouvant rétrécir du fait de la présence de flottants.

La boîte d'un élément remplacé a une largeur intrinsèque l'agent utilisateur pouvant la faire varier en échelle quand la valeur de la propriété est différente de 'auto'.

Les valeurs ont les significations suivantes :

<longueur>
Spécifie une largeur fixe ;
<pourcentage>
Spécifie une largeur en pourcentage. Le pourcentage est calculé en fonction de la largeur du bloc conteneur de la boîte générée ;
auto
La largeur dépend de celles d'autres propriétés. Voir plus loin.

La propriété 'width' n'admet pas de valeurs négatives.

Exemple(s) :

Par exemple, cette règle la largeur du contenu des paragraphes à 100 pixels :

P { width: 100px }

10.3 Le calcul des largeurs et des marges

Pour un élément donné, les valeurs calculées des propriétés 'width', 'margin-left', 'margin-right', 'left' et 'right' dépendent du type de la boîte générée par cet élément et de chacune d'entre elles. En principe, ces valeurs sont les mêmes que celles qui sont spécifiées, les valeurs 'auto' étant remplacées par certaines valeurs appropriées, mais il y a des exceptions. On doit distinguer les cas suivants :

  1. les éléments de type en-ligne non remplacés
  2. les éléments de type en-ligne remplacés
  3. les éléments de type bloc non remplacés dans un flux normal
  4. les éléments de type bloc remplacés dans un flux normal
  5. les éléments flottants non remplacés
  6. les éléments flottants remplacés
  7. les éléments non remplacés en position absolue
  8. les éléments remplacés en position absolue

Les points 1 à 6 incluent le positionnement relatif.

10.3.1 Les éléments de type en-ligne non remplacés

La propriété 'width' ne s'applique pas. Quand on spécifie une valeur 'auto' pour les propriétés 'left', 'right', 'margin-left' ou 'margin-right', leur valeur calculée devient '0'.

10.3.2 Les éléments de type en-ligne remplacés

Quand on spécifie une valeur 'auto' pour les propriétés 'left', 'right', 'margin-left' ou 'margin-right' leur valeur calculée devient '0'. Pour la valeur spécifiée 'auto', la propriété 'width' prend, comme valeur calculée, la largeur intrinsèque de l'élément.

Quand on spécifie la valeur 'auto' aux propriétés 'width' et 'height', la valeur calculée de 'width' correspond à la largeur intrinsèque de l'élément. Si on spécifie la valeur 'auto' pour la propriété 'width' et une autre valeur pour la propriété 'height', la valeur calculée de 'width' est le résultat de l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).

10.3.3 Les éléments de type bloc non remplacés dans un flux normal

Quand on spécifie la valeur 'auto' aux propriétés 'left' ou 'right', leur valeur calculée est '0'. Les équations suivantes doivent être vérifiées pour les autres propriétés :

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largeur du bloc conteneur

Quand la valeur de la propriété 'border-style' est 'none', utiliser pour l'épaisseur de la bordure la valeur '0'. Quand toutes les propriétés précédentes ont une valeur spécifiée autre que 'auto', on dit que les valeurs sont "sur-contraintes" et l'une des valeurs calculées devra être différente de celle qui aura été spécifiée. Quand la propriété 'direction' a la valeur 'ltr', la valeur spécifiée pour la propriété 'margin-right' sera écartée, sa valeur calculée sera déterminée de manière à ce que l'égalité précédente soit vérifiée. Et de la même façon, pour la propriété 'margin-left', quand la propriété 'direction' a la valeur 'rtl'.

Si l'une exactement des valeurs spécifiées est 'auto', sa valeur calculée est déduite de l'égalité.

Si la propriété 'width' a la valeur 'auto', les valeurs spécifiées 'auto' d'autres propriétés deviennent '0', la valeur calculée de 'width' se déduisant alors de l'égalité.

Si les deux propriétés 'margin-left' et 'margin-right' ont la valeur 'auto', leurs valeurs calculées sont égales.

Noter que la valeur de la propriété 'width' ne peut être supérieure à celle de 'max-width', ni inférieure à celle de 'min-width'. En particulier, elle ne peut pas être négative. Voir les règles s'y rapportant au chapitre 10.4 plus loin.

10.3.4 Les éléments de type bloc remplacés dans un flux normal

Quand les propriétés 'left' ou 'right' ont la valeur 'auto', leur valeur calculée devient '0'. Quand on spécifie la valeur 'auto' pour la propriété 'width', sa valeur calculée prend celle de la largeur intrinsèque de l'élément. Si l'une des propriétés, 'margin-left' ou 'margin-right', a la valeur 'auto', sa valeur calculée se déduit de l'équation. Et si celles-ci ont toutes les deux la valeur 'auto', leurs valeurs calculées sont égales

Quand les propriétés 'width' et 'height' ont toutes deux la valeur spécifiée 'auto', la valeur calculée de la première est égale à la largeur intrinsèque de l'élément. Si la valeur spécifiée de 'width' est 'auto' et celle de 'height' une autre valeur, alors la valeur calculée de 'width' est obtenue par l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).

10.3.5 Les éléments flottants non remplacés

Quand les propriétés 'left', 'right', 'width', 'margin-left' ou 'margin-right' ont une valeur spécifiée 'auto', leur valeur calculée devient '0'.

10.3.6 Les éléments flottants remplacés

Quand les propriétés 'left', 'right', 'margin-left' ou 'margin-right' ont une valeur spécifiée 'auto', leur valeur calculée devient '0'. Pour la propriété 'width' et une valeur spécifiée 'auto', sa valeur calculée devient celle de la largeur intrinsèque de l'élément.

Quand les propriétés 'width' et 'height' ont toutes deux une valeur spécifiée 'auto', la valeur calculée de 'width' devient celle de la largeur intrinsèque de l'élément. Si la propriété 'height' a une valeur spécifiée autre que 'auto', la propriété 'width' ayant une valeur 'auto', la valeur calculée de 'width' est obtenue par l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).

10.3.7 Les éléments non remplacés en position absolue

Les valeurs calculées de ces éléments sont déterminées selon cette équation :

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = largeur du bloc conteneur

Quand la valeur de la propriété 'border-style' est 'none', utiliser pour l'épaisseur de la bordure la valeur '0'. Cette équation se résout dans une succession de substitutions selon l'ordre suivant :

  1. Si la propriété 'left' a la valeur spécifiée 'auto' et la propriété 'direction' la valeur 'ltr', la valeur calculée de 'left' devient celle de la distance entre le bord gauche du bloc conteneur et le bord de la marge gauche d'une boîte hypothétique, celle-ci aurait été la première boîte de l'élément dont la propriété 'position' aurait eu la valeur 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve à gauche du bord du bloc conteneur ;
  2. Si la propriété 'right' a la valeur spécifiée 'auto' et la propriété 'direction' la valeur 'rtl', la valeur calculée de 'right' devient celle de la distance entre le bord droit du bloc conteneur et le bord de la marge droite de la boîte hypothétique, de la même manière que ci-dessus. Cette valeur peut être négative si cette boîte se trouve à droite du bord du bloc conteneur ;
  3. Si la propriété 'width' a la valeur spécifiée 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'left' ou 'right' ;
  4. Si les propriétés 'left', 'right' ou 'width' ont (encore) la valeur spécifiée 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-left' ou 'margin-right' ;
  5. Si, à ce stade, les propriétés 'margin-left' et 'margin-right' ont toujours la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
  6. Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
  7. Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'left' (quand la propriété 'direction' a la valeur 'rtl'), ou celle de 'right' (quand la propriété 'direction' a la valeur 'ltr'), puis résoudre l'équation pour en obtenir la valeur calculée.

10.3.8 Les éléments remplacés en position absolue

Ce cas est similaire au précédent, à l'exception que l'élément a une largeur intrinsèque. La succession des substitutions étant maintenant :

  1. Si les propriétés 'width' et 'height' ont toutes deux la valeur sp&eacue;cifié 'auto', la valeur calculée de 'width' devient celle de la largeur intrinsèque de l'élément. Pour 'width' ayant la valeur spécifiée 'auto', et 'height' une autre valeur, alors la valeur calculée de 'width' est le résultat de l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ) ;
  2. Si la propriété 'width' a la valeur spécifiée 'auto', lui substituer la largeur intrinsèque de l'élément ;
  3. Si la propriété 'left' a la valeur 'auto' et la propriété 'direction' la valeur 'ltr', remplacer la valeur 'auto' par celle de la distance entre le bord gauche du bloc conteneur et le bord de la marge gauche d'une boîte hypothétique, celle-ci aurait été la première boîte d'un élément dont la propriété 'position' aurait été 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve à gauche du bord du bloc conteneur ;
  4. Si la propriété 'right' a la valeur 'auto' et la propriété 'direction' la valeur 'rtl', remplacer la valeur 'auto' par celle de la distance entre le bord droite du bloc conteneur et le bord de la marge droite d'une boîte hypothétique, de la même manière que ci-dessus. Cette valeur peut être négative si cette boîte se trouve à droite du bord du bloc conteneur ;
  5. Si les propriétés 'left' ou 'right' ont la valeur 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-left' ou 'margin-right' ;
  6. Si, à ce stade, les propriétés 'margin-left' et 'margin-right' ont toutes deux la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
  7. Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
  8. Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'left' (quand la propriété 'direction' a la valeur 'rtl'), ou celle de 'right' (quand la propriété 'direction' a la valeur 'ltr'), puis résoudre l'équation pour en obtenir la valeur calculée.

10.4 Les largeurs minimales et maximales : 'min-width' et 'max-width'

'min-width'
Valeur : <longueur> | <pourcentage> | inherit
Initiale : selon l'agent utilisateur
S'applique à : tous les éléments, sauf à ceux de type en-ligne non remplacés et aux éléments des tables
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel
'max-width'
Valeur : <longueur> | <pourcentage> | none | inherit
Initiale : none
S'applique à : tous les éléments, sauf à ceux de type en-ligne non remplacés et aux éléments des tables
Héritée : non
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

Ces propriétés permettent aux auteurs de restreindre les dimensions d'une boîte dans certaines proportions. Les significations des valeurs sont :

<longueur>
Spécifie une largeur calculée minimale ou maximale fixe ;
<pourcentage>
Spécifie un pourcentage pour déterminer la valeur calculée. Celui-ci est obtenu en fonction de la largeur du bloc conteneur ;
none
Aucune limite sur la largeur de la boîte (seulement pour 'max-width').

L'algorithme suivant décrit l'action de ces deux propriétés pour obtenir la valeur calculée de la propriété 'width' :

  1. La largeur est calculée (sans l'intervention des propriétés 'min-width' et 'max-width'), selon les règles définies plus haut dans "Le calcul des largeurs et des marges" ;
  2. Si la valeur calculée de 'min-width' est supérieure à celle de 'max-width', la propriété 'max-width' prend la valeur de 'min-width' ;
  3. Si la largeur calculée est supérieure à la valeur de 'max-width', les règles de calcul des largeurs et marges sont appliquées à nouveau, en utilisant cette fois la valeur de 'max-width' comme valeur spécifiée pour la propriété 'width' ;
  4. Si la largeur calculée est inférieure à la valeur de 'min-width', les mêmes règles sont appliquées à nouveau, en utilisant cette fois-ci la valeur de 'min-width' comme valeur spécifiée pour la propriété 'width'.

L'agent utilisateur peut définir une valeur minimum non négative pour la propriété 'min-width', celle-ci pouvant varier d'un élément à l'autre et pouvant même dépendre d'autres propriétés. Si la valeur de 'min-width' descend en dessous de cette limite, celle-ci étant spécifiée explicitement ou ayant la valeur 'auto' et les règles ci-dessous la rendant ainsi trop petite, alors l'agent utilisateur peut considérer cette valeur limite comme étant la valeur calculée.

10.5 La hauteur du contenu : la propriété 'height'

'height'
Valeur : <longueur> | <pourcentage> | auto | inherit
Initiale : auto
S'applique à : tous les éléments, sauf ceux de type en-ligne non remplacés, et les colonnes et groupes de colonnes des tables
Héritée : non
Pourcentage : voir plus loin
Médias : visuel

Cette propriété spécifie la hauteur du contenu des boîtes générées par les éléments de type bloc et ceux remplacés.

Celle-ci ne s'applique pas au éléments de type en-ligne non remplacés. C'est la valeur (pouvant être héritée) de leur propriété 'line-height' qui donne la hauteur des boîtes de ceux-ci.

[Errata : Étant donné que l'agent utilisateur est libre de choisir le bloc conteneur de l'élément racine (voir la section 10.1), il peut, par exemple, calculer une hauteur en pourcentage pour l'élément racine en fonction de la hauteur de la zone de visualisation.]

Les significations des valeurs sont :

<longueur>
Spécifie une hauteur fixe ;
<pourcentage>
Spécifie une hauteur en pourcentage. Celui-ci est calculé en fonction du bloc conteneur de la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c.à.d., celle-ci dépendant de la hauteur du contenu), sa valeur est considérée comme étant 'auto' ;
auto
La hauteur dépend des valeurs des autres propriétés. Voir les explications plus loin.

La propriété 'height' n'admet pas de valeur négative.

Exemple(s) :

Par exemple, cette règle fixe la hauteur des paragraphes à 100 pixels :

P { height: 100px }

Les paragraphes qui requièrent une hauteur supérieure à 100px vont déborder selon la propriété 'overflow'.

10.6 Le calcul des hauteurs et des marges

Pour le calcul des valeurs des propriétés 'top', 'margin-top', 'height', 'margin-bottom' et 'bottom', on doit effectuer une distinction entre les différentes sortes de boîtes :

  1. les éléments de type en-ligne non remplacés
  2. les éléments de type en-ligne remplacés
  3. les éléments de type bloc non remplacés dans un flux normal
  4. les éléments de type bloc remplacés dans un flux normal
  5. les éléments flottants non remplacés
  6. les éléments flottants remplacés
  7. les éléments non remplacés en position absolue
  8. les éléments remplacés en position absolue

Les points 1 à 6 incluent le positionnement relatif.

10.6.1 Les éléments de type en-ligne non remplacés

Quand les propriétés 'top', 'bottom', 'margin-top' ou 'margin-bottom' ont la valeur spécifiée 'auto', leur valeur calculée devient '0'. La propriété 'height' ne s'applique pas. La hauteur de l'aire du contenu est égale à la taille effective de la police de l'élément. Les espacements, bordures et marges verticales d'une boîte en-ligne non remplacée commencent en haut et en bas de la police, et non pas en haut et en bas de la ligne. Le calcul de la hauteur de la boîte de la ligne employant seulement la propriété 'line-height'.

Si plusieurs tailles de polices sont utilisées (cela peut arriver quand les glyphes proviennent de différentes polices), la hauteur de l'aire du contenu n'est pas définie par cette spécification. On recommande néanmoins que la plus grande taille de police soit retenue pour la détermination de cette hauteur.

10.6.2 Les éléments de types en-ligne et bloc remplacés dans un flux normal et éléments flottants remplacés

Quand les propriétés 'top', 'bottom', 'margin-top' ou 'margin-bottom' ont la valeur spécifiée 'auto', leur valeur calculée devient '0'. Si les propriétés 'width' et 'height' ont toutes deux la valeur spécifiée 'auto', la valeur calculée de 'width' prend celle de la largeur intrinsèque de l'élément. Si la propriété 'width' a la valeur spécifiée 'auto' et la propriété 'height' une autre valeur, alors la valeur calculée de 'width' est obtenue par l'opération (largeur intrinsèque) * ( (hauteur calculée) / (hauteur intrinsèque) ).

10.6.3 Les éléments de type bloc non remplacés dans un flux normal et éléments flottants non remplacés

Quand les propriétés 'top', 'bottom', 'margin-top', ou 'margin-bottom' ont la valeur spécifiée 'auto', leur valeur calculée devient '0'. Si la propriété 'height' a la valeur spécifiée 'auto', la hauteur de l'élément dépend d'un éventuel enfant de type bloc et des espacements et bordures de celui-ci.

Si l'élément a des enfants de type en-ligne, la hauteur de celui-ci est égale à la distance entre le sommet de la boîte de ligne la plus élevée et le bas de celle la plus basse.

Si l'élément a des enfants de type bloc, la hauteur de celui-ci est égale à la distance entre la bordure du haut de la boîte d'un enfant la plus élevée et la bordure du bas de celle d'un enfant la plus basse. Cependant, quand l'espacement et/ou la bordure du haut de l'élément ne sont pas nuls, alors le contenu de l'élément commence à partir du bord de la marge haute de l'enfant le plus élevé. Et, de façon similaire, le contenu finit au bord de la marge basse de l'enfant le plus en bas.

Seuls les enfants dans un flux normal sont pris en compte (c.à.d. les boîtes des éléments flottants et celles des éléments en position absolue sont ignorées, les boîtes des éléments en position relative sont considérées sans leur décalage). Noter que la boîte de l'enfant peut être anonyme.

10.6.4 Les éléments non remplacés en position absolue

Pour les éléments en position absolue, les dimensions verticales doivent vérifier cette équation :

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = hauteur du bloc conteneur.

Quand la valeur de la propriété 'border-style' est 'none', utiliser pour l'épaisseur de la bordure la valeur '0'. Cette équation se résout dans une succession de substitutions selon l'ordre suivant :

  1. Si la propriété 'top' a la valeur spécifiée 'auto', la remplacer par la distance entre le bord haut du bloc conteneur et le bord de la marge haute d'une boîte hypothétique, celle-ci aurait été la première boîte de l'élément dont la propriété 'position' aurait eu la valeur 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve au-dessus du bord du bloc conteneur ;
  2. Si les propriétés 'height' et 'bottom' ont toutes deux la valeur spécifiée 'auto', remplacer celle de 'bottom' par '0' ;
  3. Si les propriétés 'bottom' ou 'height' ont toujours la valeur 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-top' ou 'margin-bottom' ;
  4. Si, à ce stade, les propriétés 'margin-top' et 'margin-bottom' ont toujours la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
  5. Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
  6. Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'bottom' et résoudre l'équation pour en obtenir la valeur calculée.

10.6.5 Les éléments remplacés en position absolue

Ce cas est similaire au précédent, à l'exception que l'élément a une hauteur intrinsèque. La succession des substitutions étant maintenant :

  1. Si la propriété 'height' a la valeur spécifiée 'auto', lui substituer la hauteur intrinsèque de l'élément ;
  2. Si la propriété 'top' a la valeur spécifiée 'auto', la remplacer par la distance entre le bord haut du bloc conteneur et le bord de la marge haute d'une boîte hypothétique, cellci aurait été la première boîte de l'élément dont la propriété 'position' aurait eu la valeur 'static'. Les agents utilisateurs étant libres d'évaluer un emplacement probable de cette boîte, plutôt que d'en calculer l'emplacement effectif. Cette valeur peut être négative si cette boîte hypothétique se trouve au-dessus du bord du bloc conteneur ;
  3. Si la propriété 'bottom' a la valeur 'auto', remplacer par '0' les valeurs 'auto' éventuelles des propriétés 'margin-top' ou 'margin-bottom' ;
  4. Si, à ce stade, les propriétés 'margin-top' et 'margin-bottom' ont toujours la valeur 'auto', résoudre l'équation avec la contrainte supplémentaire que ces deux marges doivent avoir la même valeur ;
  5. Si, à ce stade, il ne reste plus qu'une seule valeur 'auto', résoudre l'équation pour obtenir la valeur calculée de cette propriété ;
  6. Si, à ce stade, les valeurs sont sur-contraintes, ignorer la valeur spécifiée pour la propriété 'bottom' et résoudre l'équation pour en obtenir la valeur calculée.

10.7 Les hauteurs minimales et maximales : 'min-height' et 'max-height'

Il est parfois utile de restreindre la hauteur d'un élément dans certaines proportions. Deux propriétés offrent cette fonctionnalité :

'min-height'
Valeur : <longueur> | <pourcentage> | inherit
Initiale : 0
S'applique à : tous les éléments, sauf ceux de type en-ligne non remplacés et les éléments des tables
Héritée : non
Pourcentage : se rapporte à la hauteur du bloc conteneur
Médias : visuel
'max-height'
Valeur : <longueur> | <pourcentage> | none | inherit
Initiale : none
S'applique à : tous les éléments, sauf ceux de type en-ligne non remplacés et les éléments des tables
Héritée : non
Pourcentage : se rapporte à la hauteur du bloc conteneur
Médias : visuel

Ces deux propriétés permettent aux auteurs de restreindre les hauteurs des boîtes dans certaines proportions. Les significations des valeurs sont :

<longueur>
Spécifie une hauteur calculée minimale ou maximale fixe ;
<pourcentage>
Spécifie un pourcentage pour déterminer la valeur calculée. Celui-ci est obtenu en fonction de la hauteur du bloc conteneur. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c.à.d. celle-ci dépendant de la hauteur du contenu), sa valeur est considérée comme étant 'auto' ;
none
Aucune limite sur la hauteur de la boîte (seulement pour 'max-height').

L'algorithme suivant décrit l'action de ces deux propriétés pour obtenir la valeur calculée de la propriété 'height' :

  1. La hauteur est calculée, sans l'intervention des propriétés ('min-height' et 'max-height'), selon les règles définies plus haut dans "Le calcul des hauteurs et des marges" ;
  2. Si la valeur calculée de 'min-height' est supérieure à celle de 'max-height', la propriété 'max-height' prend la valeur de 'min-height' ;
  3. Si la hauteur calculée est supérieure à la valeur de 'max-height', les règles de calcul des hauteurs et marges sont appliquées à nouveau, en utilisant cette fois la valeur de 'max-height' comme valeur spécifiée pour la propriété 'height' ;
  4. Si la hauteur calculée est inférieure à la valeur de 'min-height', les mêmes règles sont appliquées à nouveau, en utilisant cette fois-ci la valeur de 'min-height' comme valeur spécifiée pour la propriété 'height'.

10.8 Le calcul de la hauteur de ligne : les propriétés 'line-height' et 'vertical-align'

Comme décrit dans le passage traitant des contextes de mise en forme en-ligne, les agents utilisateurs rangent les boîtes en-ligne dans des boîtes de ligne, les empilant les unes sur les autres. On détermine la hauteur de ces boîtes de ligne ainsi :

  1. On calcule la hauteur de chaque boîte en-ligne contenues dans la boîte de ligne (voir "Le calcul des hauteurs et des marges" ainsi que la propriété 'line-height') ;
  2. Puis on aligne ces boîtes en-ligne verticalement en fonction de la valeur de leur propriété 'vertical-align' ;
  3. La hauteur de la boîte de ligne correspond à la distance entre le haut de la boîte la plus élevée et le bas de celle la plus basse.

Les éléments en-ligne vides engendrent des boîtes en-ligne vide, mais ces dernières ont quand même des marges, des espacements, des bordures et une hauteur de ligne, et donc, elles influencent ces calculs tout comme les élément avec un contenu.

Noter que, quand toutes les boîtes, dans la boîte de ligne, sont alignées sur leurs bas, la boîte de ligne aura exactement la hauteur de celle qui a la plus grande hauteur. Cependant, quand celles-ci sont alignées sur une ligne de base commune, le haut et le bas de la boîte de ligne peuvent ne pas coïncider avec ceux de la boîte de plus grande hauteur.

10.8.1 L'interlignage et le demi-interlignage

La hauteur d'une boîte de ligne pouvant différer de celle de la taille de police du texte contenu dans une boîte (ex. 'line-height' > 1em), il peut y avoir un espace au-dessus et en-dessous des glyphes ainsi rendus. On appelle cette différence, entre la taille de la police et la valeur calculée pour la propriété 'line-height', l'interlignage, et la moitié de celle-ci, le demi-interlignage.

Les agents utilisateurs centrent verticalement les glyphes dans une boîte en-ligne, ajoutant un demi-interlignage au-dessus et en-dessous de ceux-ci. Par exemple, un extrait de texte dont la hauteur est de '12pt' et la valeur de la propriété 'line-height' est '14pt', il serait ajouté un espace supplémentaire de 2pts, répartis en 1pt au-dessus et 1pt au-dessous des lettres. Ceci concerne aussi les boîtes vides, celles-ci se comportant comme si elles contenaient des lettres infiniment réduites.

Quand la valeur de la propriété 'line-height' est inférieure à la taille de la police, la hauteur finale de la boîte en-ligne sera inférieure à la taille de la police et l'affichage des glyphes "débordera" de la boîte de ligne. Si une telle boîte en-ligne touche le bord de la boîte de ligne, l'affichage "débordera" aussi dans la boîte de ligne adjacente.

Bien que les marges, bordures et espacements des éléments non remplacés n'interviennent pas dans le calcul de la hauteur de la boîte en-ligne (et ainsi dans celui de la boîte de ligne), ceux-ci sont quand même rendus autour de la boîte de ligne. En conséquence, si la hauteur de la boîte de ligne est inférieure à celle comprise entre les bords externes des boîtes qui y sont contenues, les arrière-plans et les couleurs des espacements peuvent "déborder" dans les boîtes de ligne adjacentes. Cependant, certains agents utilisateurs peuvent utiliser la boîte de ligne pour "découper" les aires de bordure et d'espacement (et ne pas les rendre).

'line-height'
Valeur : normal | <nombre> | <longueur> | <pourcentage> | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Percentages: se rapporte à la taille de la police de l'élément lui-même
Médias : visuel

Quand on applique cette propriété à un élément de type bloc dont le contenu est composé d'éléments de type en-ligne, celle-ci spécifie la hauteur minimale de chacune des boîtes en-ligne générées. Cette hauteur minimale se décompose en une hauteur minimale au-dessus de la ligne de base de l'élément de type bloc et en une profondeur minimale au-dessous de celui-ci, exactement comme si chacune des boîtes de ligne commençait par une boîte en-ligne de largeur nulle, celle-ci ayant les valeurs des propriétés de police et de hauteur de ligne de l'élément de type bloc (ce que TEX appelle un "étai").

Quand on l'applique à un élément de type en-ligne, celle-ci spécifie la hauteur exacte de chacune des boîtes générées par l'élément. Sauf dans le cas des éléments de type en-ligne remplacés, où la hauteur de la boîte est donnée par la propriété 'height'.

Les significations des valeurs pour cette propriété sont :

normal
Indique aux agents utilisateurs une valeur calculée "raisonnable", basée sur la taille de la police de l'élément. Cette valeur revêt la même signification que <number>. On recommande pour 'normal' une valeur calculée entre 1.0 et 1.2 ;
<longueur>
Cette longueur est appliquée à la hauteur de la boîte. Les valeurs négatives ne sont pas admises ;
<nombre>
La valeur calculée de la propriété est obtenue en multipliant ce nombre par la taille de la police de l'élément. Les valeurs négatives ne sont pas admises. Cependant, ce nombre est hérité, et non la valeur calculée ;
<pourcentage>
La valeur calculée de la propriété correspond à ce pourcentage multipliée par la valeur calculée pour la taille de la police. Les valeurs négatives ne sont pas admises.

Exemple(s) :

Les trois règles suivantes produisent une même hauteur de ligne :

DIV { line-height: 1.2; font-size: 10pt }     /* nombre */
DIV { line-height: 1.2em; font-size: 10pt }   /* longueur */
DIV { line-height: 120%; font-size: 10pt }    /* pourcentage */

Quand un élément contient du texte dont l'affichage requiert plusieurs polices, les agents utilisateurs devraient en déterminer la valeur pour la propriété 'line-height' en fonction de celle qui a la plus grande taille.

Généralement, quand la propriété 'line-height' a une seule valeur pour toutes les boîtes en-ligne d'un paragraphe (sans images trop hautes), la recommandation précédente devrait faire que les lignes de base des lignes successives soient indépendantes de la hauteur de ligne. Ceci est important quand on doit aligner des colonnes de texte dans différentes polices, par exemple dans une table.

Noter que les éléments remplacés ont une propriété 'font-size' et une propriété 'line-height', même si on ne les utilise pas directement dans la détermination de la hauteur de la boîte : les valeurs exprimées en 'em' et en 'ex' sont relatives à celle de la propriété 'font-size', et les valeurs en pourcentage de la propriété 'vertical-align', relatives à celle de la propriété 'line-height'.

'vertical-align'
Valeur : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <pourcentage> | <longueur> | inherit
Initiale : baseline
S'applique à : ceux des éléments de type en-ligne et à l'élément 'table-cell'
Héritée : non
Pourcentage : se rapporte à la valeur de la propriété 'line-height' de l'élément lui-même
Médias : visuel

Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.

Note : la signification des valeurs pour cette propriété est légèrement différente dans le contexte des tables. Consulter le chapitre traitant des algorithmes pour la hauteur des tables pour le détail.

baseline
Aligne la ligne de base d'une boîte avec celle de son parent. Si la boîte en est dépourvue, aligner le bas de celle-ci avec la ligne de base de son parent ;
middle
Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent, ce milieu étant augmenté de la moitié de la valeur de la propriété 'x-height' du parent ;
sub
Abaisse la ligne de base de la boîte à la position appropriée pour une écriture en indice dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément ;
super
Élève la ligne de base de la boîte à la position appropriée pour une écriture en exposant dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément ;
text-top
Aligne le haut de la boîte avec le haut du texte de l'élément parent ;
text-bottom
Aligne le bas de la boîte avec le bas du texte de l'élément parent ;
<pourcentage>
Élève (pour une valeur positive) ou abaisse (pour une valeur négative) la boîte de ce pourcentage (qui se rapporte à la valeur de la propriété 'line-height'). La valeur '0%' signifie la même chose que 'baseline' ;
<longueur>
Élève (pour une valeur positive) ou abaisse (pour une valeur négative) la boîte de cette quantité. La valeur '0cm' signifie la même chose que 'baseline'.

Ces dernières valeurs se rapportent ` la boîte de ligne dans laquelle survient la boîte générée :

top
Aligne le haut de la boîte avec le haut de la boîte de ligne ;
bottom
Aligne le bas de la boîte avec le bas de la boîte de ligne.


Les effets visuels

11 Les effets visuels

  • 11.1 Le débordement et le rognage
    • 11.1.1 Le débordement : la propriété 'overflow'
    • 11.1.2 Le rognage : la propriété 'clip'
  • 11.2 La visibilité : la propriété 'visibility'

11.1 Le débordement et le rognage

Généralement, le contenu d'une boîte de bloc est confiné entre les bords du contenu de celle-ci. Parfois, une boîte peut déborder, son contenu s'étalant en partie ou entièrement en dehors de la boîte. Des exemples :

  • Une ligne ne peut pas être coupée, ce qui rend ainsi la boîte de ligne plus large que la boîte du bloc ;
  • Une boîte de bloc est trop large pour le bloc conteneur. Ceci peut arriver quand la propriété 'width' d'un élément a une valeur telle que la boîte de bloc générée se répand au-delà des côtés du bloc conteneur ;
  • La hauteur d'un élément excède la hauteur explicite assignée au bloc conteneur (c.à.d. la hauteur de celui-ci est déterminée par la propriété 'height', et non par la hauteur du contenu) ;
  • La boîte d'un descendant en position absolue se trouve en partie hors de la boîte de son parent ;
  • Les marges de la boîte d'un descendant sont négatives, ce qui déplace celle-ci en partie hors de la boîte de son parent.

À chaque fois qu'un débordement survient, c'est la propriété 'overflow' qui spécifie , s'il y a lieu, la façon dont la boîte sera rognée. La propriété 'clip' spécifie la taille et la forme de la zone rognée. Quand on spécifie un rognage laissant une petite surface, des contenus qui seraient visibles autrement peuvent disparaître.

11.1.1 Le débordement : la propriété 'overflow'

'overflow'
Valeur : visible | hidden | scroll | auto | inherit
Initiale : visible
S'applique à : ceux des éléments de type bloc et ceux remplacés
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété spécifie si le contenu d'un élément de type bloc doit être rogné quand celui-ci déborde de la boîte de cet élément (qui se comporte comme un bloc conteneur). Les significations des valeurs sont :

visible
Le contenu ne sera pas rogné, et celui-ci peut être représenté hors de la boîte du bloc ;
hidden
Le contenu sera rogné et aucun mécanisme de défilement ne devrait être fourni pour voir la partie qui aura été rognée. On spécifie la taille et la forme du reliquat du rognage avec la propriété 'clip' ;
scroll
Le contenu sera rogné et, si disponible, l'agent utilisateur fournit un mécanisme de défilement visible à l'écran (tel qu'une barre de défilement ou un dispositif panoramique), celui-ci devrait apparaître pour une boîte donnée, que le contenu de celle-ci soit rogné ou non. Ceci pour éviter l'inconvénient que représenterait des barres de défilement apparaissant et disparaissant dans un environnement dynamique. Quand cette valeur est spécifiée conjointement avec un type de média 'print, la partie du contenu ayant débordée devrait aussi être imprimée ;
auto
L'interprétation de cette valeur dépend de l'agent utilisateur, cependant, celui-ci devrait fournir un mécanisme de défilement quand les boîtes débordent.

Même quand la valeur de la propriété 'overflow' est 'visible', il peut arriver que le contenu soit rogné par le système d'exploitation, pour tenir dans la fenêtre du document de l'agent utilisateur.

Exemple(s) :

Considérons le bloc de citation suivant (BLOCKQUOTE), trop grand pour tenir dans son bloc conteneur (établi par un élément DIV). En voici le document source :

<DIV>
<BLOCKQUOTE>
<P>Je n'aimais pas la pièce, et puis, je la vis
dans des conditions adverses - le rideau était levé.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Et ici, la feuille de style régissant les tailles et le style des boîtes générées :

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px;
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; border: none; }

La propriété 'overflow' ayant la valeur initiale 'visible', l'élément BLOCKQUOTE ne sera pas rogné lors de sa mise en forme, donnant quelque chose comme ceci :

Débordement visible. [D]

Si, par ailleurs, on donne la valeur 'hidden' à la propriété 'overflow' de l'élément DIV, l'élément BLOCKQUOTE sera rogné par le bloc conteneur, ainsi :

Débordement rogné [D]

La valeur 'scroll' aurait signifié, à ceux des agents utilisateurs l'implémentant, de faire apparaître un mécanisme de défilement pour que les utilisateurs puissent accéder au contenu de la partie ayant été rognée.

11.1.2 Le rognage : la propriété 'clip'

Une zone de rognage définit la partie du contenu rendu d'un élément qui est visible. Par défaut, la zone de rognage a la même taille et forme que la boîte, ou les boîtes, de l'élément. Cependant, celle-ci peut être modifiée à l'aide de la propriété 'clip'.

'clip'
Valeur : <forme> | auto | inherit
Initiale : auto
S'applique à : ceux des éléments de type bloc et ceux remplacés
Héritée : non
Pourcentage : sans objet
Médias : visuel

La propriété 'clip' s'applique aux éléments dont la valeur de la propriété 'overflow' est autre que 'visible'. Les significations des valeurs sont :

auto
La zone de rognage a la même taille et emplacement que la boîte, ou les boîtes, de l'élément ;
<forme>
En CSS2, la seule valeur admise pour <forme> est : rect (<haut>, <droite>, <bas>, <gauche>) où <haut>, <droite>, <bas> et <gauche> représentent les décalages par rapport aux côtés respectifs de la boîte.

Les valeurs <haut>, <droite>, <bas>, et <gauche> peuvent être une valeur de <longueur> ou bien 'auto'. Les valeurs négatives sont admises. La valeur 'auto' fait correspondre un bord donné de la zone de rognage à celui de la boîte générée par l'élément (c.à.d. la valeur 'auto' a la même signification que '0').

Avec des coordonnées ayant des valeurs en pixels, il faudrait faire attention à ce qu'aucun pixel ne reste visible quand la somme de <gauche> et <droite> est égale à la largeur de l'élément (et de même, pour la somme de <haut> et <bas> avec la hauteur de l'élément), et inversement, à ce qu'aucun pixel ne reste caché quand leurs sommes sont nulles.

Les ancêtres de l'élément peuvent aussi avoir des zones de rognage (quand leur propriété 'overflow' n'a pas la valeur 'visible' ; c'est l'intersection des diverses zones de rognage qui est rendue.

Si la zone de rognage excède les limites de la fenêtre du document de l'agent utilisateur, son contenu peut se trouver rogner par la fenêtre, en fonction du système d'exploitation.

Exemple(s) :

Ces deux règles :

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

celles-ci vont créer les zones de rognage rectangulaires, matérialisées par les lignes en pointillés dans leurs illustrations respectives suivantes :

Deux zones de rognage. [D]

Note En CSS2, toutes les zones de rognage sont rectangulaires. Il faut s'attendre à ce que les évolutions ultérieures autorisent des formes qui ne soient pas rectangulaires.

11.2 La visibilité : la propriété 'visibility'

'visibility'
Valeur : visible | hidden | collapse | inherit
Initiale : visible
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

La propriété 'visibility' spécifie le rendu, ou non, des boîtes générées par un élément donné. Ces boîtes, bien qu'invisibles, influencent toujours la mise en forme du document (utiliser la propriété 'display' avec la valeur 'none' pour prohiber la génération d'une boîte, et ainsi toutes influences sur la mise en forme). Les valeurs ont les significations suivantes :

visible
La boîte générée est visible ;
hidden
La boîte générée est invisible (entièrement transparente), mais celle-ci influençant toujours la mise en forme ;
collapse
Consulter le passage traitant des effets dynamiques sur les rangées et colonnes des tables. Quand on l'utilise avec autre chose, cette valeur 'collapse' correspond à 'hidden'.

On peut employer cette propriété conjointement avec des scripts pour créer des effets dynamiques.

Dans l'exemple suivant, quand on presse l'un ou l'autre bouton du formulaire, un script actionné par un utilisateur provoque l'apparition de la boîte qui lui correspond et, en même temps, la disparition de l'autre. Ces boîtes conservant leur taille et leur emplacement, l'effet produit le remplacement de l'une par l'autre (le script, écrit dans un langage hypothétique, pouvant, ou non, produire un effet avec un agent utilisateur conforme).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #conteneur1 { position: absolute;
                 top: 2in; left: 2in; width: 2in }
   #conteneur2 { position: absolute;
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="conteneur1">
   <IMG alt="Al Capone"
        width="100" height="100"
        src="suspect1.jpg">
   <P>Nom : Al Capone</P>
   <P>Résidence : Chicago</P>
</DIV>

<DIV id="conteneur2">
   <IMG alt="Lucky Luciano"
        width="100" height="100"
        src="suspect2.jpg">
   <P>Nom : Lucky Luciano</P>
   <P>Résidence : New York</P>
</DIV>

<FORM method="post"
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button"
          value="Capone"
          onclick='show("conteneur1");hide("conteneur2")'>
   <INPUT name="Luciano" type="button"
          value="Luciano"
          onclick='show("conteneur2");hide("conteneur1")'>
</FORM>
</BODY>
</HTML>


Le contenu généré, le numérotage automatique et les listes

12 Le contenu généré, le numérotage automatique et les listes

  • 12.1 Les pseudo-éléments :before et :after
  • 12.2 La propriété 'content'
  • 12.3 L'interaction de :before et :after avec les éléments ayant les valeurs 'compact' et 'run-in'
  • 12.4 Les guillemets
    • 12.4.1 Spécifier des guillemets avec la propriété 'quotes'
    • 12.4.2 Insérer des guillemets avec la propriété 'content'
  • 12.5 Compteurs et numérotage automatiques
    • 12.5.1 Les compteurs imbriqués et leur portée
    • 12.5.2 Les styles des compteurs
    • 12.5.3 Les compteurs dans les éléments avec 'display: none'
  • 12.6 Les marqueurs et les listes
    • 12.6.1 Les marqueurs : la propriété 'marker-offset'
    • 12.6.2 Les listes : Les propriétés 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'

Dans certains cas, les auteurs peuvent souhaiter que les agents utilisateurs puissent représenter un contenu qui n'apparaît pas dans l'arbre du document. Une liste numérotée en est une illustration familière, où l'auteur ne veut pas avoir à fournir la liste des numéros explicitement, préférant laisser l'agent utilisateur les générer automatiquement. De façon similaire, l'auteur peut vouloir que le mot "Illustration" soit inséré avant la légende d'une illustration, ou encore, "Chapitre 7" avant le titre du septième chapitre. Les agents utilisateurs, notamment pour des appareils audio ou braille, devraient être capables d'effectuer ce genre d'opération.

En CSS2, plusieurs mécanismes peuvent générer un contenu :

  • La propriété 'content' conjointement avec les pseudo-éléments :before et :after ;
  • Les propriétés auditives 'cue-before' et 'cue-after' (voir le chapitre sur les feuilles de style auditives). Quand on utilise la propriété 'content' en combinaison avec ces propriétés auditives, l'interprétation se fait dans cet ordre : :before, 'cue-before', ('pause-before'), le contenu de l'élément en question, ('pause-after'), 'cue-after' et :after ;
  • Les éléments dont la valeur de la propriété 'display' est 'list-item'.

On décrit plus loin le mécanisme associé à la propriété 'content'.

12.1 Les pseudo-éléments :before et :after

L'auteur spécifie le style et l'emplacement d'un contenu généré au moyen des pseudo-éléments :before et :after. Comme leurs noms l'indiquent, ceux-ci précisent l'emplacement du contenu avant ou après celui d'un élément de l'arbre du document. La propriété 'content', utilisée en conjonction avec eux, spécifie la nature de ce qui est inséré.

Exemple(s) :

Par exemple, cette règle insère la chaîne "Note : " avant le contenu de chacun des éléments P dont l'attribut "class" a la valeur "note" :

P.note:before { content: "Note : " }

Les objets de mise en forme (ex. les boîtes) générés par un élément comprennent également le contenu généré. Ainsi, en changeant la feuille de style précédente pour :

P.note:before { content: "Note : " }
P.note        { border: solid green }

ceci produirait une bordure verte en trait plein autour du paragraphe, y compris la chaîne rajoutée.

Les pseudo-éléments :before et :after héritent de chacune des propriétés, celles qui sont transmissibles, de l'élément de l'arbre du document auquel ceux-ci se rattachent.

Exemple(s) :

Par exemple, les règles suivantes insèrent un guillemet ouvrant avant chacun des éléments Q. Ce guillemet aura une couleur rouge et sa police sera la même que celle employée ailleurs dans ces éléments :

Q:before {
  content: open-quote;
  color: red
}

Dans les déclarations avec les pseudo-éléments :before ou :after, les propriétés non héritées prennent leur valeur initiale.

Exemple(s) :

Ainsi, dans l'exemple précédent, la valeur initiale de la propriété 'display' étant 'inline', le guillemet s'inscrit dans une boîte en-ligne (c.à.d. celle-ci se trouve sur la même ligne que le texte initial de l'élément). Dans celui qui suit, la propriété 'display' a la valeur explicite 'block', le texte en insertion s'inscrit dans une boîte de bloc :

BODY:after {
    content: "Fin";
    display: block;
    margin-top: 2em;
    text-align: center;
}

Noter qu'un agent utilisateur auditif synthétiserait le mot "Fin" après avoir rendu tout le contenu de l'élément BODY.

Les agents utilisateurs doivent ignorer les propriétés suivantes avec les pseudo-éléments :before et :after : les propriétés 'position', 'float', celles des listes et celles des tables.

Les pseudo-éléments :before et :after admettent certaines valeurs en conjonction avec la propriété 'display' :

  • Si le sujet du sélecteur est un élément de type bloc, les valeurs admises sont 'none', 'inline', 'block' et 'marker'. Pour toute autre valeur de la propriété 'display', le pseudo-élément se comporte comme si la valeur était 'block' ;
  • Si le sujet du sélecteur est un élément de type en-ligne, les valeurs admises sont 'none' et 'inline'. Pour toute autre valeur de la propriété 'display', le pseudo-élément se comporte comme si la valeur était 'inline'.

Remarque : D'autres valeurs pourraient être admises dans les versions ultérieures de CSS.

12.2 La propriété 'content'

'content'
Valeur : [ <chaîne> | <uri> | <compteur> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initiale : chaîne vide
S'applique à : ceux des éléments avec 'display : marker' et les pseudo-éléments :before et :after
Héritée : non
Pourcentage : sans objet
Médias : tous

Cette propriété est utilisée en conjonction avec les pseudo-éléments :before et :after pour générer un contenu dans un document. Ces pseudo-éléments admettent les valeurs suivantes pour la propriété 'display' :

  • Si le sujet du sélecteur est un élément de type bloc, les valeurs admises sont 'none', 'inline', 'block' et 'marker'. Pour toute autre valeur de la propriété 'display', le pseudo-élément se comporte comme si la valeur était 'block' ;
  • Si le sujet du sélecteur est un élément de type en-ligne, les valeurs admises sont 'none' et 'inline'. Pour toute autre valeur de la propriété 'display', le pseudo-élément se comporte comme si la valeur était 'inline'.

Les significations des valeurs sont :

<chaîne>
Un contenu de texte (voir le chapitre sur les chaînes) ;
<uri>
La valeur est un URI qui pointe sur une ressource externe. Si un agent utilisateur ne reconnaît pas cette ressource, cette dernière ne correspondant pas aux types de média que celui-ci reconnaît, alors il doit l'ignorer. Remarque : CSS2 ne propose pas de mécanismes pour modifier la taille de l'objet désigné, ou pour en fournir une description textuelle, comme les attributs "alt" ou "longdesc" pour les images en HTML. Ceci pourrait changer dans les versions ultérieures de CSS.
<compteur>
On peut spécifier des compteurs à l'aide de deux fonctions : 'counter()' ou 'counters()'. La première peut se présenter sous deux formes : 'counter(nom)' ou 'counter(nom, style)'. Le texte généré correspond à la valeur du compteur nommé à cet endroit de la structure de mise en forme, et son style, à celui indiqué (par défaut, c'est 'decimal'). La deuxième prend aussi deux formes : 'counters(nom, chaîne)' ou 'counters(nom, chaîne, style)'. Le texte généré correspond à la valeur de tous les compteurs, qui ont ce nom dans la structure de mise en forme. Les compteurs prennent le style indiqué (par défaut, 'decimal'). Voir le passage traitant des compteurs et du numérotage automatiques pour plus d'informations ;
open-quote et close-quote
Ces valeurs sont remplacées par les chaînes appropriées, celles-ci étant indiquées par la propriété 'quotes' ;
no-open-quote et no-close-quote
Rien n'est inséré (sinon la chaîne vide), mais le niveau d'imbrication des citations est incrémenté (ou décrémenté) ;
attr(X)
Cette fonction retourne, sous forme de chaîne, la valeur de l'attribut X du sujet du sélecteur. Cette chaîne n'est pas parcourue par l'interpréteur CSS. Au cas oû le sujet du sélecteur n'a pas d'attribut X, il est retourné une chaîne vide. La sensibilité à la casse du nom des attributs dépend du langage du document. Remarque : En CSS2, il n'est pas possible de se référer aux valeurs d'attribut d'autres éléments du sélecteur.

La propriété 'display' contrôle le placement du contenu dans une boîte de bloc, en-ligne ou de marqueur.

Les auteurs devraient placer les déclarations de la propriété 'content' dans des règles @media quand le contenu dépend du type du média. Par exemple, un texte littéral peut convenir à tous les types de médias, mais les images seulement aux groupes de médias visuel et bitmap, et les fichiers de sons seulement au groupe de média auditif.

Exemple(s) :

Cette règle fait jouer un fichier son à la fin d'une citation (voir le chapitre sur les feuilles de style auditives pour d'autres mécanismes) :

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

Exemple(s) :

La règle suivante insère le texte de l'attribut HTML "alt" avant l'image. Si l'image n'est pas affichée, le lecteur verra quand même ce texte :

IMG:before { content: attr(alt) }

Les auteurs peuvent produire des retours à la ligne dans le contenu généré en écrivant la séquence d'échappement "\A" dans l'une des chaînes après la propriété 'content'. Ceci insère un retour à la ligne forcé, semblable à l'élément BR en HTML. Voir les chapitres "Les chaînes" et "Les caractères et la casse" pour informations.

Exemple(s) :

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

Le contenu généré n'altère pas l'arbre du document. Et, en particulier, celui-ci n'est pas réintroduit dans le processeur du langage du document (par exemple pour y être reinterprété).

Remarque : Dans des versions ultérieures, la propriété 'content' pourrait accepter d'autres valeurs, qui lui permettrait de modifier le style de certaines parties du contenu généré, en CSS2, l'ensemble du contenu des pseudo-éléments :before et :after recevant le même style.

12.3 L'interaction de :before et :after avec les éléments ayant les valeurs 'compact' et 'run-in'

Les cas suivants peuvent survenir :

  1. Un élément 'run-in' ou 'compact' a un pseudo-élément :before de type en-ligne : le pseudo-élément est pris en compte au moment où la taille de la boîte de l'élément est calculée (pour 'compact'), puis est rendu dans la même boîte de bloc que l'élément ;
  2. Un élément 'run-in' ou 'compact' a un pseudo-élément :after de type en-ligne : même chose que pour le point précédent ;
  3. Un élément 'run-in' ou 'compact' a un pseudo-élément :before de type bloc : le pseudo-élément est mis en forme en tant que bloc au-dessus de l'élément et n'est pas considéré lors du calcul de la taille de l'élément (pour 'compact') ;
  4. Un élément 'run-in' ou 'compact' a un pseudo-élément :after de type bloc : l'élément et son pseudo-élément :after sont tous deux mis en forme en tant que boîtes de bloc. L'élément n'est pas formaté comme une boîte en-ligne à l'intérieur de son propre pseudo-élément :after ;
  5. L'élément qui suit un élément 'run-in' ou 'compact' a un pseudo-élément :before de type bloc : la mise en forme de l'élément 'run-in', ou 'compact', dépend de la boîte de bloc résultante du pseudo-élément :before ;
  6. L'élément qui suit un élément 'run-in' ou 'compact' a un pseudo-élément :before de type en-ligne : la mise en forme de l'élément 'run-in', ou 'compact', dépend de la valeur de la propriété 'display' de l'élément auquel le pseudo-élément :before est attaché.

Exemple(s) :

Voici un exemple de titre en enfilade [ndt. run-in] avec un pseudo-élément :after, suivi par un paragraphe avec un pseudo-élément :before. Les pseudo-éléments sont tous de type en-ligne (par défaut). Soit cette feuille de style :

H3 { display: run-in }
H3:after { content: " : " }
P:before { content: "... " }

quand on l'applique à ce document source :

<H3>Les Centaures</H3>
<P>ont des sabots
<P>ont une queue

Une mise en forme visuelle en serait :

Les Centaures : ... ont des sabots
... ont une queue

12.4 Les guillemets

En CSS2, les auteurs peuvent demander aux agents utilisateurs de représenter les marques de citation, en fonction du style et du contexte. La propriété 'quotes' spécifie des paires de guillemets pour chaque niveau d'imbrication des citations. C'est la propriété 'content' qui permet la mise en œuvre de ces marques, en les insérant avant ou après les citations.

12.4.1 Spécifier des guillemets avec la propriété 'quotes'

'quotes'
Valeur : [<chaîne> <chaîne>]+ | none | inherit
Initiale : propre à l'agent utilisateur
S'applique à : tous les éléments
Héritée : oui
Percentages: N/A
Médias : visuel

Cette propriété spécifie des guillemets, quel que soit le nombre de citations imbriquées. Les significations des valeurs sont :

none
Les valeurs 'open-quote' et 'close-quote' de la propriété 'content' ne produisent pas de guillemets ;
[<chaîne> <chaîne>]+
Les valeurs 'open-quote' et 'close-quote' de la propriété 'content' sont tirées de cette liste de paires de guillemets (ouvrants et fermants). La première paire (celle la plus à gauche) correspond au niveau de citation le plus extérieur, la deuxième paire, le premier niveau d'imbrication, etc. L'agent utilisateur doit appliquer la paire de guillemets appropriée en fonction du niveau d'imbrication.

Exemple(s) :

Par exemple, la feuille de style suivante :

/* Spécifie des paires de guillemets sur deux niveaux et pour deux langues */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Insè des guillemets avant et après le contenu d'un élément Q */
Q:before { content: open-quote }
Q:after  { content: close-quote }

celle-ci appliquée à cet extrait, en anglais :

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

un agent utilisateur pourrait le rendre ainsi :

"Quote me!"

alors que pour cet extrait-ci, en norvégien :

<HTML lang="no">
  <HEAD>
  <TITLE>Citations</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

l'agent utilisateur donnerait :

«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»

Remarque : Dans l'exemple précédent, bien que les guillemets désignés par la propriété 'quotes' se trouvent facilement sur un clavier, une typographie de meilleure qualité demanderait des caractères supplémentaires. Le tableau informatif ci-après donne une liste de quelques marques de citation issues de ISO 10646 :

Aspect approximatif | Code ISO 10646 (hexadécimal) | Description
" | 0022 | MARQUE DE CITATION [le guillemet double en ASCII]
' | 0027 | APOSTROPHE [le guillemet simple en ASCII]
< | 2039 | MARQUE DE CITATION CHEVRON SIMPLE GAUCHE
> | 203A | MARQUE DE CITATION CHEVRON SIMPLE DROIT
« | 00AB | MARQUE DE CITATION CHEVRON DOUBLE GAUCHE [guillemet français ouvrant]
» | 00BB | MARQUE DE CITATION CHEVRON DOUBLE DROIT [guillemet français fermant]
‘ | 2018 | GUILLEMET SIMPLE GAUCHE HAUT [guillemet anglais ouvrant simple, ou apostrophe typographique]
’ | 2019 | GUILLEMET SIMPLE DROIT HAUT [guillemet anglais fermant simple]
“ | 201C | GUILLEMET DOUBLE GAUCHE HAUT [guillemet anglais ouvrant double]
” | 201D | GUILLEMET DOUBLE DROIT HAUT [guillemet anglais fermant double]
„ | 201E | GUILLEMET DOUBLE BAS [guillemet double bas]

12.4.2 Insérer des guillemets avec la propriété 'content'

Les valeurs 'open-quote' et 'close-quote' de la propriété 'content' insèrent les guillemets aux endroits appropriés du document. L'une des chaînes issues des valeurs de la propriété 'quotes' se substituent à chaque survenue de 'open-quote', ou ' close-quote', selon le niveau d'imbrication.

La valeur 'open-quote' se rapporte au premier guillemet d'une paire donnée, celle de 'close-quote' au second guillemet. L'utilisation de telle ou telle paire de guillemet dépend de la profondeur d'imbrication de la citation : le nombre d'apparitions de 'open-quote' dans tout le texte généré avant la citation en question, moins le nombre d'apparitions de 'close-quote'. Pour une profondeur égale à 0, la première paire est retenue, pour une profondeur de 1, c'est la deuxième paire, etc. Si la profondeur est supérieure au nombre de paires, la dernière paire est réutilisée. Une valeur de 'close-quote' qui rendrait la profondeur négative est incorrecte et ignorée : la profondeur reste à 0 et aucun guillemet n'est rendu (bien que le reste de la valeur de la propriété 'content' soit quand même inséré).

Noter que cette profondeur de citation est indépendante de l'imbrication du document source ou de la structure de mise en forme.

Certains styles typographiques requièrent des guillemets ouvrants avant chacun des paragraphes si la citation s'étend sur ceux-ci, le dernier paragraphe se terminant avec un guillemet fermant. En CSS, on peut réaliser cet effet en insérant des guillemets fermants "fantômes". Le mot-clé 'no-close-quote' décrémente ainsi le niveau de citation, sans pour autant faire apparaître de guillemet fermant.

Exemple(s) :

Cette feuille de style place des guillemets ouvrants devant chaque paragraphe d'un élément BLOCKQUOTE, et un guillemet fermant à la fin du dernier :

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.dernier:after { content: close-quote }

Ceci s'appuyant sur le fait que le dernier paragraphe a la classe "dernier", car il n'existe pas de sélecteurs qui puissent correspondre au dernier enfant d'un élément.

De façon symétrique, le mot-clé 'no-open-quote', qui ne fait pas apparaître de guillemet ouvrant, incrémente la profondeur de citation d'une unité.

Remarque : Quand une citation est dans une langue différente de celle du texte qui la contient, on utilise habituellement les marques de citation de la langue de ce texte, et non pas celles de la citation en question.

Exemple(s) :

Par exemple, une citation en français dans un texte en anglais :

The device of the order of the garter is “Honni soit qui mal y pense”. [la devise de l'ordre de la Jarretière].
et ici, une citation en anglais dans un texte en français :
Il disait : « Il faut faire défiler la bande en “fast forward”. »

Cette feuille de style-ci va spécifier les valeurs de la propriété 'quotes' de manière à ce que les guillemets ouvrants et fermants fonctionnent correctement pour tous les éléments. Les règles s'appliquent aux documents de langue anglaise, française, ou bien ceux dans les deux langues. On associe une règle à chaque langue supplémentaire. Noter l'emploi du combinateur (">"), concernant les enfants de l'élément, pour faire correspondre les guillemets à la langue contextuelle :

[LANG|=fr] > *  { quotes: "«" "»" "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

On a tapé ici les caractères représentant les marques de citation anglaises dans une forme que la plupart des gens peuvent utiliser. Quand on peut les taper directement, il apparaissent ainsi :

[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }

12.5 Compteurs et numérotage automatiques

En CSS2, le numérotage automatique est régi par deux propriétés, 'counter-increment' et 'counter-reset'. Les compteurs définis par celles-ci sont employés par les fonctions counter() et counters() de la propriété 'content'.

'counter-reset'
Valeur : [ <identifiant> <entier>? ]+ | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : tous
'counter-increment'
Valeur : [ <identifiant> <entier>? ]+ | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : tous

La propriété 'counter-increment' accepte un ou plusieurs noms de compteurs (des identifiants), chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur de l'incrémentation du compteur à chaque fois que survient l'élément. L'incrémentation par défaut est d'une unité. Les entiers nuls ou négatifs sont admis.

La propriété 'counter-reset' contient aussi une liste de noms de compteurs, un ou plusieurs, chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur que prend un compteur à chaque fois que survient l'élément. Par défaut, celui-ci a une valeur nulle.

Quand la propriété 'counter-increment' se réfère à un compteur qui est hors de portée (voir plus loin) de la propriété 'counter-reset', le compteur est considéré avoir été mis à zéro par l'élément racine.

Exemple(s) :

Voici une manière de numéroter des chapitres et leurs sections, tel que "Chapitre 1", "1.1", "1.2", etc. :

H1:before {
    content: "Chapitre " counter(chapitre) ". ";
    counter-increment: chapitre;  /* Ajoute 1 au chapitre */
    counter-reset: section;      /* Remet la section à zéro */
}
H2:before {
    content: counter(chapitre) "." counter(section) " ";
    counter-increment: section;
}

Quand un élément incrémente, ou remet à zéro, un compteur, et dans le même temps, l'utilise (au travers de la propriété 'content' du pseudo-élément :before ou :after qui lui est attaché), le compteur n'est utilisé qu'après avoir été incrémenté, ou remis à zéro.

Quand un élément, à la fois, remet à zéro et incrémente un compteur, la remise à zéro intervient avant l'incrémentation.

La propriété 'counter-reset' suit les règles de cascade, ainsi la feuille de style :

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

celle-ci va seulement remettre à zéro le compteur 'imagenum'. Pour que les deux compteurs le soient, il faut les réunir :

H1 { counter-reset: section -1 imagenum 99 }

12.5.1 Les compteurs imbriqués et leur portée

Les compteurs sont "auto-imbriquants", dans le sens oû la réutilisation d'un compteur dans un élément enfant crée automatiquement une nouvelle instance de celui-ci. Ceci a son importance dans des cas comme les listes en HTML, où les éléments peuvent être imbriqués dans eux-mêmes à des profondeurs arbitraires. Il serait sinon impossible de définir des noms de compteurs uniques pour chaque niveau d'imbrication.

Exemple(s) :

Ainsi, ce qui suit suffit pour numéroter des items de liste imbriqués. Le résultat est très semblable à celui qui serait obtenu en appliquant 'display:list-item' et 'list-style:inside' sur l'élément LI :

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

L'auto-imbrication se base sur le principe que chaque élément, ayant une propriété 'counter-reset' pour un compteur X, crée un nouveau compteur X, dont la portée va s'étendre à l'élément en question, aux descendants de celui-ci, et à ceux des éléments précédents de même parenté et leurs descendants.

Dans l'exemple précédent, un élément OL va créer un compteur et tous les enfants de cet élément vont se référer à ce dernier.

Si on note par item[n] la neme instance du compteur "item", par "(" et ")" le début et la fin d'une portée, l'extrait HTML suivant utilisant ce compteur (et la feuille de style précédente associée à celui-ci :

<OL>               <!-- (met item[0] à 0          -->
  <LI>item         <!--  incrémente item[0] (= 1)   -->
  <LI>item         <!--  incrémente item[0] (= 2)   -->
    <OL>           <!--  (met item[1] à 0         -->
      <LI>item     <!--   incrémente item[1] (= 1)  -->
      <LI>item     <!--   incrémente item[1] (= 2)  -->
      <LI>item     <!--   incrémente item[1] (= 3)  -->
        <OL>       <!--   (met item[2] à 0        -->
          <LI>item <!--    incrémente item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (met item[3] à 0        -->
          <LI>     <!--    incrémente item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--   incrémente item[1] (= 4)  -->
    </OL>          <!--  )                         -->
  <LI>item         <!--  incrémente item[0] (= 3)   -->
  <LI>item         <!--  incrémente item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (remet item[4] à 0        -->
  <LI>item         <!--  incrémente item[4] (= 1)   -->
  <LI>item         <!--  incrémente item[4] (= 2)   -->
</OL>              <!-- )                          -->

La fonction 'counters()' génère une chaîne composée des valeurs de tous les compteurs de même nom, celles-ci séparées par une chaîne donnée.

Exemple(s) :

Cette feuille de style numérote les articles d'une liste imbriquée, tel que "1", "1.1", "1.1.1", etc. :

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2 Les styles des compteurs

Par défaut, les compteurs sont mis en forme avec des nombres décimaux, mais chacun des styles disponibles pour la propriété 'list-style-type' peuvent leur être appliqués.

Voici la notation correspondant au style par défaut :

counter(nom)

et celle correspondant à un style donné :

counter(nom, 'list-style-type')

Tous les styles sont admis, y compris 'disc', 'circle', 'square' et 'none'.

Exemple(s) :

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.5.3 Les compteurs dans les éléments avec 'display: none'

Un élément qui n'est pas affiché (sa propriété 'display' ayant la valeur 'none'), ne peut ni incrémenter un compteur ni le remettre à zéro.

Exemple(s) :

Dans cet exemple, les éléments H2 ayant une classe "secret" n'incrémente pas 'count2' :

H2.secret {counter-increment: count2; display: none}

Par contre, les éléments dont la valeur de la propriété 'visibility' est 'hidden', incrémentent les compteurs.

12.6 Les marqueurs et les listes

En CSS, la plupart des éléments de type bloc génèrent une boîte de bloc principale. Dans ce chapitre, nous allons voir comment deux mécanismes CSS agissent sur un élément pour le faire produire deux boîtes : une boîte de bloc principale (pour le contenu de l'élément) et une boîte de marqueur séparée (qui contient des décorations telles qu'une puce, une image ou un nombre). À la différence des contenus de :before et :after, la boîte de marqueur n'affecte pas l'emplacement de la boîte principale, quel que soit le schéma de positionnement.

Apparaissant avec CSS2, on appelle le plus général de ces deux mécanismes les marqueurs. L'autre mécanisme, plus limité, fait appel aux propriétés de liste issues de CSS1. Ces dernières permettent aux auteurs une mise en place rapide pour un grand nombre de scénarios courants où interviennent des listes ordonnées, ou non. Cependant, les auteurs peuvent avoir un contrôle précis du contenu et de l'emplacement des marqueurs. On peut utiliser ceux-ci avec des compteurs pour créer de nouvelles listes, pour numéroter les notes de marge et plus encore.

Voici, par exemple, comment on peut employer des marqueurs pour rajouter un point après chacun des numéros des items d'une liste. Soit ce document HTML et sa feuille de style :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Créer une liste avec des marqueurs</TITLE>
     <STYLE type="text/css">
      LI:before {
          display: marker;
          content: counter(compteur, lower-roman) ".";
          counter-increment: compteur;
      }
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Voici le premier item.
      <LI> Voici le deuxième item.
      <LI> Voici le troisième item.
    </OL>
  </BODY>
</HTML>

ceci devrait donner quelque chose comme :

   i. Voici le premier item.
  ii. Voici le deuxième item.
 iii. Voici le troisième item.

Avec des sélecteurs descendants et des sélecteurs d'enfants, il est possible de spécifier divers types de marqueurs en fonction de la profondeur de listes imbriquées.

12.6.1 Les marqueurs : la propriété 'marker-offset'

On crée un marqueur en spécifiant la valeur 'marker' à la propriété 'display' dans un pseudo-élément :before ou :after. Alors que les contenus de ces pseudo-éléments, ayant les valeurs 'block' et 'inline', font partie de la boîte principale générée par l'élément, un contenu avec la valeur 'marker' est mis en forme dans une boîte indépendante, en dehors de la boîte principale. Les boîtes des marqueurs s'inscrivent dans une seule ligne (c.à.d. dans une boîte de ligne), celles-ci ne sont pas aussi souples d'emploi que les flottants. Une boîte de marqueur n'est créée que si la propriété 'content' du pseudo-élément génère effectivement un contenu.

Les boîtes de marqueurs ont des espacements et des bordures, mais pas de marges.

Avec le pseudo-élément :before, la ligne de base de la boîte de marqueur sera alignée avec celle de la première boîte de ligne de la boîte principale. Si celle-ci ne contient pas de boîte de ligne, ou si celle-ci contient une boîte de bloc se trouvant au-dessus la première boîte de ligne, le bord externe haut de la boîte de marqueur sera aligné avec le bord externe haut de la boîte principale.

Avec le pseudo-élément :after, la ligne de base de la boîte de marqueur sera alignée avec celle de la dernière boîte de ligne de la boîte principale. Si celle-ci ne contient pas de boîte de ligne, ou si celle-ci contient une boîte de bloc se trouvant en-dessous de la dernière boîte de ligne, le bord externe bas de la boîte de marqueur sera aligné avec le bord externe bas de la boîte principale.

La hauteur d'une boîte de marqueur est donnée par la propriété 'line-height'. La boîte de marqueur d'un pseudo-élément :before (ou :after) entre dans le calcul de la hauteur de la première boîte de ligne (ou la dernière) de la boîte principale. Ainsi, les marqueurs sont alignés sur la première ligne, ou la dernière, du contenu d'un élément, bien que ceux-ci occupent des boîtes distinctes. Quand il n'y a pas de première boîte de ligne, ou de dernière, la boîte de marqueur établit elle-même sa propre boîte de ligne.

L'alignement vertical d'une boîte de marqueur dans sa boîte de ligne est donné par la propriété 'vertical-align'.

Si la valeur de la propriété 'width' est 'auto', la largeur du contenu de la boîte de marqueur correspond à celle du contenu, et, pour une autre valeur, à celle spécifiée dans la propriété 'width'. Quand la valeur spécifiée par 'width' est inférieure à celle de la largeur effective du contenu, c'est la propriété 'overflow' qui précise la manière du débordement. Les boîtes de marqueurs peuvent recouvrir leur boîte principale. Quand la valeur spécifiée par 'width' est supérieure à celle de la largeur effective du contenu, c'est la propriété 'text-align' qui détermine l'alignement horizontal du contenu de la boîte de marqueur.

La propriété 'marker-offset' spécifie le décalage horizontal entre une boîte de marqueur et la boîte principale à laquelle celle-ci est associée. Ce décalage correspond à la distance entre les bords de leurs bordures les plus proches. Remarque : Si un marqueur s'écoule à la droite d'un flottant dans un contexte de mise en forme de gauche à droite, la boîte principale s'écoulera le long du flanc droit du flottant, mais la boîte de marqueur apparaîtra à la gauche du flottant. Le bord de la bordure gauche de la boîte principale venant contre le bord gauche du flottant (voir la description des flottants), et les boîtes des marqueurs se trouvant en dehors du bord de la bordure de leur boîte principale, le marqueur se trouvera ainsi à gauche du flottant. De la même façon et inversement, dans un contexte de mise en forme de droite à gauche et pour un marqueur s'écoulant à la gauche d'un flottant.

Quand la propriété 'display' a la valeur 'marker' pour le contenu d'un élément, celui-ci ayant une valeur 'display: list-item', alors c'est une boîte de marqueur générée par le pseudo-élément :before qui remplace le marqueur normal de l'item de liste.

Dans l'exemple, le contenu est centré dans une boîte de marqueur de largeur fixe. Soit le document :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Alignement du contenu dans une boîte de marqueur</TITLE>
      <STYLE type="text/css">
           LI:before {
               display: marker;
               content: "(" counter(compteur) ")";
               counter-increment: compteur;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> Voici l'item numéro 1.
       <LI> Voici l'item numéro 2.
       <LI> Voici l'item numéro 3.
     </OL>
   </BODY>
 </HTML>

celui-ci pourrait être rendu par :

  (1)    Voici l'item
         numéro 1.
  (2)    Voici l'item
         numéro 2.
  (3)    Voici l'item
         numéro 3.

Cet exemple-ci crée des marqueurs avant et après les items d'une liste :

Soit le document :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Des marqueurs avant et après les items d'une liste</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before {
             display: marker;
          content: url("smiley.gif");
         LI:after {
          display: marker;
             content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>le premier item vient d'abord
      <LI>le second item vient ensuite
    </UL>
  </BODY>
</HTML>

celui-ci pourrait être rendu ainsi (on utilise une représentation en caractères ASCII à la place des images) :

  :-) le premier item
      vient d'abord    :-(
  :-) le second item
      vient ensuite    :-(

L'exemple suivant utilise des marqueurs pour numéroter des notes (de paragraphes).

Soit le document :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Des marqueurs pour numéroter des notes</TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         {
            display: marker;
          content: url("note.gif")
                       "Note " counter(compteur-de-note) " :";
              counter-increment: compteur-de-note;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Voici le premier paragraphe de ce document.</P>
    <P CLASS="Note">Maintenant, un paragraphe très court.</P>
    <P>Et le paragraphe final.</P>
  </BODY>
</HTML>

celui-ci pourrait être rendu ainsi :

            Voici le premier paragraphe
            de ce document.

  Note 1 :  Maintenant, un paragraphe
            très court.

            Et le paragraphe final.
'marker-offset'
Valeur : <longueur> | auto | inherit
Initiale : auto
S'applique à : ceux des éléments dont la valeur de la propriété 'display' est 'marker'
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété spécifie la distance entre les bords des bordures les plus proche d'une boîte de marqueur et la boîte principale qui lui est associée. Ce décalage peut être défini par l'utilisateur (<longueur>) ou bien par l'agent utilisateur (pour une valeur 'auto'). Les valeurs peuvent être négatives, mais leur interprétation peut dépendre de l'implémentation.

L'exemple suivant montre comment utiliser les marqueurs pour ajouter un point après chaque item numéroté d'une liste. Soit ce document HTML et sa feuille de style :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Exemple 5 avec les marqueurs</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Fait de la place pour les compteurs */
           LI:before {
               display: marker;
               marker-offset: 3em;
               content: counter(compteur, lower-roman) ".";
               counter-increment: compteur;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <P> Voici le long paragraphe qui précède...
     <OL>
       <LI> Le premier item.
       <LI> Le deuxième item.
       <LI> Le troisième item.
     </OL>
     <P> Et le long paragraphe qui suit...
   </BODY>
 </HTML>

ceci devrait donner quelque chose comme :

        Voici le long paragraphe
        qui précède...

   i.   Le premier item.
  ii.   Le deuxième item.
 iii.   Le troisième item.

        Et le long paragraphe
        qui suit...

12.6.2 Les listes : les propriétés 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'

Les propriétés de liste permettent une mise en forme limitée des listes. Tout comme les marqueurs, aux champs d'action plus étendus, un élément dont la propriété 'display' a la valeur 'list-item' génère une boîte principale pour son contenu ainsi qu'une boîte de marqueur facultative. Les propriétés de liste permettent de préciser le type (image, glyphe ou nombre) et la position d'une boîte de marqueur par rapport à la boîte principale (à l'extérieur, ou à l'intérieur avant le contenu). Par contre, celles-ci ne permettent pas de spécifier un style distinct (de couleur, de police, d'alignement, etc.) pour le marqueur de liste ou la position de celui-ci par rapport à la boîte principale.

De plus, si on utilise un marqueur M (créé par 'display: marker') avec un item de liste créé par ces propriétés de liste, le marqueur M remplace le marqueur normal d'item de liste.

En employant les propriétés de liste, les propriétés d'arrière-plan ne s'appliquent qu'à la boîte principale, la boîte de marqueur en dehors restant transparente. Les marqueurs autorisent un plus grand contrôle sur le style d'une boîte de marqueur.

'list-style-type'
Valeur : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
Initiale : disc
S'applique à : ceux des éléments dont la valeur de la propriété 'display' est 'list-item'
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété spécifie l'aspect du marqueur d'item de liste, quand la propriété 'list-style-image' a la valeur 'none' ou quand l'image sur laquelle pointe l'URI n'est pas disponible. La valeur 'none' spécifiant l'absence de marqueur, trois types de marqueurs existent autrement : à partir de glyphes, de systèmes de numérotation et de systèmes alphabétiques. Remarque : Les listes numérotées sont plus accessibles, la navigation à l'intérieur de celles-ci étant plus facile.

Les valeurs de glyphes sont disc, circle et square. Leur rendu exact dépend de l'agent utilisateur.

Les valeurs pour les systèmes de numérotation sont :

decimal
Des nombres décimaux, commençant à partir de 1 ;
decimal-leading-zero
Des nombres décimaux, flanqués d'un zéro initial (ex. 01, 02, 03, ..., 98, 99) ;
lower-roman
Des chiffres romains minuscules (i, ii, iii, iv, v, etc.) ;
upper-roman
Des chiffres romains majuscules (I, II, III, IV, V, etc.) ;
hebrew
Numérotation en hébreu traditionnel (Alef, Bet, ... Tet Vav, Tet Zayin, ... Yod Tet, Kaf ...) ;
georgian
Numérotation en géorgien traditionnel (an, ban, gan, ..., he, tan, in, in-an, ...) ;
armenian
Numérotation en arménien traditionnel ;
cjk-ideographic
Des nombres idéographiques pleins ;
hiragana
a, i, u, e, o, ka, ki, ... ;
katakana
A, I, U, E, O, KA, KI, ... ;
hiragana-iroha
i, ro, ha, ni, ho, he, to, ... ;
katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...

Quand un agent utilisateur ne reconnaît pas un système de numérotation, celui-ci devrait se rabattre sur 'decimal'.

Remarque : Cette spécification ne précise pas de mécanisme exact pour chacun des systèmes de numérotation (ex. comment calculer les chiffres romains). Une note ultérieure du W3C pourrait apporter des éclaircissements sur ceux-ci.

Les valeurs pour les systèmes alphabétiques sont :

lower-latin or lower-alpha
Des lettres ASCII minuscules (a, b, c, ..., z) ;
upper-latin or upper-alpha
Des lettres ASCII majuscules (A, B, C, ..., Z) ;
lower-greek
Des lettres greques classiques alpha, beta, gamma, ... (έ, ή, ί, ...).

Cette spécification ne définit pas comment se comportent les systèmes alphabétiques à la fin de l'alphabet. Par exemple, au-delà de 26 items de liste, le rendu pour 'lower-latin' est indéfini. C'est pourquoi, pour de longues listes, on recommande de choisir des nombres véritables.

Soit le document HTML suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Numérotation en chiffres romains minuscules</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Le premier item.
      <LI> Le deuxième item.
      <LI> Le troisième item.
    </OL>
  </BODY>
</HTML>

celui-ci pourrait apparaître ainsi :

  i Le premier item.
 ii Le deuxième item.
iii Le troisième item.

Noter que l'alignement des marqueurs de liste (ici, en justification à droite) dépend de l'agent utilisateur.

Remarque : Les versions ultérieures de CSS pourraient apporter d'autres styles de numérotation.

'list-style-image'
Valeur : <uri> | none | inherit
Initiale : none
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list-item'
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété désigne l'image qui sera employée comme marqueur d'item de liste. Quand l'image est disponible, elle remplace le marqueur produit par la propriété 'list-style-type'.

Exemple(s) :

Cet exemple place l'image "ellipse.png" comme marqueur au début de chacun des items de liste :

UL { list-style-image: url("http://png.com/ellipse.png") }
'list-style-position'
Valeur : inside | outside | inherit
Initiale : outside
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list-item'
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété spécifie l'emplacement de la boîte de marqueur dans la boîte de bloc principale. Les significations des valeurs sont :

outside
La boîte de marqueur est placée en dehors de la boîte de bloc principale. Remarque : CSS1 ne donnait pas l'emplacement exact de la boîte de marqueur, cette ambiguïté reste en CSS2 pour des raisons de compatibilité. Pour un contrôle plus fin de la position des boîtes des marqueurs, utiliser 'marker' ;
inside
La boîte de marqueur devient la première boîte en-ligne de la boîte de bloc principale, le contenu de l'élément s'écoulant après celle-ci.

Par exemple :

<HTML>
  <HEAD>
    <TITLE>Comparaison entre les emplacements 'inside' et 'outside'</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>le premier item vient d'abord
      <LI>le second item vient ensuite
    </UL>

    <UL class="compact">
      <LI>le premier item vient d'abord
      <LI>le second item vient ensuite
    </UL>
  </BODY>
</HTML>

Ceci pourrait être rendu ainsi :

Différence entre une position de style de liste en dedans et en dehors. [D]

Dans un texte lu de droite à gauche, les marqueurs auraient été placés au côté droit de la boîte.

'list-style'
Valeur : [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
Initiale : non définie pour les propriétés raccourcies
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list-item'
Héritée : oui
Pourcentage : sans objet
Médias : visuel

La propriété raccourcie 'list-style' sert à réunir les trois propriétés 'list-style-type', 'list-style-image' et 'list-style-position' dans la feuille de style.

Exemple(s) :

UL { list-style: upper-roman inside }  /* Pour tous les éléments UL */
UL LI > UL { list-style: circle outside } /* Pour tous les éléments UL qui sont enfants d'un élément LI */

Bien qu'on puisse spécifier directement l'information de 'list-style' aux éléments d'item de liste (ex. l'élément LI en HTML), ceci requiert un soin particulier. Les deux règles suivantes semblent identiques, cependant la première comporte un sélecteur descendant et la seconde, un sélecteur d'enfant (plus spécifique) :

OL.alpha LI   { list-style: lower-alpha } /* Tous les éléments LI descendant d'un élément OL */
OL.alpha > LI { list-style: lower-alpha } /* Tous les éléments LI enfant d'un élément OL */

Les auteurs, employant seulement le sélecteur descendant, pourraient ne pas obtenir le résultat escompté. Considérons ces règles :

<HTML>
  <HEAD>
    <TITLE>ATTENTION : Résultats inattendus, du fait de la cascade</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>niveau 1
      <UL>
         <LI>niveau 2
      </UL>
    </OL>
  </BODY>
</HTML>

L'aspect souhaité aurait été d'avoir les items de liste du niveau 1 avec des marqueurs 'lower-alpha' et les items de liste du niveau 2 avec des marqueurs 'disc'. Cependant, l'ordre de la cascade va faire que la première (qui inclut une information de classe spécifique) masquera la seconde. L'emploi d'un sélecteur d'enfant dans la règle suivante amène au résultat attendu :

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

Une autre solution aurait été de spécifier l'information de 'list-style' seulement aux éléments de type de liste :

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

Les éléments LI vont hériter des valeurs de la propriété 'list-style' au travers des éléments OL et UL. On recommande cette manière de faire pour spécifier le style des listes.

Exemple(s) :

On peut combiner une valeur d'URI avec chacune des autres valeurs, comme :

UL { list-style: url("http://png.com/ellipse.png") disc }

Dans cet exemple, la valeur 'disc' sera employée en cas d'indisponibilité de l'image.

Quand on spécifie la valeur 'none' pour la propriété 'list-style', les propriétés 'list-style-type' et 'list-style-image' prennent toutes deux cette même valeur 'none' :

UL { list-style: none }

Aucun marqueur d'item de liste n'est affichée.


Les médias paginés

13 Les médias paginés

  • 13.1 Introduction aux médias paginés
  • 13.2 Les boîtes de page : la règle @page
    • 13.2.1 Les marges de la page
    • 13.2.2 La taille de la page : la propriété 'size'
      • Le rendu d'une boîte de page qui ne tient pas sur une feuille cible
      • Le positionnement de la boîte de la page sur la feuille
    • 13.2.3 Les repères de coupe : la propriété 'marks'
    • 13.2.4 Les pages de gauche, de droite et de couverture
    • 13.2.5 Le contenu en dehors de la boîte de page
  • 13.3 Les sauts de page
    • 13.3.1 Les propriétés de coupure avant et après : 'page-break-before', 'page-break-after', 'page-break-inside'
    • 13.3.2 L'utilisation des pages nommées : 'page'
    • 13.3.3 Les coupures à l'intérieur des éléments : 'orphans', 'widows'
    • 13.3.4 Les sauts de page permis
    • 13.3.5 Les sauts de page forcés
    • 13.3.6 Les sauts de page "au mieux"
  • 13.4 La cascade dans un contexte de page

13.1 Introduction aux médias paginés

Les médias paginés (ex. les feuilles de papier, les transparents, les pages qui ne s'affichent pas sur un moniteur, etc.) diffèrent des médias continus en ceci que le contenu du document est découpé à discrétion en une ou plusieurs pages. Pour la gestion de ce découpage de la page, CSS2 étend le modèle de mise en forme visuel des manières suivantes :

  1. La boîte de page enrichit le modèle de la boîte et donne aux auteurs la possibilité de spécifier la taille de la page, ses marges, etc. ;
  2. Le modèle de la page enrichit le modèle de mise en forme visuel et prend en compte les sauts de page.

Le modèle de la page de CSS2 définit la mise en forme d'un document dans une aire rectangulaire, la boîte de page, celle-ci ayant une largeur et une hauteur limitées. La boîte de page ne correspond pas forcément à la feuille définitive sur laquelle le document sera rendu (une feuille de papier, un transparent, un écran, etc.). Le modèle de la page spécifiant la mise en forme dans la boîte de page, le transfert de cette dernière vers la feuille est du ressort de l'agent utilisateur. Quelques modalités de transfert :

  • D'une boîte de page vers une feuille (ex. pour une impression en recto) ;
  • De deux boîtes de page vers les deux faces d'une même feuille (ex. pour une impression en recto verso) ;
  • D'un (petit) nombre N de boîtes de page vers une seule feuille (appelé "vignette") ;
  • D'une (grande) boîte de page vers des feuilles plus petites, la page étant répartie sur plusieurs d'entre elles (appelé "mosaïque") ;
  • Pour la création de signatures. Une signature est un ensemble de pages imprimées sur une feuille, qui, une fois pliée et massicotée comme pour un livre, apparaissent dans le bon ordre ;
  • Vers l'impression d'un document en plusieurs formats ;
  • Vers un fichier.

Bien que CSS2 ne définisse pas la manière dont les agents utilisateurs doivent transférer les boîtes de page vers leurs feuilles cibles, celui-ci inclut certains mécanismes pour leur signifier la dimension et l'orientation de celles-ci.

13.2 Les boîtes de page : la règle @page

La boîte de page est une aire rectangulaire comportant deux parties :

  • L'aire de la page. Celle-ci contient les boîtes qui y sont disposées. Les bords de l'aire de la page font office de bloc conteneur initial pour la mise en page survenant entre les sauts de page ;
  • L'aire de marge, qui entoure l'aire de la page.

Remarque : En CSS2, les propriétés de bordure et d'espacement ne s'appliquent pas aux pages, ceci pourrait être le cas ultérieurement.

Les auteurs spécifient les dimensions, l'orientation, les marges, etc. d'une boîte de page au travers d'une règle @page. Une telle règle consiste en le mot-clé "@page", qui est un sélecteur de page (suivi, en option, par une pseudo-classe de page, sans blanc intermédiaire), et d'un bloc de déclaration (qu'on dit être dans le contexte de la page).

Le sélecteur de page précise lesquelles des pages sont concernées par les déclarations. En CSS2, les sélecteurs de page peuvent désigner chacune des pages de gauche, chacune des pages de droite ou une page avec un nom donné.

La propriété 'size' donne les dimensions de la boîte de page, l'aire de marge étant déduite.

Exemple(s) :

Par exemple, cette règle @page produit une taille de boîte de page de 8.5 x 11 pouces et une marge de '2cm' sur chacun des côtés entre le bord de la boîte de page et l'aire de la page :

@page { size: 8.5in 11in; margin: 2cm }
La propriété 'marks', dans une règle @page, spécifie les repères de coupe et d'alignement pour la boîte de page.

13.2.1 Les marges de la page

Les propriétés de marge ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' et 'margin') s'appliquent dans le contexte de la page. L'illustration suivante montre les relations entre la feuille, la boîte de page et les marges de la page :

Illustration of sheet, page box, margin, and page area. [D]

Les valeurs calculées des marges de la boîte, en haut ou en bas de la page, sont égales à '0'.

La notion de police étant étrangère au contexte de la page, ainsi les unités 'em' et 'ex' ne sont pas admises. Les valeurs en pourcentage des propriétés de marge se rapportent aux dimensions de la boîte de la page, à la largeur de celle-ci pour les marges gauche et droite, à la hauteur, pour les marges du haut et du bas. Les autres unités définies respectivement à leurs propriétés sont admises.

Des valeurs de marge négatives (pour la boîte de la page, ou pour certains éléments) ou un positionnement absolu peuvent placer un contenu en dehors de la boîte de la page, aussi celui-ci peut être "coupé" (par l'agent utilisateur, par l'imprimante ou, finalement, par le massicot).

13.2.2 La taille de la page : la propriété 'size'

'size'
Valeur : <longueur>{1,2} | auto | portrait | landscape | inherit
Initiale : auto
S'applique à : un contexte de page
Héritée : sans objet
Pourcentage : sans objet
Médias : visuel, paginé

Cette propriété spécifie la taille et l'orientation d'une boîte de page.

La taille d'une boîte de page peut être soit "absolue" (de taille fixe), soit "relative" (de taille variable, celle-ci s'adaptant aux tailles des feuilles disponibles). Les boîtes de page relatives permettent aux agents utilisateurs une mise à l'échelle du document pour une utilisation optimale de la taille de la cible.

La propriété 'size' admet trois valeurs capables de créer une boîte de page relative :

auto
La boîte de la page se conforme à la taille et l'orientation de la feuille cible ;
landscape
Surclasse l'orientation de la feuille cible. La boîte de la page a la même taille que celle de la cible, les côtés de la boîte les plus longs sont horizontaux ;
portrait
Surclasse l'orientation de la feuille cible. La boîte de la page a la même taille que celle de la cible, les côtés de la boîte les plus courts sont horizontaux.

Exemple(s) :

Dans cet exemple, les bords externes de la boîte de la page s'aligneront sur ceux de la cible. La valeur en pourcentage de la propriété 'margin' se rapporte à la taille de la cible, ainsi, quand la feuille cible a pour dimensions 21.0cm x 29.7cm (format A4), les marges seront 2.10cm (horizontalement) et 2.97cm (verticalement) :

@page {
  size: auto;   /* auto est la valeur initiale */
  margin: 10%;
}

Les valeurs de longueur de la propriété 'size' créent une boîte de page de taille absolue. Quand on ne spécifie qu'une seule valeur, la largeur et la hauteur de la boîte de la page sont les mêmes (c.à.d. une boîte carrée). La boîte de la page étant le bloc conteneur initial, la propriété 'size' n'admet pas de valeurs en pourcentage.

Exemple(s) :

Par exemple :

@page {
  size: 8.5in 11in;  /* width height */
}

Ici, la boîte de la page a une largeur de 8.5in et une hauteur de 11in. Les dimensions requises pour la feuille cible sont 8.5 x 11 pouces, au moins.

Les agents utilisateurs peuvent autoriser un certain contrôle du transfert de la page vers la feuille (c.à.d. la rotation d'une boîte de page absolue en vue de son impression).

Le rendu d'une boîte de page qui ne tient pas sur une feuille cible

Quand la boîte de la page ne tient pas dans la feuille cible, l'agent utilisateur peut exercer :

  • Une rotation de la boîte de 90° si cela permet de la faire tenir dans la feuille ;
  • Une diminution de l'échelle de la page pour la faire tenir dans la feuille.

L'agent utilisateur devrait prévenir l'utilisateur avant d'effectuer ces opérations.

Le positionnement de la boîte de la page sur la feuille

Quand la boîte de la page est plus petite que la feuille cible, l'agent utilisateur est libre de la placer n'importe où dans la feuille. Cependant, on recommande que celle-ci soit centrée dans la feuille, ce qui permet un certain alignement sur une feuille au recto et au verso, et aussi d'éviter d'éventuelles pertes d'information quand l'impression a lieu trop près du bord de la feuille.

13.2.3 Les repères de coupe : la propriété 'marks'

'marks'
Valeur : [ crop || cross ] | none | inherit
Initiale : none
S'applique à : un contexte de page
Héritée : sans objet
Pourcentage : sans objet
Médias : visuel, paginé

Pour les impressions de qualité, on ajoute souvent des repères en dehors de la boîte de la page. Cette propriété indique si des repères de coupe, ou d'alignement, ou les deux en même temps, doivent apparaître, ou non, en dehors des limites de la boîte de la page.

Les repères de coupe indiquent l'endroit où la page doit être coupée. Les repères d'alignement (ou aussi, de cadrage ou d'intersection) sont employés pour aligner les feuilles.

Ces repères ne sont visibles que pour des boîtes de page absolues (voir la propriété 'size'). Dans le cas des boîtes relatives, la boîte de page s'aligne sur cible, les repères se trouvant hors de la zone d'impression.

La taille, le style et la position des repères dépendent de l'agent utilisateur.

13.2.4 Les pages de gauche, de droite et de couverture

Pour une impression en recto verso, les boîtes de page de gauche et de droite devraient apparaître différemment. Ceci peut être réalisé à l'aide de deux pseudo-classes CSS, pouvant être définies dans le contexte de la page.

Les agents utilisateurs rangent automatiquement chacune des pages selon les pseudo-classes :left ou :right.

Exemple(s) :

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

Quand on donne des déclarations distinctes aux pages de gauche et de droite, l'agent utilisateur doit respecter celles-ci, même si celui-ci n'effectue pas le transfert des boîtes de page selon les feuilles de gauche et celles de droite (ex. l'imprimante n'imprime qu'en recto).

Les auteurs peuvent également spécifier un style particulier à la première page d'un document avec la pseudo-classe :first :

Exemple(s) :

@page { margin: 2cm } /* Toutes les marges font 2cm */

@page :first {
  margin-top: 10cm    /* La marge du haut de la première page fait 10cm */
}

La détermination du côté de la première page d'un document, page de gauche ou de droite, dépend du sens d'écriture principal du document, ceci n'est pas traité dans la présente spécification. Cependant, pour forcer la première page à gauche, ou à droite, les auteurs peuvent insérer un saut de page avant la première boîte générée (ex. en HTML, le faire pour élément BODY).

Les propriétés spécifiées dans une règle @page, avec une pseudo-classe :left ou :right, surclassent celles dans une règle @page qui en est dépourvue. Et celles dans une règle @page, avec une pseudo-classe :first, surclassent à leur tour celles avec une pseudo-classe :left ou :right.

Remarque : Le fait d'ajouter des déclarations aux pseudo-classes :left ou :right ne présage en rien d'une sortie d'impression du document en recto ou en recto verso (ceci étant en dehors de l'objet de cette spécification).

Remarque : Des versions ultérieures de CSS pourraient introduire d'autres pseudo-classes de page.

13.2.5 Le contenu en dehors de la boîte de page

Lors de la mise en forme d'un contenu dans le modèle de la page, une partie de celui-ci peut se trouver en dehors de la boîte de la page. Par exemple, un élément dont la propriété 'white-space' a la valeur 'pre' peut générer une boîte plus grande que celle de la page. De même, les boîtes en position absolue peuvent finir à des emplacements "inattendus". Par exemple, des images peuvent être placées au bord de la boîte de la page, ou encore 100 000 pouces en dessous de celle-ci.

La définition de la mise en forme pour de tels éléments n'est pas abordée dans cette spécification. Cependant, dans ces cas, on recommande, de la part des auteurs et des agents utilisateurs, de suivre les principes généraux suivants :

  • Le contenu devrait être placé légèrement au-delà des limites de la boîte de la page pour permettre aux pages de "fuir" ;
  • Les agents utilisateurs devraient éviter de générer un grand nombre de boîtes de page vides pour respecter le positionnement des éléments (ex. il n'est pas souhaitable de produire 100 pages blanches à l'impression). Noter, cependant, qu'il peut être nécessaire d'en générer un petit nombre pour honorer les valeurs 'left' et 'right' des propriétés 'page-break-before' et 'page-break-after' ;
  • Les auteurs ne devraient pas positionner d'éléments à des emplacements embarrassants, juste pour éviter leur rendu. Il est préférable :
    • Pour supprimer complètement la génération d'une boîte, de donner la valeur 'none' à la propriété 'display' ;
    • Pour rendre une boîte invisible, d'employer la propriété 'visibility'.
  • Les agents utilisateurs peuvent gérer les boîtes positionnées en dehors de la boîte de la page de plusieurs façons, dont le rejet de celles-ci, ou la création pour celles-ci d'une autre boîte de page à la fin du document.

13.3 Les sauts de page

Cette partie traite de la mise en forme des pages en CSS2. Cinq propriétés précisent aux agents utilisateurs les endroits où les sauts de page devraient intervenir et les pages, de gauche ou de droite, les contenus restants doivent finir. Chaque saut de page arrête la mise en forme dans une boîte de page donnée, et entraîne la mise en forme du reste de l'arbre du document dans une nouvelle boîte de page.

13.3.1 Les propriétés de coupure avant et après : 'page-break-before', 'page-break-after', 'page-break-inside'

'page-break-before'
Valeur : auto | always | avoid | left | right | inherit
Initiale : auto
S'applique à : ceux des éléments de type bloc
Héritée : non
Pourcentage : sans objet
Médias : visuel, paginé
'page-break-after'
Valeur : auto | always | avoid | left | right | inherit
Initiale : auto
S'applique à : ceux des éléments de type bloc
Héritée : non
Pourcentage : sans objet
Médias : visuel, paginé
'page-break-inside'
Valeur : avoid | auto | inherit
Initiale : auto
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : sans objet
Pourcentage : visuel, paginé

Les significations des valeurs sont :

auto
Ne force ni n'interdit un saut de page avant (ou après, ou à l'intérieur de) la boîte générée ;
always
Force toujours un saut de page avant (ou après) la boîte générée ;
avoid
Évite un saut de page avant (ou après, ou à l'intérieur de) la boîte générée ;
left
Force un saut de page, ou deux, avant (ou après) la boîte générée, de manière à ce que la page suivante soit mise en forme comme une page de gauche ;
right
Force un saut de page, ou deux, avant (ou après) la boîte générée, de manière à ce que la page suivante soit mise en forme comme une page de droite.

L'endroit potentiel d'un saut de page est typiquement influencé par la propriété 'page-break-inside' de l'élément parent, par la propriété 'page-break-after' de l'élément précédent et la propriété 'page-break-before' de l'élément suivant. Quand celles-ci ont une valeur autre que 'auto', les valeurs 'always', 'left' et 'right' ont préséance sur 'avoid'. Voir la partie traitant des sauts de page permis pour les règles précises régissant le forçage et la suppression des sauts de page.

13.3.2 L'utilisation des pages nommées : 'page'

'page'
Valeur : <identifiant> | auto
Initiale : auto
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : sans objet
Médias : visuel, paginés

La propriété 'page' peut être employée pour désigner un type particulier de page où devrait s'afficher un élément donné.

Exemple(s) :

Dans cet exemple, toutes les tables seront placées, avec une orientation paysage [ndt. landscape], dans une page de droite (celle-ci est nommée "retournee") :

@page retournee {size: landscape}
TABLE {page: retournee; page-break-before: right}

La propriété 'page' a le fonctionnement suivant : quand une boîte de bloc, avec un contenu en-ligne, a une propriété 'page' dont la valeur est différente de celle de la boîte précédente, également de type bloc avec un contenu en-ligne, alors un ou deux sauts de page sont insérés entre ces deux boîtes, et les boîtes survenant après le saut sont rendues dans une boîte de page avec ce nom. Voir "Les sauts de page forcés" plus loin.

Exemple(s) :

Dans cet exemple, les deux tables sont affichées avec une orientation paysage (sur la même page en effet, si celle-ci peut les contenir), la page nommée "etroite" n'étant pas du tout employée, bien que celle-ci ait été appliquée à l'élément DIV :

@page etroite {size: 9cm 18cm}
@page retournee {size: landscape}
DIV {page: etroite}
TABLE {page: retournee}
le document sur lequel agit la feuille de style :
<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>

13.3.3 Les coupures à l'intérieur des éléments : 'orphans', 'widows'

'orphans'
Valeur : <entier> | inherit
Initiale : 2
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : sans objet
Médias : visuel, paginé
'widows'
Valeur : <entier> | inherit
Initiale : 2
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : sans objet
Médias : visuel, paginé

La propriété 'orphans' spécifie le nombre minimum de lignes d'un paragraphe devant rester en bas d'une page, la propriété 'widows' le nombre minimum de lignes d'un paragraphe devant rester en haut d'une page. Voir des exemples plus loin sur la manière de les employer pour le contrôle des sauts de page.

Pour des informations au sujet de la mise en forme des paragraphes, consulter la partie traitant des boîtes de ligne.

13.3.4 Les sauts de page permis

Dans un flux normal, les sauts de page peuvent survenir aux endroits suivants :

  1. La marge verticale entre deux boîtes de bloc. Dans ce cas, les propriétés concernées 'margin-top' et 'margin-bottom' prennent la valeur calculée '0' ;
  2. Entres des boîtes de ligne dans une boîte de bloc.

Les règles suivantes régissent ces sauts :

  • Règle A : Un saut pour (1) n'est permis que si les propriétés 'page-break-after' et 'page-break-before' de tous les éléments, qui génèrent des boîtes se rencontrant à cette marge, le permettent, c'est-à-dire quand l'un au moins d'entre eux a la valeur 'always', 'left' ou 'right', ou quand tous ont la valeur 'auto' ;
  • Règle B : Cependant, si tous ont la valeur 'auto' et leur ancêtre commun le plus proche a une propriété 'page-break-inside' dont la valeur est 'avoid', le saut n'est pas permise ;
  • Règle C : Un saut pour (2) n'est permis que si le nombre de boîtes de ligne, entre ce saut et le début de la boîte de bloc les contenant, était supérieur ou égal à la valeur de la propriété 'orphans', et si celui entre ce saut et la fin de la boîte était supérieur ou égal à la valeur de la propriété 'widows' ;
  • Règle D : De plus, un saut pour (2) n'est permis que si la valeur de la propriété 'page-break-inside' est 'auto'.

Si ceci n'apportait pas assez de points de sauts pour empêcher le contenu de déborder des boîtes de page, alors on abandonne les règles B et D pour en obtenir plus.

Et si cela ne suffisait toujours pas, alors on abandonne aussi les règles A et C, pour trouver encore d'autres points de sauts.

Les sauts de page ne peuvent survenir dans des boîtes en position absolue.

13.3.5 Les sauts de page forcés

Un saut de page doit intervenir en (1) si, parmi les propriétés 'page-break-after' et 'page-break-before' de tous les éléments, qui génèrent une boîte se rencontrant à cette marge, il y en a au moins une qui a la valeur 'always', 'left' ou 'right'.

Un saut de page doit aussi intervenir en (1) si les valeurs des propriétés 'page' de la dernière boîte de ligne, avant cette marge, et la première, après celle-ci, sont différentes.

13.3.6 Les sauts de page "au mieux"

CSS2 ne définit pas lequel parmi les sauts de page permis doit être employé, n'interdit pas, à un agent utilisateur, d'effectuer un saut à l'un ou l'autre des endroits possibles, ne l'oblige pas non plus à effectuer des sauts. Mais CSS2 recommande que les agents utilisateurs observent les comportements suivants (tout en reconnaissant que ceux-ci soient parfois contradictoires) :

  • Effectuer aussi peu de sauts que possible ;
  • Faire en sorte que toutes les pages, qui ne finissent pas par un saut forcé, aient à-peu-près la même hauteur ;
  • Éviter les sauts dans des blocs ayant une bordure ;
  • Éviter les sauts dans les tables ;
  • Éviter les sauts dans les éléments flottants.

Exemple(s) :

Supposons, par exemple, que la feuille de style contienne les déclarations 'orphans: 4' et 'widows: 20', et qu'il y ait 20 lignes (boîtes de ligne) disponibles à la fin d'une page donnée :

  • Si un paragraphe, à la fin de la page, contient 20 lignes ou moins, alors il devrait être contenu dans la page en question ;
  • Si le paragraphe contenait 21 ou 22 lignes, la seconde part de celui-ci ne devant pas échapper à la contrainte exercée par 'widows', ainsi cette seconde part devrait contenir exactement 2 lignes ;
  • Si le paragraphe contenait 23 lignes ou plus, la première part devrait contenir 20 lignes et, la seconde, le reste des lignes.

Maintenant, supposons que la valeur spécifiée pour 'orphans' soit '10', celle pour 'widows' soit '20' et que 8 lignes soient disponibles à la fin de la page :

  • Si un paragraphe, à la fin de la page, contient 8 lignes ou moins, alors il devrait être contenu dans la page en question ;
  • Si le paragraphe contenait 9 lignes ou plus, celui-ci ne pouvant pas être partagé (car ceci constituerait une violation de la contrainte exercée par 'orphan'), alors l'ensemble du paragraphe devrait être déplacé vers la page qui suit ;

13.4 La cascade dans un contexte de page

Les déclarations dans le contexte de la page obéissent aux règles de la cascade, tout comme les déclarations normales de CSS2.

Exemple(s) :

Soit l'exemple suivant :

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

En conséquence de la plus grande spécificité du sélecteur avec une pseudo-classe, les pages de gauche auront une marge gauche de '4cm', les autres pages (c.à.d. les pages de droite) auront une marge gauche de '3cm'.


Les couleurs et les arrière-plans

14 Les couleurs et les arrière-plans

  • 14.1 La couleur d'avant-plan : la propriété 'color'
  • 14.2 L'arrière-plan
    • 14.2.1 Les propriétés d'arrière-plan : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' et 'background'
  • 14.3 La correction du gamma

Les propriétés CSS permettent aux auteurs la spécification d'une couleur d'avant-plan et d'arrière-plan pour un élément. Pour l'arrière-plan, cela peut être une couleur ou une image. Les propriétés d'arrière-plan autorisent le positionnement et la répétition d'une image de fond, si celle-ci doit rester fixe, par rapport à la zone de visualisation, ou bien, si elle doit défiler en même temps que le document.

Voir le passage sur les unités de couleur pour une syntaxe correcte des valeurs de couleur.

14.1 La couleur d'avant-plan : la propriété 'color'

'color'
Valeur : <couleur> | inherit
Initiale : selon l'agent utilisateur
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété décrit la couleur d'avant-plan du contenu de texte d'un élément. Voici plusieurs façons d'indiquer la couleur rouge :

Exemple(s) :

EM { color: red }              /* nom de couleur prédéfini */
EM { color: rgb(255,0,0) }     /* couleurs en RGB allant de 0 à 255 */

14.2 L'arrière-plan

Les auteurs peuvent spécifier l'arrière-plan d'un élément (c.à.d. la surface où celui est rendu) comme étant une couleur ou bien une image. Selon le modèle de la boîte, l'arrière-plan correspond aux aires du contenu, de l'espacement et de bordure. Les couleurs et styles de bordure sont spécifiées par les propriétés de bordure. Les marges étant transparentes, l'arrière-plan du parent est toujours visible au travers de celles-ci.

Bien que les propriétés d'arrière-plan ne s'héritent pas, l'arrière-plan de la boîte du parent transparaîtra par défaut, du fait de la valeur initiale 'transparent' de la propriété 'background-color'.

L'arrière-plan de la boîte générée par l'élément racine recouvre la totalité du canevas.

Dans le cas de documents HTML, on recommande aux auteurs de spécifier un arrière-plan à l'élément BODY, plutôt qu'à l'élément HTML. Les agents utilisateurs devraient suivre les règles de préséance suivantes pour remplir le fond du canevas : quand la valeur de la propriété 'background' pour l'élément HTML diffère de 'transparent', alors utiliser la valeur spécifiée, autrement utiliser celle spécifiée par la propriété 'background' de l'élément BODY. Le rendu n'est pas défini si la valeur finale reste 'transparent'.

Selon ces règles, le canevas en dessous du document HTML suivant aura un arrière-plan "marbré" :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Donner un arrière-plan au canevas</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marbre.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Mon arrière-plan est marbré.
  </BODY>
</HTML>

14.2.1 Les propriétés d'arrière-plan : 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' et 'background'

'background-color'
Valeur : <couleur> | transparent | inherit
Initiale: transparent
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété donne la couleur d'arrière-plan d'un élément, avec une valeur de <couleur>, ou bien avec le mot-clé 'transparent', celui-ci laissant éventuellement voir les couleurs situées plus en-dessous.

Exemple(s) :

H1 { background-color: #F00 }
'background-image'
Valeur : <uri> | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Cette propriété spécifie l'image d'arrière-plan d'un élément. En même temps qu'une image, les auteurs devraient aussi spécifier une couleur d'arrière-plan, cette couleur étant employée en remplacement d'une image indisponible. Celle-ci, une fois disponible, vient se superposer sur le fond coloré. La couleur du fond étant ainsi visible au travers des zones transparentes de l'image.

La propriété admet les valeurs d'<uri>, pointant vers une image, ou 'none', prohibant l'emploi d'image.

Exemple(s) :

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
Valeur : repeat | repeat-x | repeat-y | no-repeat | inherit
Initiale : repeat
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est répétée (apposée) et la manière de la répétition. La mosaïque de fond résultante correspond aux aires de contenu, d'espacement et de bordure de la boîte de l'élément en question. Les significations des valeurs sont :

repeat
L'image se répète à la fois horizontalement et verticalement ;
repeat-x
L'image ne se répète qu'horizontalement ;
repeat-y
L'image ne se répète que verticalement ;
no-repeat
L'image ne se répète pas : un seul exemplaire de celle-ci est dessiné.

Exemple(s) :

BODY {
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

Une image de fond centrée, des copies de celle-ci se répétant en haut et en bas des aires d'espacement et de contenu. [D]

Un exemplaire de l'image d'arrière-plan est placé au centre, puis d'autres exemplaires de celles-ci se placent les unes au-dessus, les autres en-dessous, produisant une bande verticale derrière l'élément.

'background-attachment'
Valeur : scroll | fixed | inherit
Initiale : scroll
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est fixe par rapport à la zone de visualisation (pour la valeur 'fixed'), ou si celle-ci défile en même temps que le document (pour la valeur 'scroll'). Noter qu'il n'existe qu'une seule zone de visualisation par document ; c.à.d., même si l'élément est doté d'un mécanisme de défilement (voir la propriété 'overflow'), un arrière-plan avec la valeur 'fixed' ne se déplace pas avec cet élément.

Si l'image est fixe, celle-ci n'est seulement visible que quand elle se trouve dans les aires d'arrière-plan, d'espacement et de bordure de l'élément. À moins que l'image ne se répète en mosaïque ('background-repeat: repeat'), celle-ci peut ainsi ne pas apparaître.

Exemple(s) :

Dans cet exemple, une bande verticale infinie reste "collée" dans la zone de visualisation quand l'élément défile :

BODY {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Les agents utilisateurs peuvent considérer une valeur 'fixed' comme étant 'scroll'. Cependant, on recommande une interprétation correcte de la valeur 'fixed', au moins pour les éléments HTML et BODY, autrement il serait impossible pour un auteur de fournir une image destinée seulement aux navigateurs reconnaissant la valeur 'fixed'. Voir le passage sur la conformité pour des explications.

'background-position'
Valeur : [ [<pourcentage > | <longueur> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Initiale : 0% 0%
S'applique à : ceux des éléments de type bloc et ceux remplacés
Héritée : non
Pourcentage : se rapporte à la taille de la boîte elle-même
Médias : visuel

Quand on spécifie une image d'arrière-plan, cette propriété indique la position initiale de celle-ci. Les significations des valeurs sont :

<pourcentage> <pourcentage>
Pour la paire de valeurs '0% 0%', le coin en haut et à gauche de l'image est aligné sur celui du bord de l'espacement de la boîte. Pour la paire de valeurs '100% 100%', c'est le coin en bas et à droite de l'image sur celui du bord de l'espacement de la boîte. Pour la paire de valeurs '14% 84%', le point dans l'image, situé 14% vers la droite et 84% vers le bas, se place sur celui contenu dans l'aire d'espacement de la boîte, dans les mêmes proportions ;
<longueur> <longueur>
Pour la paire de valeur '2cm 2cm', le coin en haut et à gauche de l'image se place sur le point, situé à 2cm vers la droite et 2cm vers le bas en partant du coin en haut et à gauche de l'aire d'espacement de la boîte ;
top left et left top
Identique à '0% 0%' ;
top, top center et center top
Identique à '50% 0%';
right top et top right
Identique à '100% 0%' ;
left, left center et center left
Identique à '0% 50%' ;
center et center center
Identique à '50% 50%' ;
right, right center et center right
Identique à '100% 50%' ;
bottom left et left bottom
Identique à '0% 100%' ;
bottom, bottom center et center bottom
Identique à '50% 100%' ;
bottom right et right bottom
Identique à '100% 100%'.

Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celle-ci ne concerne que la position horizontale, la position verticale sera 50%. Quand on donne deux valeurs, la première concerne la position horizontale. Les combinaisons de valeurs de pourcentage et de longueur sont admises (ex. '50% 2cm'). Les positions négatives le sont également. On ne peut pas combiner des mots-clés avec des valeurs de pourcentage ou de longueur (ce qui est possible est indiqué plus haut).

Exemple(s) :

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

Quand l'image d'arrière-plan est fixe par rapport à la zone de visualisation (voir la propriété 'background-attachment'), cette image se place relativement à celui-ci, et non par rapport à l'aire d'espacement de l'élément. Par exemple :

Exemple(s) :

BODY {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

Ici, l'image (solitaire) est placée dans le coin en bas à droite de la zone de visualisation.

'background'
Valeur : [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : admis pour la propriété 'background-position'
Médias : visuel

La propriété 'background' est une propriété raccourcie qui sert à regrouper les propriétés individuelles 'background-color', 'background-image', 'background-repeat', 'background-attachment' et 'background-position' dans la feuille de style.

La propriété 'background' distribue d'abord à toutes les propriétés individuelles d'arrière-plan à leur valeur initiale, puis leur applique les valeurs explicites de la déclaration.

Exemple(s) :

Dans la première règle de l'exemple suivant, la valeur de la propriété 'background-color' est seule spécifiée, les autres propriétés individuelles recevant leur valeur initiale. Dans la seconde règle, toutes les valeurs des propriétés individuelles sont spécifiées :

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 La correction du gamma

Pour des explications concernant les questions soulevées par le gamma, consulter le tutoriel contenu dans la spécification PNG ([PNG10]).

Lors du calcul pour la correction du gamma, les agents utilisateurs, ceux affichant sur un écran cathodique, peuvent considérer un écran cathodique idéal et ignorer les effets du gamma apparent dus au dithering. Ceci implique, de leur part et selon les plates-formes actuelles, les corrections minimales suivantes :

PC sous MS-Windows
aucune ;
Unix sous X11
aucune ;
Macintosh sous QuickDraw
appliquer un gamma de 1.45 [ICC32] (celles des applications compatibles peuvent simplement passer le profil ICC sRGB à ColorSync pour effectuer la correction de couleur appropriée) ;
SGI sous X
appliquer la valeur de gamma trouvée à /etc/config/system.glGammaVal (la valeur par défaut étant 1.70 ; les applications tournant sur Irix 6.2, ou une version supérieure, peuvent simplement passer le profil ICC sRGB au système de gestion de couleur) ;
NeXT sous NeXTStep
appliquer un gamma de 2.22.

L'expression "appliquer un gamma" signifie que chacune des valeurs R, G et B doit être convertie en R'=Rgamma, G'=Ggamma et B'=Bgamma, avant leur transmission au système d'exploitation.

Ceci peut se faire très rapidement en construisant une table de référence de 256 valeurs, une seule fois au lancement du navigateur, ainsi :

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

ce qui évite des calculs compliqués pour chaque attribut de couleur et autrement faramineux au niveau de chaque pixel.


Les polices

15 Les polices

  • 15.1 Introduction
  • 15.2 La spécification des polices
    • 15.2.1 Les propriétés de spécification de police
    • 15.2.2 La famille de polices : la propriété 'font-family'
    • 15.2.3 Le style de police : les propriétés 'font-style', 'font-variant', 'font-weight' et 'font-stretch'
    • 15.2.4 La taille de police : les propriétés 'font-size' et 'font-size-adjust'
    • 15.2.5 La propriété raccourcie de police : la propriété 'font'
    • 15.2.6 Les familles de polices génériques
      • serif
      • sans-serif
      • cursive
      • fantasy
      • monospace
  • 15.3 La sélection des polices
    • 15.3.1 Les descriptions de police et @font-face
    • 15.3.2 Les descripteurs de sélection de police : 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' et 'font-size'
    • 15.3.3 Le descripteur de qualification des données de police : 'unicode-range'
    • 15.3.4 Le descripteur des valeurs numériques : 'units-per-em'
    • 15.3.5 Le descripteur de référencement : 'src'
    • 15.3.6 Les descripteurs de correspondance : 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' et 'descent'
    • 15.3.7 Les descripteurs de synthèse : 'widths', 'bbox' et 'definition-src'
    • 15.3.8 Les descripteurs d'alignement : 'baseline', 'centerline', 'mathline' et 'topline'
    • 15.3.9 Exemples
  • 15.4 Les caractéristiques des polices
    • 15.4.1 Introduction aux caractéristiques des polices
    • 15.4.2 Le nom entier d'une police
    • 15.4.3 Les unités de coordonnée dans le carré em
    • 15.4.4 La ligne de base centrale
    • 15.4.5 L'encodage des polices
    • 15.4.6 Le nom de famille de polices
    • 15.4.7 Les largeurs des glyphes
    • 15.4.8 La largeur de tige horizontale
    • 15.4.9 La hauteur des glyphes majuscules
    • 15.4.10 La hauteur des glyphes minuscules
    • 15.4.11 La ligne de base inférieure
    • 15.4.12 La ligne de base mathématique
    • 15.4.13 La boîte de circonscription maximale
    • 15.4.14 La hauteur maximale sans accent
    • 15.4.15 La profondeur maximale sans accent
    • 15.4.16 Le nombre Panose-1
    • 15.4.17 L'étendue des caractères ISO 10646
    • 15.4.18 La ligne de base supérieure
    • 15.4.19 L'épaisseur de tige verticale
    • 15.4.20 L'angle d'inclinaison vertical
  • 15.5 L'algorithme de correspondance de police
    • 15.5.1 Les correspondances entre valeurs de graisse et les noms de police
    • 15.5.2 Exemples de correspondances de police

15.1 Introduction

Pour le rendu visuel du texte d'un document, les caractères (éléments comportant une information abstraite) doivent correspondre avec des glyphes abstraits. Un ou plusieurs caractères peuvent être représentés par un ou plusieurs glyphes abstraits, parfois en fonction du contexte. Un glyphe correspond à la représentation artistique d'un caractère abstrait, dans un certain style typographique, sous forme de contours vectoriels ou d'images bitmaps pouvant être dessinés à l'écran ou sur du papier. Une police se compose d'un jeu de glyphes, ceux-ci étant fondés sur un même squelette pour leur dessin, leur taille, leur aspect et d'autres attributs associés au jeu entier, et d'un système de correspondance entre les caractères et ces glyphes abstraits.

Un agent utilisateur visuel doit répondre aux questions suivantes avant le rendu effectif d'un caractère :

  • Existe-t-il, directement ou de façon dérivée, une police spécifiée pour ce caractère ?
  • Est-ce que l'agent utilisateur dispose de cette police ?
  • Si c'est le cas, à quel(s) glyphe(s) correspond ce caractère ou cette combinaison de caractères ?
  • Si ce n'est pas le cas, que faudrait-il faire ? Faudrait-il effectuer une substitution de police ? Peut-on synthétiser cette police ? Peut-on la télécharger sur le Web ?

En CSS1 comme en CSS2, les auteurs peuvent spécifier les caractéristiques des polices à l'aide d'une batterie de propriétés de police.

Des changements sont intervenus entre CSS1 et CSS2 sur la façon dont un agent utilisateur doit interpréter ces propriétés, dans le cas où la police demandée n'est pas disponible. En CSS1, toutes les polices étaient supposées présentes dans le système de l'utilisateur et uniquement identifiées par leur nom. On pouvait spécifier des polices de rechange à l'aide de propriétés, mais les agents utilisateurs ne pouvaient offrir d'autres choix à l'utilisateur (par exemple, des polices de style apparenté dont aurait pu disposer l'agent utilisateur) que celui des polices génériques par défaut.

En CSS2, les évolutions survenues accordent une plus grande liberté aux :

  • auteurs de feuilles de style, pour décrire les polices que ceux-ci souhaitent voir utiliser ;
  • agents utilisateurs, pour sélectionner une police quand celle demandée n'est pas immédiatement disponible.

CSS2 améliore la détection d'une police correspondante dans le système de l'utilisateur, introduit la synthèse des polices et leur rendu progressif ainsi que leur téléchargement à partir du Web. Ces capacités accrues sont regroupées sous le vocable 'PoliceWeb'.

Dans le modèle de police de CSS2, comme dans celui de CSS1, chaque agent utilisateur dispose d'une "base de données de polices". CSS1 se référait à celle-ci sans en fournir le détail interne. Par contre, CSS2 définit les informations qui y sont contenues et permet aux auteurs d'y contribuer. Ainsi, quand un caractère est sollicité dans une police donnée, l'agent utilisateur, dans un premier temps, identifie celle dans la base de données qui correspond "au mieux" (en fonction de l'algorithme de correspondance de police). Une fois qu'une correspondance a été trouvée, celui-ci charge les informations la concernant localement ou à partir du Web, et peut ainsi afficher le caractère avec les glyphes appropriés.

En fonction de ce modèle, nous avons organisé la spécification en deux parties. La première concerne le mécanisme de spécification de police, avec lequel l'auteur précise les polices dont celui-ci souhaitent l'utilisation. La seconde concerne le mécanisme de sélection de police, à l'aide duquel l'agent utilisateur identifie et charge la police qui correspond au mieux aux souhaits de l'auteur.

La manière dont les agents utilisateurs construisent cette base de données n'est pas traitée dans cette spécification, l'implémentation de celle-ci dépendant entre autres du système d'exploitation, du système d'affichage des fenêtres et des agents utilisateurs eux-mêmes.

15.2 La spécification de police

La première phase du mécanisme de police de CSS traite de la façon dont les auteurs spécifient les polices devant être employées par l'agent utilisateur. Au premier abord, une façon évidente consisterait à utiliser le nom de la police, une seule chaîne formée de parties distinctes, par exemple "BT Swiss 721 Heavy Italic".

Malheureusement, il n'existe pas de taxonomie bien définie ni faisant l'objet d'un consensus général pour classer les polices selon leur nom, les termes qui s'appliquent au nom d'une famille de polices donnée pouvant être inadéquats pour d'autres. Par exemple, le terme 'italic' couramment employé pour désigner un texte incliné, un tel texte pouvant être également qualifié par les termes Oblique, Penché, Incliné, Cursive ou Kursiv. Dans le même ordre d'idée, les noms de police contiennent typiquement des indications sur leur "graisse". L'intérêt premier de ces dénominations consiste dans la distinction des différents aspects pris par une police selon qu'elle soit plus ou moins grasse. Il n'existe pas non plus de signification acceptée et universelle pour les noms des graisses, l'usage en est très variable. Par exemple, une police considérée comme grasse pourrait être qualifiée de Regular, Roman, Book, Medium, Semi- ou Demi-Bold, Bold,, ou encore Black, en fonction de l'apparence plus ou moins grasse de la police "normale" dans la mise en page.

Cette absence de dénomination systématique rend, en général, impossible la génération du dessin d'une police avec un aspect distinct, comme par exemple la rendre plus grasse.

À cause de cela, CSS suit un modèle différent. Les requêtes de polices ne sont pas basées sur un seul nom de police, mais sur une succession de valeurs de propriétés de police. Celles-ci sont le fondement du mécanisme de sélection de police de l'agent utilisateur. On peut agir individuellement sur les propriétés de police, par exemple pour augmenter la graisse, le nouveau jeu de valeurs qui en résulte étant utilisé à son tour pour effectuer une nouvelle sélection dans la base de données de police. Ceci produit des résultats plus réguliers pour les auteurs de feuilles de style et les personnes chargées de l'implémentation, de meilleure efficacité.

15.2.1 Les propriétés de spécification de police

En CSS2, la spécification de police se fait selon ces caractéristiques :

La famille de polices
La famille de polices indique laquelle des familles de polices employer pour rendre un texte. C'est un ensemble de polices prévues pour être combinées, leur dessin présentant des similarités. Un membre de la famille peut avoir un dessin en italique, un autre en gras, un autre condensé ou encore en petites capitales. Quelques noms de famille, "Helvetica", "New Century Schoolbook", "Kyokasho ICA L". Ces noms ne se limitent pas aux caractères latins. On peut regrouper les familles de polices en catégories : celles de type serif ou sans serif, celles dont l'espacement n'est pas proportionnel, celles qui ressemblent à une écriture manuscrite, celles avec un dessin fantaisie, etc.
Le style de police
Le style de police précise l'aspect dans lequel doit être rendu le texte, normal, italique ou oblique. La désignation italic indique un aspect plus incliné que celui du texte normal, mais pas aussi incliné qu'une écriture manuscrite. La dénomination oblique, une forme penchée de l'aspect normal, est plus couramment employée dans les familles de police sans serif. Ces définitions évitant de qualifier une police normale légèrement penchée d'oblique ou une police normale en caractères grecs d'italique ;
La variante de police
La variante de police indique si le texte doit être rendu avec des glyphes normaux ou avec des glyphes en petites capitales, pour les caractères en minuscule. Une police donnée peut ne comporter que des glyphes normaux, que des glyphes en petites capitales ou ces deux types en même temps ; cette propriété est utilisée pour requérir une police appropriée et, si celle-ci contient les deux variantes, en obtenir les glyphes correspondants ;
Le poids de police
Le poids de police se réfère à la graisse, plus ou moins grasse, des glyphes utilisés pour rendre le texte, en fonction des autres membres de la même famille de polices ;
L'étirement de police
C'est la quantité de contraction ou d'extension souhaitée pour les glyphes utilisés dans le rendu du texte, en fonction des autres membres de la même famille de polices ;
La taille de police (ou corps)
Celle-ci correspond à la dimension entre deux lignes de base consécutives, ces dernières spécifiées globalement (en termes de CSS, quand les propriétés 'font-size' et 'line-height' ont les mêmes valeurs).

Pour toutes ces propriétés, les valeurs exprimées en 'em' et 'ex' se réfèrent à la taille de la police de l'élément en question, à l'exception de la propriété 'font-size', pour laquelle les valeurs dans ces unités se rapportent à la taille de la police de l'élément parent. Voir le passage sur les unités de longueur pour plus d'informations.

Les propriétés de police de CSS décrivent l'apparence souhaitée pour le texte dans le document. À l'inverse, les descripteurs de police décrivent les caractéristiques des polices, de manière à retenir une police convenable pour obtenir l'apparence souhaitée. Pour des informations sur la classification des polices, consulter le passage traitant des descripteurs de police.

15.2.2 La famille de polices : la propriété 'font-family'

'font-family'
Valeur : [[ <famille-nom> | <famille-générique> ],]* [<famille-nom> | <famille-générique>] | inherit
Initiale : selon l'agent utilisateur
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété donne une liste, par ordre de priorité, de noms de familles de polices et/ou de noms de familles génériques. Pour contourner certaines difficultés, une police seule ne contenant pas nécessairement tous les glyphes pour le rendu de chacun des caractères d'un document, ou des polices étant absentes de certains systèmes, ainsi la propriété permet aux auteurs de spécifier une liste de polices, celles-ci de même style et taille, qui sont essayées successivement pour vérifier la correspondance d'un glyphe avec un caractère donné. On appelle cette liste un jeu de polices.

Exemple(s) :

Par exemple, un texte en français avec des symboles mathématiques peut nécessiter un jeu de polices de deux polices, l'une d'entre elles contenant les caractères latins et les chiffres, l'autre contenant les symboles mathématiques. Voici un jeu de polices qui conviendrait pour le rendu d'un texte qu'on sait contenir des caractères latins, japonais et des symboles mathématiques :

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

La police "Baskerville" va fournir les glyphes pour les caractères latins, la police "Heisi Mincho W3", ceux pour les caractères japonais, la police "Symbol", ceux pour les symboles mathématiques, et la famille de polices générique 'serif', ceux éventuels d'autres caractères.

La famille de polices générique sera utilisée si une, ou plusieurs, des polices d'un jeu de polices n'étaient pas disponibles. Bien que certaines polices fournissent un glyphe de substitution pour indiquer un "caractère manquant", celui-ci prenant typiquement l'aspect d'un carré, on ne devrait pas considérer ce glyphe comme une correspondance valide.

Il existe deux types de noms de famille de polices :

<famille-nom>
Le nom d'une famille de polices choisi. Dans l'exemple précédent, "Baskerville", "Heisi Mincho W3" et "Symbol" sont des noms de famille de polices. Celles dont l'intitulé contient des blancs devraient être écrites entre guillemets. Si on omet les guillemets, chacun des caractères blancs avant et après le nom de la police sont ignorés et chaque séquence de blancs, dans celui-ci, est convertie en un seul espace ;
<famille-générique>
On définit les familles génériques suivantes : 'serif', 'sans-serif', 'cursive', 'fantasy' et 'monospace'. Voir le passage traitant des familles de polices génériques pour leur description. Les noms de famille de polices génériques sont des mots-clés, on ne doit pas les mettre entre guillemets.

On recommande aux auteurs de citer une famille de polices générique comme dernière alternative, pour une meilleure efficacité.

Par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Essai de police</TITLE>
    <STYLE type="text/css">
      BODY { font-family: "new century schoolbook", serif }
    </STYLE>
  </HEAD>
  <BODY>
   <H1 style="font-family: 'Ma propre police', fantasy">Essai</H1>
    <P>Quoi de neuf ?
  </BODY>
</HTML>

Exemple(s) :

On peut utiliser la plus grande richesse de syntaxe des sélecteurs de CSS2 pour créer une typographie en fonction de la langue. Par exemple, certains caractères chinois et japonais partagent le même code Unicode, bien que les glyphes obtenus ne soient pas les mêmes dans ces deux langues :

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

Ces règles s'appliquent aux éléments dans une langue donnée, japonais ou chinois traditionnel, et appellent la police appropriée.

15.2.3 Le style de police : les propriétés 'font-style', 'font-variant', 'font-weight' et 'font-stretch'

'font-style'
Valeur : normal | italic | oblique | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

La propriété 'font-style' sélectionne, parmi les polices d'une famille de polices, celles avec un dessin normal (aussi appelé "roman" ou "upright"), italique et oblique. Les significations des valeurs sont :

normal
Spécifie une police dite normale dans la base de données de police de l'agent utilisateur ;
oblique
Spécifie une police dite oblique dans la base de données de police de l'agent utilisateur. Les polices dont le nom contient les mots Oblique, Slanted ou Incline sont typiquement étiquetées 'oblique' dans la base de données de police de l'agent utilisateur. Celles avec ce label ayant pu avoir été obtenues électroniquement en inclinant une police normale ;
italic
Spécifie une police dite italique dans la base de données de police de l'agent utilisateur, ou, s'il n'y en a pas, une avec un label 'oblique'. Les polices dont le nom contient les mots Italic, Cursive ou Kursiv seront typiquement étiquetées 'italic'.

Exemple(s) :

Dans cet exemple, le texte des éléments H1, H2 et H3 sera affiché avec une police italique et le texte accentué (EM) éventuel dans les éléments H1 avec un dessin normal :

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
'font-variant'
Valeur : normal | small-caps | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Dans une police en petites capitales, les glyphes des lettres minuscules ont un aspect similaire aux lettres majuscules, cependant avec une taille réduite et des proportions légèrement différentes. La propriété 'font-variant' appelle ce genre de police bicamérale (qui ont deux casses, comme les écritures latines). Celle-ci ne produit aucun effet visible pour les écritures monocamérales (qui n'ont qu'une seule casse, comme la plupart des systèmes d'écriture mondiaux). Les significations des valeurs sont :

normal
Spécifie une police qui n'est pas étiquetée comme étant en petites capitales ;
small-caps
Spécifie une police étiquetée comme étant en petites capitales. S'il n'y a pas une telle police, les agents utilisateurs devraient en effectuer la simulation, par exemple en sélectionnant une police normale et y remplaçant les lettres minuscules par des majuscules mises à l'échelle. En dernier ressort, les lettres majuscules inchangées d'une police normale peuvent se substituer aux glyphes en petites capitales, ainsi le texte apparaîtrait entièrement en majuscule.

Exemple(s) :

Dans cet exemple, le texte contenu dans un élément H3 apparaît en petites capitales, les parties accentuées (EM) en petites capitales italiques :

H3 { font-variant: small-caps }
EM { font-style: oblique }

Comme cette propriété provoque la transformation du texte en majuscule, les mêmes considérations que pour la propriété 'text-transform' s'appliquent.

'font-weight'
Valeur : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

La propriété 'font-weight' spécifie la graisse de la police. Les significations des valeurs sont :

100 à 900
Ces valeurs forment une séquence ordonnée, où chacun des nombres indique, pour la police, une graisse au moins aussi grasse que celle du nombre précédent ;
normal
Équivaut à '400' ;
bold
Équivaut à '700' ;
bolder
Spécifie la graisse supérieure à celle assignée à une police, cette graisse étant plus grasse que celle héritée par la police. S'il n'y en a pas, la valeur de graisse de la propriété prend simplement la valeur numérique supérieure (l'aspect de la police ne changeant pas), à moins que la valeur héritée ne soit déjà égale à '900', auquel cas la valeur résultante devient également '900' ;
lighter
Spécifie la graisse inférieure à celle assignée à une police, cette graisse étant moins grasse que celle héritée par la police. S'il n'y en a pas, la valeur de graisse de la propriété prend simplement la valeur numérique inférieure (l'aspect de la police ne changeant pas), à moins que la valeur héritée ne soit déjà égale à '100', auquel cas la valeur résultante devient également '100'.

Example(s) :

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 si disponible */

Les éléments enfants héritent de la valeur calculée pour la graisse.

'font-stretch'
Valeur : normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

La propriété 'font-stretch' sélectionne les dessins normal, comprimé ou élargi dans une famille de polices. Les valeurs des mots-clés absolus, du plus étroit au plus espacé, sont :

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

Le mot-clé relatif 'wider' spécifie la valeur d'expansion supérieure à celle héritée (sans effet si la valeur héritée est déjà 'ultra-expanded'), à l'inverse du mot-clé relatif 'narrower' celui-ci spécifiant la valeur de contraction inférieure à celle héritée (sans effet si la valeur héritée est déjà 'ultra-condensed').

15.2.4 La taille de police : les propriétés 'font-size' et 'font-size-adjust'

'font-size'
Valeur : <taille-absolue> | <taille-relative> | <longueur> | <pourcentage> | inherit
Initiale : medium
S'applique à : tous les éléments
Héritée : oui, la valeur calculée également
Percentages: se rapporte à la taille de la police du parent de l'élément
Media: visuel

Cette propriété décrit la taille d'une police spécifiée explicitement. Celle-ci correspond au carré em, un concept issu de la typographie. Noter que certains glyphes peuvent déborder de leur carré em. Les significations des valeurs sont :

<taille-absolue>
Un mot-clé <taille-absolue> se réfère à une entrée de la table des tailles de police, celle-ci étant dressée et mise en œuvre par l'agent utilisateur. Les valeurs possibles :

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

Pour un écran de moniteur, on suggère un facteur d'échelle de 1.2 entre les valeurs consécutives de la table ; si la valeur 'medium' correspond à 12pt, la valeur 'large' devrait correspondre à 14.4pt. Les facteurs d'échelle peuvent différer selon les médias considérés. Par ailleurs, l'agent utilisateur devrait prendre en compte la qualité et la disponibilité des polices au moment du calcul de cette table. Celle-ci peut aussi différer d'une famille de polices à une autre.

Remarque : En CSS1, on suggérait un facteur d'échelle de 1.5, qui s'est avéré trop grand à l'usage.

<taille-relative>
Un mot-clé <taille-relative> s'entend par rapport à la table des tailles de police et par rapport à la taille de la police de l'élément parent. Les valeurs possibles :

[ larger | smaller ]

Par exemple, quand l'élément parent a une taille de police de valeur 'medium', l'élément en question ayant une valeur 'larger', la taille de police résultante de celui-ci correspondra à 'large'. Si la taille de police de l'élément parent a une valeur trop éloignée d'une des valeurs de la table, l'agent utilisateur est libre d'effectuer une interpolation entre les deux valeurs qui la circonscrivent ou un arrondi à la valeur la plus proche. L'agent utilisateur peut devoir procéder à une extrapolation des valeurs de la table quand une valeur numérique sort du champ des mots-clés.

<longueur>
Une valeur de longueur spécifie une taille de police absolue (indépendante de la table des tailles de police de l'agent utilisateur). Les valeurs négatives ne sont pas admises ;
<pourcentage>
Une valeur en pourcentage spécifie une taille de police absolue par rapport à celle de l'élément parent. Leur emploi, de même pour les valeurs exprimées en 'em', conduit à des feuilles de style plus fiables, en plein accord avec le principe de la cascade.

La valeur réelle, pour cette propriété, peut différer de la valeur calculée, la propriété 'font-size-adjust' ayant une valeur numérique et certaines tailles de police étant indisponibles.

Les éléments enfants héritent de la valeur calculée de 'font-size' (autrement l'effet de la propriété 'font-size-adjust' serait combiné).

Exemple(s) :

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
'font-size-adjust'
Valeur : <nombre> | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Pour les écritures bicamérales, la taille apparente et la lisibilité subjective d'une police dépendent moins de la valeur de la propriété 'font-size' que de celle de 'x-height', ou plus utilement, du ratio de ces deux valeurs (x-height/font-size), appelé valeur d'aspect. Plus grande la valeur d'aspect, plus la police restera lisible dans les petites tailles. Et inversement, les polices, qui ont une valeur d'aspect plus faible, verront leur lisibilité se dégrader plus rapidement, à partir d'un certain seuil, que celles de plus grande valeur d'aspect. Les simples substitutions de polices, basées sur le seul critère de la taille de police, peuvent conduire à un texte illisible.

Par exemple, la police Verdana, très répandue, a une valeur d'aspect de 0.58, c.à.d. quand la taille de celle-ci est de 100 unités, sa valeur de hauteur-x (x-height) est de 58 unités. En comparaison, la police Times New Roman a une valeur d'aspect de 0.46. La police Verdana restera donc lisible plus longtemps que Times New Roman, la taille de police diminuant. Inversement, pour une taille donnée, Verdana semblera souvent "trop grande" quand substituée par Times New Roman.

Cette propriété permet de spécifier une valeur d'aspect pour un élément, ce qui préserve la valeur hauteur-x de la première police à choisir dans la liste des polices de substitution. Les significations des valeurs sont :

none
Ne préserve pas la valeur hauteur-x de la police ;
<nombre>
Spécifie la valeur d'aspect. Ce nombre concerne la valeur d'aspect de la première police à choisir. Le facteur d'échelle pour les polices disponibles se détermine selon cette formule :
  y(a/a') = c

ce qui correspond à :

y  = la valeur de 'font-size' de la première police du choix ;
a  = la valeur d'aspect de la première police du choix ;
a' = la valeur d'aspect de la police disponible ;
c  = la valeur de 'font-size' appliquée à la police disponible.

Exemple(s) :

Par exemple, la police Verdana (valeur d'aspect de 0.58) avec une taille de police 14px spécifiée n'étant pas disponible, une police de substitution avec une valeur d'aspect de 0.46 étant disponible, la taille de police de celle-ci serait : 14 * (0.58/0.46) = 17.65px.

L'ajustement de la taille de police intervient lors du calcul de la valeur réelle de la propriété 'font-size'. L'héritage étant basé sur la valeur calculée, les éléments enfants héritent de valeurs sans ajustement.

La première image ci-dessous montre plusieurs polices rendues dans le même corps (11pt à 72dpi), avec leur valeur d'aspect correspondante. Noter que les polices avec une grande valeur d'aspect apparaissent plus grande que celles avec une valeur d'aspect plus petite. Celles avec une valeur d'aspect très faible sont illisibles pour cette taille donnée.

Comparaison de polices en corps 12 pt.

L'image suivante montre la correction apportée par le facteur d'échelle de 'font-size-adjust', la police Verdana étant la "première du choix". Une fois l'ajustement effectué, les tailles apparentes semblent identiques entre les polices, bien que la taille réelle (en em) puisse varier de plus de 100%. Noter que la propriété 'font-size-adjust' tend également à stabiliser les dimensions horizontales des lignes.

Comparaison entre des polices ajustées.

[Errata 2001-06-25] La propriété 'font-size-adjust' devraient être appliquée également à la première police du choix. Ceci ne devrait avoir aucun effet, la valeur de 'font-size-adjust' étant par définition égale au ratio ex/em de cette première police du choix. Ceci corrige une omission en relation avec les cas où la propriété est héritée par les éléments enfants de type en-ligne.

15.2.5 La propriété raccourcie de police : la propriété 'font'

'font'
Valeur : [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : oui
Percentages: allowed on 'font-size' and 'line-height'
Médias : visuel

La propriété raccourcie 'font', sauf comme indiqué plus loin, sert à regrouper les propriétés 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' et 'font-family' dans la feuille de style. La syntaxe de celle-ci est issue d'une notation typographique traditionnelle pour fixer plusieurs propriétés liées aux polices.

Tout d'abord, les valeurs des propriétés de police sont toutes réinitialisées à leur valeur initiale, les propriétés décrites précédemment ainsi que 'font-stretch' et 'font-size-adjust'. Ensuite, les valeurs spécifiées explicitement dans la propriété 'font' sont données aux propriétés concernées. Voir les définitions des propriétés pour les valeurs admises et initiales de celles-ci. Pour des raisons de compatibilité, il n'est pas possible, au moyen de cette propriété 'font', de spécifier des valeurs autres que leur valeur initiale aux propriétés 'font-stretch' et 'font-size-adjust' ; pour ce faire, utiliser directement celles-ci.

Exemple(s) :

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

Dans la deuxième règle, la taille de police en pourcentage ('80%') se rapporte à celle de l'élément parent. Dans la troisième, le pourcentage de hauteur de ligne ('110%') se rapporte à la taille de police de l'élément lui-même.

Les trois premières règles ne spécifiant pas explicitement les valeurs des propriétés 'font-variant' et 'font-weight', celles-ci ont donc leur valeur initiale 'normal'. Noter que le nom de la famille de polices "new century schoolbook" contenant des blancs, celui-ci est mis entre guillemets. La quatrième r&eagrave;gle spécifie la valeur 'bold' pour la propriété 'font-weight', la valeur 'italic' pour 'font-style' et, implicitement, la valeur 'normal' pour 'font-variant'.

La cinquième règle spécifie les valeurs des propriétés individuelles 'font-variant' ('small-caps'), 'font-size' (120% de la taille de police du parent), 'line-height' (120% de la taille de police) et 'font-family' ('fantasy'). On en déduit que le mot-clé 'normal' s'applique aux deux propriétés restantes, 'font-style' et 'font-weight'.

La sixième règle spécifie les valeurs des propriétés 'font-style', 'font-size' et 'font-family', les autres propriétés gardant leur valeur initiale. Puis celle-ci spécifie la valeur 'condensed' pour la propriété 'font-stretch', ceci ne pouvant être réalisé au moyen de la propriété raccourcie 'font'.

Les valeurs suivantes se rapporte aux polices du système :

caption
La police employée pour légender les contrôles (ex. les boutons, les menus déroulants, etc.) ;
icon
La police employée pour légender les icones ;
menu
La police employée dans les menus (ex. les menus déroulants et les listes de menus) ;
message-box
La police employée dans les boîtes de dialogue ;
small-caption
La police employée pour étiqueter les contrôles de petite taille;
status-bar
La police employée dans les barres de statut de la fenêtre.

On ne peut spécifier les polices de système que globalement, c.à.d. une spécification en une seule fois de la famille d'une police, de sa taille, de son poids, de son style, etc. Ces valeurs peuvent être ensuite modifiées individuellement. S'il n'y a pas de police avec les caractéristiques requises sur une plate-forme donnée, l'agent utilisateur devrait exercer une interprétation adéquate (par exemple utiliser une forme réduite de la police désignée par la valeur 'caption' pour la valeur 'small-caption') ou bien lui substituer une police par défaut. Comme pour les polices normales, si, pour une police de système, une quelconque des propriétés individuelles n'était pas disponible au travers des préférences de l'utilisateur du système d'exploitation, ces propriétés devraient prendre leur valeur initiale.

C'est pourquoi cette propriété est "presque" une propriété raccourcie : on ne peut spécifier les polices de système qu'avec celle-ci, et non avec la propriété 'font-family'. Ainsi, la propriété 'font' permet un plus grand champ d'action que la somme de ses sous-propriétés. Cependant, les propriétés individuelles, telle que 'font-weight', peuvent toujours prendre les valeurs données par ce moyen, qu'on peut faire varier indépendamment.

Exemple(s) :

BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
BUTTON P { font: menu }
BUTTON P EM { font-weight: bolder }

Si, selon exemple, la police employée pour les menus déroulants sur un système donné était Charcoal en 9pt, avec un poids de 600, alors les éléments P descendants de l'élément BUTTON serait affichés comme si la règle était :

BUTTON P { font: 600 9pt Charcoal }

La propriété raccourcie 'font' remettant à leur valeur initiale chacune des propriétés non spécifiées, ces déclarations auraient produit le même effet :

BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
}

15.2.6 Les familles de polices génériques

Les familles de polices génériques sont un mécanisme de repli, un moyen de préserver l'essentiel des intentions de l'auteur dans le pire des cas, quand aucune des polices demandées ne peut être sélectionnée. Pour le meilleur contrôle typographique possible, on ne devrait employer que certains noms de police dans les feuilles de style.

Les cinq familles de polices génériques sont censées exister dans toutes les implémentations CSS (celles-ci ne correspondent pas forcément à cinq polices déterminées). Les agents utilisateurs devraient offrir par défaut des choix raisonnables de familles génériques, exprimant autant que possible les genres de chacune d'elles dans les limites de la technique.

On recommande que les agents utilisateurs permettent aux utilisateurs de sélectionner la police de leur choix pour faire office de police générique.

serif

Les glyphes des polices serifs, tel que le mot est employé en CSS, ont des terminaisons au bout de leurs traits, des bouts évasées ou en pointes, ou plus simplement des terminaisons avec des empattements (y compris des empattements en pavé). Les polices serifs ont typiquement un espacement des lettres proportionnel. Elles présentent souvent une plus grande variation entre les pleins et les déliés que les polices appartenant au type générique 'sans-serif. En CSS, le terme 'serif' s'applique à une police, quelle que soit son écriture, bien que d'autres dénominations soient plus courantes pour d'autres écritures, telles que Mincho (japonais), Sung ou Song (chinois) ou Pathang (coréen). Toute police ainsi décrite peut représenter la famille générique 'serif'.

Quelques exemples de polices dans cette description :
Polices latines | Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Polices grecques | Bitstream Cyberbit
Polices cyrilliques | Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Polices hébraïques | New Peninim, Raanana, Bitstream Cyberbit
Polices japonaises | Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Polices arabes | Bitstream Cyberbit
Polices cherokees | Lo Cicero Cherokee

sans-serif

Les glyphes sans serifs, tel que le mot est employé en CSS, ont les fins des traits pleins, sans évasement, ni recoupements ou autres ornements. Les polices sans serifs ont typiquement un espacement des lettres proportionnel. Elles présentent en général peu de variation entre les pleins et les déliés, comparées aux polices appartenant au type générique 'serif'. En CSS, le terme 'sans-serif' s'applique à une police, quelle que soit son écriture, bien que d'autres dénominations soient plus courantes pour d'autres écritures, telles que Gothic (japonais), Kai (chinois), Totum ou Kodig (coréen). Toute police ainsi décrite peut représenter la famille générique 'sans-serif'.

Quelques exemples de polices dans cette description :
Polices latines | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Polices grecques | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Polices cyrilliques | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Polices hébraïques | Arial Hebrew, MS Tahoma
Polices japonaises | Shin Go, Heisei Kaku Gothic W5
Polices arabes | MS Tahoma

cursive

Les glyphes des polices cursives, tel que le terme est employé en CSS, ont généralement des traits qui se recoupent ou bien un aspect manuscrit plus affirmé que le dessin des polices italiques. Les glyphes se touchent en partie ou complètement, ce qui donne un résultat plus proche d'une écriture manuscrite que celui d'un travail imprimé. Les polices de certaines écritures, comme l'arabe, sont presque toujours cursives. En CSS, le terme 'cursive' s'applique à une police, quelle que soit son écriture, bien que d'autres dénominations sont également utilisées, telles que Chancery, Brush, Swing et Script.

Quelques exemples de polices dans cette description :
Polices latines | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Polices cyrilliques | ER Architekt
Polices hébraïques | Corsiva
Polices arabes | DecoType Naskh, Monotype Urdu 507

fantasy

Les polices fantaisie, tel que le terme est employé en CSS, sont principalement décoratives, contenant toujours les représentations des caractères (à l'inverse des polices Pi ou Picture, qui n'en ont pas). Quelques exemples :
Polices latines Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace

Le critère de détermination unique d'une police monospace : tous les glyphes ont les mêmes dimensions (ce qui peut donner un résultat surprenant avec certaines écritures, telle l'arabe). L'aspect étant semblable à celui obtenu avec une machine à écrire manuelle, on les emploie souvent pour transmettre des échantillons de code informatique.

Quelques exemples de polices dans cette description :
Polices latines | Courier, MS Courier New, Prestige, Everson Mono
Polices grecques | MS Courier New, Everson Mono
Polices cyrilliques | ER Kurier, Everson Mono
Polices japonaises | Osaka Monospaced
Polices cherokees | Everson Mono

15.3 La sélection des polices

La seconde phase du mécanisme de police de CSS2 concerne la sélection par l'agent utilisateur d'une police basée sur les propriétés de police spécifiées par l'auteur, sur la disponibilité des polices, etc. Le détail de l'algorithme de correspondance de police est présenté ci-dessous.

Quatre façons de sélectionner une police, la correspondance par le nom, la correspondance intelligente, la synthèse de police et le téléchargement de police :

la correspondance par le nom
Dans ce cas, l'agent utilisateur utilise une police existante et accessible qui a le même nom de famille que la police demandée (noter que l'aspect et les dimensions ne correspondent pas forcément quand la police employée par l'auteur du document et celle du système de l'utilisateur proviennent de différentes fonderies). L'information de correspondance est restreinte aux propriétés de police CSS, dont le nom de famille. C'est la seule méthode définie par CSS1 ;
la correspondance de police intelligente
Dans ce cas, l'agent utilisateur utilise une police existante et accessible dont l'apparence représente la correspondance la plus proche avec celle de la police demandée (noter que les dimensions ne correspondent pas forcément). L'information de correspondance comprend des informations sur le genre de la police (texte ou symbole), la nature des empattements, le poids, la hauteur des capitales, la hauteur du x, les hampes, les jambages, l'inclinaison, etc.
la synthèse de police
Dans ce cas, l'agent utilisateur crée une police, non seulement d'un aspect très semblable, mais aussi dont les dimensions correspondent avec celles de la police demandée. L'information de synthèse comprend l'information de correspondance et demande typiquement des valeurs de paramètre plus précises que celles employées dans certains schémas de correspondance. En particulier, la synthèse requiert des dimensions précises, une substitution du caractère par un glyphe et, si toutes les caractéristiques du dessin de la police doivent être préservées, des informations de position ;
le téléchargement de police
Et finalement, l'agent utilisateur peut ramener une police du Web. Ceci est similaire au chargement d'images, de sons ou d'applets à partir du Web pour une présentation dans un document donné, et de la même façon, ceci peut retarder l'affichage de la page.

Le rendu progressif est une combinaison entre le téléchargement et une des autres méthodes ; cela revient à fournir une police de substitution temporaire (par correspondance nominale, intelligente ou par synthèse), ce qui permet une lecture du contenu, le temps que la police demandée soit téléchargée. Quand cette opération est couronnée de succès, la police temporaire est remplacée par cette police externe, heureusement sans avoir à redessiner la page.

Remarque : Un rendu progressif requiert les mesures de cette police au préalable, pour éviter le redéploiement du contenu au moment où, une fois chargée, celle-ci est rendue. Cette information étant conséquente, on ne devrait la spécifier, dans un document, au plus qu'une seule fois par police.

15.3.1 Les descriptions des polices et @font-face

La description de police fait le lien entre la spécification de police d'un auteur et les données de police, ce sont les informations nécessaires au formatage du texte et au rendu des glyphes abstraits auxquels correspondent les caractères, en fait, leurs contours proportionnels ou leurs dessins bitmaps. Les polices sont référencées par les propriétés des feuilles de style.

La description de police s'ajoute à la base de données des polices, puis est utilisée pour la sélection des données de la police concernée. Cette description contient des descripteurs, tels que l'emplacement des données d'une police sur le Web et les caractérisations de celles-ci. Les descripteurs de police sont également nécessaires pour faire correspondre les propriétés de police de la feuille de style avec les données d'une police particulière. La quantité de renseignements d'une description de police peut varier du simple nom d'une police jusqu'à la liste des dimensions des glyphes.

Les descripteurs de police sont de trois types :

  1. ceux qui font le lien entre l'utilisation des polices par CSS et la description de police (ceux-ci ont le même nom que la propriété de police correspondante) ;
  2. ceux qui ont un URI pointant vers les données d'une police ;
  3. ceux qui, étendant la caractérisation d'une police, font le lien entre la description d'une police et les données de celle-ci.

Toutes les descriptions de police se font avec une règle-at @font-face. En voici la forme générale :

@font-face { <police-description> }

L'expression <police-description> ayant la forme :

descripteur: valeur;
descripteur: valeur;
[...]
descripteur: valeur;

Chacune des règles de @font-face spécifie la valeur pour chacun des descripteurs de police, soit implicitement soit explicitement. Ceux dont les valeurs ne sont pas explicites prenant la valeur initiale définie pour chacun des descripteurs dans cette spécification. Ces descripteurs ne s'appliquent que dans le contexte de la règle @font-face dans laquelle ceux-ci sont définis, et non aux éléments dans le langage du document. Ainsi, aucunes notions de descripteurs s'appliquant à des éléments, ou de valeurs héritées par des éléments enfants, n'interviennent.

Les descripteurs de police disponibles sont traités plus loin dans cette spécification.

Par exemple ici, la police 'Robson Celtic' est définie et référencée dans une feuille de style incorporée à un document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Essai de police</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/15_fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> Ce titre s'affiche dans la police Robson Celtic</H1>
  </BODY>
</HTML>

La feuille de style (dans un élément STYLE) contient une règle CSS qui enjoint l'utilisation de la famille de polices 'Robson Celtic' à tous les éléments H1.

Une implémentation CSS1 consulterait le système pour y trouver une police dont le nom de la famille et d'autres propriétés correspondent à 'Robson Celtic' et, en cas d'échec, utiliserait la police serif de repli (celle-ci ayant une existence définie) de l'agent utilisateur .

Une implémentation CSS2 examinerait d'abord les règles contenues dans @font-face en quête d'une description de police définissant 'Robson Celtic'. Dans l'exemple ci-dessus, une règle correspond. Bien que cette règle ne recèle que peu de données sur la police, celle-ci donne un URI qui pointe sur une police téléchargeable pour le rendu du document. Les polices téléchargeables ne devraient pas être disponibles pour d'autres applications. Si aucune correspondance n'est obtenue via @font-face, l'agent utilisateur essaiera d'en trouver une comme l'aurait fait une implémentation CSS1.

Noter que, si la police 'Robson Celtic' avait été installée dans le système, l'agent utilisateur aurait ajouté une entrée dans la base de données de police, tel que décrit dans l'algorithme de correspondance de police. Dans l'exemple précédent, cette correspondance aurait été retenue en premier, coupant court au téléchargement de la police.

Les implémentations CSS1 qui ne reconnaissent pas la règle @font-face, rencontrant l'accolade ouvrante, vont en ignorer le contenu jusqu'à l'accolade fermante. Cette règle-at se conformant aux obligations de compatibilité ascendante de CSS. Les interpréteurs peuvent ignorer ces règles sans provoquer d'erreurs.

Cette séparation entre les descripteurs de police et leurs données présente un intérêt, au-delà de pouvoir effectuer une sélection et/ou une substitution de police. La protection des données et les restrictions exercées sur leur copie, pour les descripteurs de police, peuvent être beaucoup moins strictes que pour les données d'une police entière. Ainsi, on peut installer la définition de police localement, ou au moins dans un cache local si la police est appelée à partir d'une feuille de style commune ; ceci évitant d'avoir à télécharger la définition de police complète, c.à.d. plus d'une fois par police nommée.

Quand un descripteur de police apparaît à plusieurs reprises, le dernier survenu l'emporte, les autres devant être ignorés.

Également, tout descripteur non reconnu ou inutile pour un agent utilisateur doit être ignoré. Des versions ultérieures de CSS pourraient introduire des descripteurs supplémentaires pour l'amélioration de la substitution de police, de leur correspondance ou de leur synthèse.

15.3.2 Les descripteurs de sélection de police : 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' et 'font-size'

Les descripteurs suivants ont les mêmes noms que ceux des propriétés de police correspondantes de CSS2, celles-ci admettant une valeur seule ou une liste de valeurs séparées par des virgules.

Les valeurs contenues dans cette liste sont les mêmes que celles de la propriété correspondante CSS2, sauf mention explicite. Quand il n'y a qu'une seule valeur, celle-ci doit correspondre. Quand c'est une liste, chacun des items de celle-ci peut correspondre. Quand on omet le descripteur dans une règle @font-face, c'est la valeur initiale de celui-ci qui est considérée.

'font-family' (Descripteur)
Valeur : [ <famille-nom> | <famille-générique> ] [, [<famille-nom> | <famille-générique> ]]*
Initiale : selon l'agent utilisateur
Médias : visuel

C'est le descripteur du nom de famille d'une police prenant les mêmes valeurs que pour la propriété 'font-family'.

'font-style' (Descripteur)
Valeur : all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*
Initiale : all
Médias : visuel

C'est le descripteur du style d'une police prenant les mêmes valeurs que pour la propriété 'font-style', étant admise de plus, une liste de valeurs séparées par des virgules.

'font-variant' (Descripteur)
Valeur : [normal | small-caps] [,[normal | small-caps]]*
Initiale : normal
Médias : visuel

C'est une indication CSS pour une variante avec petites capitales d'une police. Ce descripteur prenant les mêmes valeurs que pour la propriété 'font-variant', étant admise de plus, une liste de valeurs séparées par des virgules.

Remarque : Les polices cyrilliques pryamoĭ peuvent être libellées petites capitales pour la propriété 'font-variant', ceci donnant un résultat plus consistent avec les polices latines (et de même, pour celle kursiv l'accompagnant, libellée italique pour la propriété'font-style', pour des raisons identiques).

'font-weight' (Descripteur)
Valeur : all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*
Initiale : all
Médias : visuel

C'est le descripteur du poids d'une police par rapport aux autres polices de la même famille. Celui-ci prenant les mêmes valeurs que pour la propriété 'font-weight'. Avec trois exceptions :

  1. les mots-clés relatifs (bolder et lighter) ne sont pas admis ;
  2. on admet une liste de valeurs séparées par des virgules, quand les polices contiennent plusieurs graisses ;
  3. on admet le mot-clé supplémentaire 'all', signifiant une correspondance de la police pour toutes les graisses possibles, soit parce que celle-ci contient plusieurs graisses, soit parce qu'elle n'en contient qu'une seule.
'font-stretch' (Descripteur)
Valeur : all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]*
Initiale : normal
Médias : visuel

C'est une indication CSS de la quantité de contraction ou d'expansion d'une police, par rapport aux autres polices de la même famille. Ce descripteur prenant les mêmes valeurs que pour la propriété 'font-stretch', avec ces exceptions :

  • les mots-clés relatifs (wider et narrower) ne sont pas admis ;
  • on admet une liste de valeurs séparées par des virgules ;
  • le mot-clé 'all' est admis.
'font-size' (Descripteur)
Valeur : all | <longueur> [, <longueur>]*
Initiale : all
Médias : visuel

C'est le descripteur des tailles fournies par cette police. Seules les valeurs exprimées avec des unités de longueur absolues sont admises, en contraste de la propriété 'font-size' qui admet à la fois des longueurs et des tailles relatives et absolues. Une liste de valeurs séparées par des virgules est admise.

La valeur initiale 'all' convient pour la plupart des polices proportionnelles, c'est pourquoi ce descripteur s'utilise principalement dans une règle @font-face avec des polices bitmaps ou avec des polices proportionnelles devant être rendues et dessinées dans une fourchette de tailles de police restreinte.

15.3.3 Le descripteur de qualification des données de police : 'unicode-range'

Ce descripteur, facultatif dans une définition de police, est employé pour éviter la vérification ou le téléchargement d'une police n'ayant pas suffisamment de glyphes pour le rendu d'un caractère donné.

'unicode-range' (Descripteur)
Valeur : <étendue-unicode> [, <étendue-unicode>]*
Initiale : U+0-7FFFFFFF
Médias : visuel

C'est le descripteur de l'étendue des caractères ISO 10646 couverte par la police.

Les valeurs de <étendue-unicode> sont exprimées avec des nombres hexadécimaux préfixés de "U+", ceux-ci correspondant aux positions du code du caractère dans ISO 10646 ([ISO10646]).

Par exemple, U+05D1 représente le caractère ISO 10646 'Lettre bet en hébreu'. Pour les valeurs hors du Plan Plurilingue de Base [ndt. Basic Multilingual Plane (BMP)], on préfixe avec des digits supplémentaires, également hexadécimaux, ceux-ci correspondant au numéro du plan, ainsi : l'expression U+A1234 correspond au caractère situé dans le Plan 10 à la position de code hexadécimal 1234. Au moment de la rédaction de ce texte, aucun caractère n'a encore été assigné en dehors du Plan Plurilingue de Base. Les zéros en-tête (ex. 0000004D) sont admis, mais non requis.

La valeur initiale de ce descripteur couvre non seulement le Plan Plurilingue de Base, qu'on pourrait exprimer par U+0-FFFF, mais aussi le répertoire entier de ISO 10646. Ainsi, cette valeur initiale signifie que la police peut avoir des glyphes pour des caractères partout dans l'espace ISO 10646. Quand on spécifie une valeur pour le descripteur 'unicode-range', on optimise une indication de recherche, en restreignant l'étendue dans laquelle une police donnée peut avoir des glyphes pour les caractères concernés. La police n'a pas besoin d'être entièrement parcourue pour rechercher des caractères situés hors de cette étendue.

On peut écrire les valeurs avec un nombre quelconque de chiffres. Pour des nombres seuls, le caractère joker '?' est censé signifier 'toute valeur', ce qui crée une étendue entre les positions des caractères. Ainsi, avec un seul nombre :

unicode-range: U+20A7
pas de joker ('?'), ceci indique la position d'un seul caractère (le symbole monétaire de la peseta espagnole) ;
unicode-range: U+215?
un joker, couvre l'étendue allant de la position 2150 à 215F (les fractions) ;
unicode-range: U+00??
deux jokers, couvre l'étendue allant de la position 0000 à 00FF (Latin-1) ;
unicode-range: U+E??
deux jokers, couvre l'étendue allant de la position 0E00 à 0EFF (écriture laotienne).

Dans ce format, on peut combiner une paire de nombres avec le caractère tiret pour signifier une étendue plus large. Par exemple :

unicode-range: U+AC00-D7FF
l'étendue va de la position AC00 à D7FF (la zone pour les syllabes Hangul).

On peut spécifier plusieurs étendues discontinues, séparées par des virgules. Comme pour les autres listes de ce genre en CSS, les blancs survenant avant ou après la virgule sont ignorés. Par exemple :

unicode-range: U+370-3FF, U+1F??
Ceci recouvre l'étendue allant des positions 0370 à 03FF (Grec moderne) plus 1F00 à 1FFF (Grec ancien polytonique) ;
unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F
L'un des pire cas en terme de prolixité, indiquant que cette police (extrêmement grande) ne contient que des caractères chinois ISO 10646, excluant tous les caractères seulement japonais ou coréens. L'étendue de celle-ci va des positions 3000 à 303F (symboles et ponctuations chinois-japonais-coréen), plus 3100 à 312F (Bopomofo), plus 3200 à 32FF (lettres et mois enclos c.j.c.), plus 3300 à 33FF (zones de compatibilité c.j.c.), plus 4E00 à 9FFF (idéogrammes unifiés c.j.c.), plus F900 à FAFF (idéogrammes de compatibilité c.j.c.) et enfin FE30 à FE4F (formes de compatibilité c.j.c.).

Une représentation plus courante pour une police chinoise typique serait :

unicode-range: U+3000-33FF, U+4E00-9FFF

unicode-range: U+11E00-121FF
Cette police couvre les pictogrammes aztèques, en cours d'enregistrement, allant des positions 1E00 à 21FF dans le Plan 1 ;
unicode-range: U+1A00-1A1F
Cette police couvre l'Ogham irlandais, en cours d'enregistrement, allant des positions 1A00 à 1A1F.

15.3.4 Le descripteur des valeurs numériques : 'units-per-em'

Ce descripteur spécifie le nombre d'unités par em ; ces unités peuvent être utilisées par plusieurs autres descripteurs pour exprimer diverses longueurs, ainsi le descripteur 'units-per-em' est requis quand d'autres dépendent de celui-ci.

'units-per-em' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur du nombre des unités de coordonnées du carré em, la taille de la grille de dessin sur laquelle les glyphes sont placés.

15.3.5 Le descripteur de référencement : 'src'

Ce descripteur est requis pour référencer les données de police réelles, que celles-ci soient téléchargeables ou installées localement.

'src' (Descripteur)
Valeur : [ <uri> [format(<chaîne> [, <chaîne>]*)] | <police-nom> ] [, <uri> [format(<chaîne> [, <string>]*)] | <police-nom> ]*
Initiale : indéfinie
Médias : visuel

C'est une liste de polices, par ordre de priorité, leurs noms séparés par une virgule, ces polices étant externes et/ou installées localement. Les références externes pointent sur les données des polices, et sont requises si la PoliceWeb doit être téléchargée. La ressource de police peut-être un sous-ensemble de la police désignée, cette ressource, par exemple, pouvant ne contenir que les glyphes nécessaires pour une page donnée, ou un jeu de pages.

Une référence externe consiste en un URI, suivi par un indice facultatif concernant le format de la ressource de police désignée par l'URI, cette indication devrait être utilisée par les agents utilisateurs pour leur éviter de requérir des formats de police inutilisables par eux. Comme pour toute référence hypertextes, d'autres formats pouvant être disponibles, l'agent utilisateur sachant par avance ce qu'il trouvera à cette adresse, leur lecture de cet indice serait sans doute plus fiable qu'une interprétation d'un suffixe de fichier d'un URI.

L'indice de format est constitué d'une liste de chaînes, séparées par une virgule, représentant des formats de polices répandus. L'agent utilisateur honorera le nom des formats de police qu'il reconnaît et évitera de télécharger les polices dont les noms de format lui sont inconnus.

Voici une première liste de noms de formats, définis dans cette spécification, et qui est représentative des formats utilisés par les implémentations sur diverses plates-formes :
Chaîne | Format de police | Exemples d'extensions courantes
"truedoc-pfr" | TrueDoc™ Portable Font Resource | .pfr
"embedded-opentype" | Embedded OpenType | .eot
"type-1" | PostScript™ Type 1 | .pfb, .pfa
"truetype" | TrueType | .ttf
"opentype" | OpenType, y compris TrueType Open | .ttf
"truetype-gx" | TrueType avec des extensions GX |
"speedo" | Speedo |
"intellifont" | Intellifont |

Comme pour les autres URIs en CSS, ceux-ci pouvant être partiels, auquel cas un URI se résout par rapport à l'endroit où se trouve la feuille de style qui contient la règle @font-face.

L'expression <police-nom> représente le nom entier d'une police installée localement. The nom entier de la police correspond à celui reporté par le système d'exploitation, c'est certainement le nom le plus utilisé dans les feuilles de style de l'utilisateur, dans celle par défaut de l'agent utilisateur ou probablement dans celles de l'auteur dans un réseau interne. Des indications, telles que bold, italic ou underline, sont souvent rajoutées pour différencier les polices d'une famille. Pour plus d'informations sur les noms entiers des polices, voir les notes plus bas.

La notation pour <police-nom> consiste en le nom entier de la police, celui-ci doit être mis entre guillemets, car le nom peut contenir n'importe quel caractère, y inclus des espaces et des signes de ponctuation, et doit aussi être placé à l'intérieur des chaînes "local(" et ")".

Exemple(s) :

src: url("http://foo/bar")
un URI complet et aucun indice sur le(s) format(s) de police disponible à cet endroit ;
src: local("BT Century 751 No. 2 Semi Bold Italic")
une référence à une police donnée, installée localement ;
src: url("../15_fonts/bar") format("truedoc-pfr")
un URI partiel vers une police disponible au format TrueDoc ;
src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont")
un URI complet, dans ce cas vers un script, lequel peut générer deux formats différents - OpenType et Intellifont ;
src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1")
deux possibilités : d'abord une police locale et ensuite une police téléchargeable au format Type 1.

L'accès aux polices locales se fait via <police-nom>. Le nom de la police n'est réellement ni unique, ni indépendant de la plate-forme ou du format de police, mais c'est pour le moment la meilleure façon d'identifier les données des polices locales. On peut affiner cette méthode, avec le nom de la police, en fournissant une indication sur les glyphes complémentaires requis. Ceci en indiquant des étendues pour les positions de caractères ISO 10646 dans lesquelles la police fournit certains glyphes (voir 'unicode-range').

15.3.6 Les descripteurs de correspondance : 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' et 'descent'

Ces descripteurs, facultatifs dans une définition CSS2, peuvent être utilisés pour une correspondance de police intelligente ou pour l'ajustement de la taille d'une police.

'panose-1' (Descripteur)
Valeur : [<entier>]{10}
Initiale : 0 0 0 0 0 0 0 0 0 0
Médias : visuel

C'est le descripteur du nombre Panose-1, consistant en dix entiers décimaux, séparés par un blanc. Ce descripteur n'admet pas de liste avec une séparation par virgule, car le système Panose-1 indique une correspondance sur un ensemble de valeurs. La valeur initiale est zéro, signifiant "tous", pour chaque chiffre PANOSE ; pour cette valeur, toutes les polices vont correspondre au nombre Panose. On recommande fortement l'utilisation du descripteur Panose-1 pour les polices latines. Voir le détail à l'Appendice C.

'stemv' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de l'épaisseur de tige verticale d'une police. Pour une valeur indéfinie, le descripteur n'intervient pas dans la détermination d'une correspondance. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

'stemh' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de l'épaisseur de tige horizontale d'une police. Pour une valeur indéfinie, le descripteur n'intervient pas dans la détermination d'une correspondance. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

'slope' (Descripteur)
Valeur: <nombre>
Initiale : 0
Médias : visuel

C'est le descripteur de l'angle du trait vertical d'une police.

'cap-height' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de la hauteur des glyphes majuscules d'une police. Pour une valeur indéfinie, le descripteur n'intervient pas dans la détermination d'une correspondance. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

'x-height' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de la hauteur des glyphes minuscules d'une police. Pour une valeur indéfinie, le descripteur n'intervient pas dans la détermination d'une correspondance. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'. Ce descripteur peut être très utile conjointement avec la propriété 'font-size-adjust', car le calcul de la valeur d'aspect de la police candidate requiert à la fois la taille et valeur hauteur-x de celle-ci, de ce fait, on recommande l'emploi de ce descripteur.

'ascent' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de la hauteur maximale sans accent d'une police. Pour une valeur indéfinie, le descripteur n'intervient pas dans la détermination d'une correspondance. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

'descent' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de la profondeur maximale sans accent d'une police. Pour une valeur indéfinie, le descripteur n'intervient pas dans la détermination d'une correspondance. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

15.3.7 Les descripteurs de synthèse : 'widths', 'bbox' et 'definition-src'

La synthèse d'une police demande au moins une correspondance avec les dimensions de la police spécifiée. Pour une synthèse, ces mesures doivent donc être disponibles. De la même façon que pour le rendu progressif, qui requiert une communication préalable de ces mesures, pour éviter que la page soit redessinée quand le téléchargement de la police demandée est terminé. Bien que les descripteurs suivants soient optionnels dans une définition CSS2, certains sont obligatoires pour une synthèse (ou un rendu progressif réussi) souhaitée par l'auteur. Dès que la police demandée est disponible, celle-ci devrait se substituer à la police temporaire. Chacun des descripteurs mis en œuvre seront utilisés pour une meilleure, ou plus rapide, approximation de la police attendue.

Les plus importants de ces descripteurs sont 'widths' et 'bbox', leur utilisation prévenant le phénomène de déplacement de texte au moment de la disponibilité de la police. De plus, on peut utiliser le jeu des descripteurs de correspondance et parfaire la synthèse de la police en question.

'widths' (Descripteur)
Valeur : [<étendue-unicode> ]? [<nombre> ]+ [,[<étendue-unicode> ]? <nombre> ]+]
Initiale : indéfinie
Médias : visuel

C'est le descripteur des dimensions de glyphe. La valeur consiste en une liste de valeurs <étendue-unicode>, séparées par des virgules, chacune de ces valeurs suivies par une ou plusieurs dimensions de glyphes. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

Quand on omet de spécifier une valeur <étendue-unicode>, Une étendue de U+0-7FFFFFFF est inférée, celle-ci couvre l'ensemble des caractères et leurs glyphes. S'il n'y a pas assez de dimensions de glyphes, on réplique la dernière de la liste afin de couvrir l'étendue concernée. S'il y en a trop, celles en trop sont ignorées.

Exemple(s) :

Par exemple :

widths: U+4E00-4E1F 1736 1874 1692
widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792
    1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

Dans le premier exemple, on a une étendue de 32 caractères, de 4E00 à 4E1F. Le glyphe correspondant au premier caractère (4E00) a une dimension de 1736, le deuxième une dimension de 1874 et le troisième une dimension de 1692. Comme des dimensions manquent, la dernière est répliquée pour couvrir le reste de l'étendue spécifiée. Dans le second exemple, on a une seule dimension pour toute une étendue de 256 glyphes, puis des dimensions explicites pour une étendue de 16 glyphes.

Ce descripteur ne peut pas décrire plusieurs glyphes correspondant tous à un seul caractère ou à des ligatures de plusieurs caractères. Ainsi, celui-ci peut seulement être employé avec des écritures qui n'ont pas de formes contextuelles ni de ligatures obligatoires. Néanmoins utilement dans ces cas. Les écritures qui requièrent une correspondance d'un-à-plusieurs ou de plusieurs-à-plusieurs des caractères vers les glyphes, ne peuvent pas pour le moment employer ce descripteur pour la synthèse de police, mais on peut toujours utiliser le téléchargement de police ou la correspondance intelligente avec celles-ci.

'bbox' (Descripteur)
Valeur : <nombre>, <nombre>, <nombre>, <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de la boîte de circonscription maximale d'une police. La valeur consiste en une liste d'exactement quatre nombres, sépar&eacut;es par des virgules, qui indique les coordonnées de cette boîte pour la police entière, dans l'ordre, horizontale x gauche basse, verticale y gauche basse, horizontale x droite haute et verticale y droite haute.

'definition-src' (Descripteur)
Valeur : <uri>
Initiale : indéfinie
Médias : visuel

Les descripteurs de police peuvent se trouver dans la définition de police d'une feuille de style ou bien dans une ressource de définition de police distincte, identifiée par un URI. Cette dernière possibilité peut réduire le trafic sur le réseau quand plusieurs feuilles de style se réfèrent aux mêmes polices.

15.3.8 Les descripteurs d'alignement : 'baseline', 'centerline', 'mathline' et 'topline'

Ces descripteurs facultatifs règlent l'alignement de différentes lignes d'écritures les unes avec les autres.

'baseline' (Descripteur)
Valeur : <nombre>
Initiale : 0
Médias : visuel

C'est le descripteur de la ligne de base inférieure d'une police. Quand on l'utilise avec une autre valeur que celle par défaut (0), il faut aussi employer le descripteur 'units-per-em'.

'centerline' (Descripteur)
Valeur : <nombre>
Initial: indéfinie
Médias : visuel

C'est le descripteur de la ligne de base centrale d'une police. Si la valeur est indéfinie, l'agent utilisateur peut en produire une, suivant diverses manières, par exemple le point intermédiaire entre les valeurs de 'ascent' et 'descent'. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

'mathline' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de la ligne de base mathématique d'une police. Si la valeur est indéfinie, l'agent utilisateur peut emprunter celle de la ligne de base centrale. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

'topline' (Descripteur)
Valeur : <nombre>
Initiale : indéfinie
Médias : visuel

C'est le descripteur de la ligne de base supérieure d'une police. Si la valeur est indéfinie, l'agent utilisateur peut utiliser une valeur approchante, telle que celle de 'ascent'. Quand on l'utilise, il faut aussi employer le descripteur 'units-per-em'.

15.3.9 Exemples

Example(s):

Soit cette liste de polices :
Swiss 721 light | light & light italic
Swiss 721 | roman, bold, italic, bold italic
Swiss 721 medium | medium & medium italic
Swiss 721 heavy | heavy & heavy italic
Swiss 721 black | black, black italic, & black #2
Swiss 721 Condensed | roman, bold, italic, bold italic
Swiss 721 Expanded | roman, bold, italic, bold italic

On pourrait utiliser les descriptions de police suivantes pour leur téléchargement :

@font-face {
    font-family: "Swiss 721";
    src: url("swiss721lt.pfr"); /* Swiss 721 light */
    font-style: normal, italic;
    font-weight: 200;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721.pfr");   /* Swiss 721 */
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721md.pfr"); /* Swiss 721 medium */
    font-style: normal, italic;
    font-weight: 500;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */
    font-style: normal, italic;
    font-weight: 700;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721blk.pfr"); /* Swiss 721 black */
    font-style: normal, italic;
    font-weight: 800,900;        /* un point intéressant, remarquer que la graisse
                                    900 italique n'existe pas */
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr);      /* Swiss 721 Condensed */
    font-stretch: condensed;
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr);      /* Swiss 721 Expanded */
    font-stretch: expanded;
}

15.4 Les caractéristiques des polices

15.4.1 Introduction aux caractéristiques des polices

Dans cette partie, on énumère les caractéristiques de police qui présentent un intérêt pour, du côté client, la correspondance et la synthèse de police et pour le téléchargement de police, en rapport avec les plates-formes hétérogènes ayant un accès au Web. Ces informations peuvent concerner tout média utilisant des polices sur le Web, les données de police n'étant pas incorporées dans le média en question.

Ces caractéristiques de police ne sont pas propres aux feuilles de style, chacune d'entre elles, en CSS, étant décrite par un descripteur de police. Ces caractéristiques pourraient tout autant être reliées aux nœuds VRML, ou aux structures d'application CGM, ou à une API Java ou encore à d'autres langages de feuille de style. Ramenées par un média et stockées dans un cache proxy, les polices pourraient être réutilisées par un autre média, ce qui permet une économie sur les temps de téléchargement et sur la bande passante, pourvu que le système de caractérisation des polices soit cohérent.

Voici une liste non exhaustive pour de tels médias :

  • Formats vectoriels en 2D
    • Computer Graphics Metafile
    • Simple Vector Format
  • Formats graphiques en 3D
    • VRML
    • 3DMF
  • Technologies d'incorporation d'objets
    • Java
    • Active-X
    • Obliq

15.4.2 Le nom entier d'une police

C'est le nom entier d'une police donnée, dans une famille de polices. Celui-ci comprend typiquement des qualificatifs textuels non-standards ou des ornements rajoutés au nom de la famille de polices. Il peut également inclure le nom de la fonderie, ou une abréviation de celle-ci, souvent placés au début du nom de la famille. On utilise ce nom seulement pour se référer aux polices installées localement, car, du fait de ces rajouts, celui-ci peut varier d'une plate-forme à l'autre. On doit le mettre entre guillemets.

Par exemple, le nom de famille, pour une police TrueType et PostScript, peut différer selon l'utilisation des caractères espace, de la ponctuation et des abréviations de certains mots (par exemple pour satisfaire aux contraintes de longueur des noms de certains systèmes ou interpréteurs d'imprimantes). Par exemple, les espaces ne sont pas admis dans les noms pour PostScript, tout en étant courants dans les noms entiers de police. La table des noms de police TrueType peut également contenir les noms PostScript, ceux-ci ne comportant pas d'espaces.

Le nom de la définition de police revêt une certaine importance, dans la mesure où celui-ci fait le lien vers chacune des polices installées localement. Il est important que le nom soit fiable pour respecter, à la fois l'indépendance de la plate-forme et celle de l'application. C'est pour cette raison que le nom ne devrait pas être propre à une application ou à un langage.

Une solution idéale serait de disposer d'un nom unique pour identifier chaque collection de données de police. Ceci n'existe pas dans les faits. Les polices de même nom pouvant varier selon un certain nombre de descripteurs. Certains d'entre eux, concernant les différences entre glyphes complémentaires d'une police, sont insignifiants quand les glyphes nécessaires sont compris dans celle-ci. D'autres, concernant les différences de dimensions, rendent incompatibles ces polices de même nom. Il semble impossible de déterminer une règle qui identifierait les incompatibilités à coup sûr, et en même temps, qui n'empêcherait pas d'utiliser une copie locale des données d'une police donné, celle-ci convenant parfaitement. C'est pourquoi, seule l'étendue des caractères ISO 10646 sera utilisée pour la validation des correspondances sur un nom de police.

Un des buts premiers, pour le nom d'une police dans une définition de police, étant de permettre à l'agent utilisateur de déterminer s'il existe une copie locale des donnés de cette police, ce nom doit apparaître dans toutes les copies légitimes des données de celle-ci. Autrement, ceci génèrerait un trafic superflu sur le Web, induit par une correspondance ratée avec une copie locale.

15.4.3 Les unités de coordonnée dans le carré em

Certaines valeurs, comme les dimensions, sont exprimées dans des unités qui se rapportent à un carré hypothétique, la hauteur de celui-ci représentant la distance souhaitée entre deux lignes de texte dans la même taille. Ce carré, appelé carré em, correspond à la grille dans laquelle s'inscrivent les contours d'un glyphe. La valeur de ce descripteur donne le nombre d'unités qui composent le carré em. En exemple, des valeurs courantes : 250 (Intellifont), 1000 (Type 1) et 2048 (TrueType, TrueType GX et OpenType).

Sans spécification de cette valeur, il devient impossible de connaître la signification des dimensions d'une police. Par exemple, une police a des glyphes minuscules d'une hauteur 450, une autre des glyphes encore plus petits, leur hauteur étant de 890. Les nombres représentent en fait des fractions, ainsi pour la première police ce serait 450/1000, et pour la seconde 890/2048, celle-ci étant effectivement plus petite.

15.4.4 La ligne de base centrale

Ce descripteur donne la position de la ligne de base centrale dans le carré em. On emploie une ligne de base centrale pour l'alignement des écritures idéographiques, tout comme la ligne de base inférieure pour les écritures latines, grecques et cyrilliques.

15.4.5 L'encodage des polices

Chaque police est associée, explicitement ou implicitement, a une table, la table d'encodage de la police, celle-ci indiquant le caractère représenté par un glyphe. On l'appelle aussi le vecteur d'encodage.

En réalité, de nombreuses polices proposent plusieurs glyphes pour le même caractère. L'utilisation de tel ou tel glyphe dépend des règles de la langue considérée, ou encore des préférences du fondeur.

En arabe, par exemple, toutes les lettres ont quatre (ou deux) dessins différents, selon que la lettre apparaisse au début d'un mot, au milieu, à la fin ou toute seule. Dans tous les cas, il s'agit du même caractère, le document source ne mentionne que celui-ci, mais il apparaîtra dans les différents formes à l'impression.

Il existe aussi des polices qui offrent un choix parmi diverses formes au graphiste. Malheureusement, CSS2 ne propose pas encore les moyens de les choisir. Pour l'instant, seule la forme par défaut est retenue pour de telles polices.

15.4.6 Le nom de famille de polices

C'est la partie du nom de la police qui spécifie le nom de la famille de celle-ci. Par exemple, le nom de famille de Helvetica-Bold est Helvetica et celui de ITC Stone Serif Semibold Italic est ITC Stone Serif. Certains systèmes traitent les rajouts concernant les polices condensées ou élargi;es comme faisant partie de leur nom de famille.

15.4.7 Les dimensions des glyphes

C'est une liste des dimensions, sur le dessin de quadrillage, du glyphe correspondant à chacun des caractères. Celle-ci est ordonnée selon le système de code ISO 10646. On ne peut pas utilement spécifier leurs dimensions quand plusieurs glyphes correspondent au même caractère ou quand des ligatures sont obligatoires.

15.4.8 L'épaisseur de tige horizontale

Cette valeur se réfère à la tige dominante d'une police. Il peut y avoir deux, ou plus, tiges dessinées. Par exemple, les tiges verticales principales des caractères romans sont différentes des tiges minces dans un "M" et un "N" serifs, sans compter les différences d'épaisseur entre les caractères majuscules et minuscules d'une même police. Également, chaque tige peut, volontairement ou à la suite d'une erreur, avoir des épaisseurs qui varient légèrement.

15.4.9 La hauteur des glyphes majuscules

Cette dimension correspond à la mesure, suivant un axe de coordonné y, partant de la ligne de base jusqu'au sommet plat d'une lettre majuscule des écritures latines, grecques et cyrilliques. Ce descripteur présente un intérêt limité pour les polices ne contenant pas de glyphes dans ces écritures.

15.4.10 La hauteur des glyphes minuscules

Cette dimension correspond à la mesure, suivant un axe de coordonnée y, partant de la ligne de base jusqu'au sommet d'une lettre minuscule sans accent ni hampe, des écritures latines, grecques et cyrilliques. On effectue cette mesure sur des lettres dont le sommet est plat, sans tenir compte des zones de correction optique. Cette mesure est habituellement employée dans un ratio hauteur de minuscule sur hauteur de majuscule pour comparer les familles de polices.

Illustration de la hauteur-x.

Ce descripteur ne présente pas d'intérêt pour les polices qui ne contiennent pas les glyphes dans ces écritures. Les hauteurs des minuscules et des majuscules apparaissant souvent sous la forme d'un ratio pour comparer des polices, il peut être utile de leur donner une même valeur de hauteur pour les écritures monocamérales telle l'hébreu, quand celui-ci apparaît dans un texte mixte latin hébreu, les caractères hébreux ayant typiquement une hauteur à mi-chemin entre celles des minuscules et des majuscules des polices latines.

Hauteurs des caractères hébreux.

15.4.11 La ligne de base inférieure

Ce descripteur donne la position de la ligne de base inférieure dans le carré em. Cette ligne sert pour l'alignement des écritures latines, grecques et cyrilliques, comme la ligne de base supérieure pour celui des écritures dérivées du sanscrit.

15.4.12 La ligne de base mathématique

Ce descripteur donne la position de la ligne de base mathématique dans le carré em. Cette ligne sert pour l'alignement des symboles mathématiques, comme la ligne de base inférieure pour celui des écritures latines, grecques et cyrilliques.

15.4.13 La boîte de circonscription maximale

La boîte de circonscription maximale correspond au plus petit rectangle qui contiendrait les contours de l'ensemble des glyphes d'une police, si on les avait empilés, en faisant coïncider leurs origines, puis peints.

Si une police dynamique téléchargeable a été générée à partir d'une police parent, cette boîte devrait correspondre à celle du parent.

15.4.14 La hauteur maximale sans accent

Cette dimension correspond à la mesure, dans le carré m, partant de la ligne de base jusqu'au point le plus haut atteint par les glyphes, les accents ou marques diacritiques exclus.

Diagramme montrant plusieurs glyphes et la hauteur maximale sans accent.

15.4.15 La profondeur maximale sans accent

Cette dimension correspond à la mesure, dans le carré m, partant de la ligne de base jusqu'au point le plus bas atteint par les glyphes, les accents ou marques diacritiques exclus.

Diagramme montrant plusieurs glyphes et la profondeur maximale sans accent.

15.4.16 Le nombre Panose-1

La technologie Panose-1 est un standard industriel de classification des polices TrueType et de correspondance. Le système PANOSE se compose d'un jeu de dix nombres qui catégorise les attributs clés d'une police latine, d'une procédure de classification pour la création de ces nombres et du logiciel Mapper qui détermine la correspondance de police la plus proche possible à partir d'un jeu de polices donné. Ce système pourrait être employé, avec quelques modifications, avec les polices grecques et cyrilliques, mais ne convient cependant pas pour les écritures monocamérales et idéographiques (hébreu, arménien, arabe, chinois-japonais-coréen).

15.4.17 L'étendue des caractères ISO 10646

Ce descripteur indique le répertoire de glyphes d'une police, par rapport à ISO 10646 (Unicode). Ce répertoire est épars (la plupart des polices ne couvrant pas la totalité de ISO 10646), le descripteur dresse la liste des blocs ou étendues qui reçoivent une certaine couverture (sans garantie de couverture complète) et on l'emploie pour écarter les polices qui ne conviennent pas (celles qui n'auront pas les glyphes requis). Ceci n'est pas une affirmation que la police en question possède les glyphes nécessaires, seulement que celle-ci mérite d'être téléchargée et examinée. Voir [ISO10646] pour des références utiles.

Cette méthode peut s'accroître avec des allocations ultérieures de caractères dans Unicode, sans changement de syntaxe et sans invalider le contenu existant.

Les formats de police, n'incluant pas cette information, explicitement ou indirectement, peuvent quand même utiliser cette caractéristique, mais la valeur doit être fournie par le document ou la feuille de style de l'auteur.

Il existe d'autres classifications d'écritures, tels que le système Monotype (voir [MONOTYPE]) et un système d'écriture ISO en proposition. Ceux-ci ne sont pas encore applicables.

C'est pourquoi la classification des répertoires de glyphes par l'étendue des caractères ISO 10646, ceux-ci pouvant être représentés avec une police donnée, est employée dans cette spécification. Ce système peut être élargi pour couvrir toute allocation ultérieure.

15.4.18 La ligne de base supérieure

Ce descripteur donne la position, dans le carré em, de la ligne de base supérieure. Celle-ci sert pour l'alignement des écritures dérivées du sanscrit, comme la ligne de base inférieure pour celui des écritures latines, grecques et cyrilliques.

15.4.19 L'épaisseur de tige verticale

C'est l'épaisseur de la tige verticale (ou presque) des glyphes. Cette information, souvent attachée au hinting, peut ne pas être accessible dans certains formats de police. La mesure devrait être effectuée sur la tige verticale dominante de la police, différents regroupements de tiges verticales pouvant exister (ex. une tige principale et une de trait plus faible, comme dans les "M" ou les "N" majuscules).

15.4.20 L'angle d'inclinaison vertical

C'est l'angle, exprimé en degré dans le sens inverse des aiguilles d'une montre, des traits verticaux dominants d'une police. La valeur est négative pour les polices qui penchent vers la droite, comme presque toutes les polices italiques. On peut aussi employer ce descripteur avec les polices obliques, penchés, scripts et, de manière générale, avec toutes celles dont les traits verticaux ne le sont pas vraiment. Une valeur non nulle n'indiquant pas forcément une police italique.

15.5 L'algorithme de correspondance de police

Cette spécification renforce l'algorithme spécifié dans CSS1. Cet algorithme se ramenant à celui de CSS1, quand les feuilles de style de l'auteur ou de l'utilisateur ne font pas mention de règles @font-face.

La correspondance des descripteurs avec les polices doit se faire avec soin. Les descripteurs trouvent une correspondance dans un ordre bien déterminé qui garantit, selon ce processus de correspondance, des résultats aussi cohérents que possible entre agents utilisateurs (en supposant qu'une même librairie de polices et de descriptions de polices leur soit présentée). On peut optimiser cet algorithme, pourvu que l'implémentation qui en est faite suive un comportement exactement similaire à celui décrit ici.

  1. L'agent utilisateur construit (ou accède à) une base de données des descripteurs de police concernés pour toutes les polices connues par celui-ci. Quand deux polices ont exactement le même descripteur, l'une d'elle sera ignorée. L'agent utilisateur peut avoir connaissance d'une police quand celle-ci est :
    • installée localement ;
    • déclarée au travers d'une règle @font-face contenue dans une feuille de style, reliée ou incorporée au document en question ;
    • utilisée dans la feuille de style par défaut, qui existe par construction dans chacun des agents utilisateurs et qui est censée comporter la totalité des règles @font-face pour chacune des polices que l'agent utilisateur emploiera dans une présentation par défaut, ainsi que les règles @font-face des cinq familles de polices génériques particulières définies pour CSS2 (voir 'font-family').
  2. Pour un élément donné et pour chaque caractère dans celui-ci, l'agent utilisateur réunit les propriétés qui le concernent. Avec l'aide du jeu complet de ces propriétés, l'agent utilisateur utilise la propriété 'font-family' pour sélectionner une famille de polices provisoire. De cette façon, la correspondance par le nom de famille sera couronnée de succès avant une correspondance par certains autres descripteurs. Les propriétés restantes sont exercées sur cette famille selon les critères de correspondance de chacun des descripteurs. Si une correspondance est atteinte pour chacune des propriétés, alors retenir cette police pour l'élément en question ;
  3. Si, à la suite de l'étape 2, aucune police ne correspond avec celle indiquée par la propriété 'font-family', les agents utilisateurs qui disposent d'un mécanisme de correspondance intelligent peuvent poursuivre dans l'examen des autres descripteurs, tels que celui de hauteur-x, ceux des dimensions des glyphes et celui de panose-1, pour l'identification d'une famille de polices provisoire différente. Si une correspondance est atteinte pour chacun des descripteurs restants, alors retenir cette police pour l'élément en question. Le descripteur 'font-family' qui est réfléchi dans les propriétés CSS2, correspond à la famille de polices demandée, et non pas au nom qu'aurait la police trouvée selon un processus de correspondance intelligent. On considère que les agents utilisateurs échouent dans cette étape quand ceux-ci n'implémentent pas un tel processus ;
  4. Si, à la suite de l'étape 3, aucune police ne correspond avec celle indiquée par la propriété 'font-family', les agents utilisateurs qui disposent d'un mécanisme de téléchargement de police peuvent poursuivre dans l'examen du descripteur 'src' de la police temporaire, désignée comme dans les étapes 2 ou 3, pour vérifier la disponibilité d'une ressource de réseau dont le format est reconnu. L'agent utilisateur peut choisir de s'interrompre, en attendant la fin du téléchargement, ou de passer à l'étape suivante, pendant celui-ci. On considère que les agents utilisateurs échouent dans cette étape, quand ceux-ci n'implémentent pas le téléchargement de police, ou quand ils ne sont pas connectés à un réseau, ou quand l'utilisateur a désactivé le téléchargement de police, ou quand la ressource demandée est indisponible quelle qu'en soit la raison, ou encore quand la police une fois téléchargée ne peut pas être utilisé quelle qu'en soit la raison ;
  5. Si, à la suite de l'étape 4, aucune police ne correspond avec celle indiquée par la propriété 'font-family', les agents utilisateurs qui disposent d'un mécanisme de synthèse de police peuvent poursuivre dans l'examen d'autres descripteurs, tels que celui de 'x-height', ceux des dimensions de glyphes et celui de 'panose-1', pour identifier une autre famille de polices temporaire en vue de la synthèse. Si une correspondance est atteinte pour chacun des autres descripteurs restants, alors cette police est retenue pour l'élément en question et la synthèse proprement dite peut commencer. On considère que les agents utilisateurs échouent dans cette étape quand ceux-ci n'implémentent pas la synthèse de police ;
  6. Si jusqu'ici, les étapes 2, 3, 4 et 5 du processus de correspondance ont échoué et si une alternative existe dans la suite du jeu de polices indiqué par la propriété 'font-family', alors reprendre le processus de correspondance à partir de l'étape 2 avec cette autre police ;
  7. Si une correspondance est atteinte pour une police, celle-ci manquant du (ou des) glyphe(s) pour le (ou les) caractère(s) donné(s), et si une police alternative existe dans la suite du jeu de polices indiqué par la propriété 'font-family', alors reprendre le processus de correspondance à partir de l'étape 2 avec cette autre police. Le descripteur 'unicode-range' peut être employé pour écarter rapidement celle des polices qui ne dispose pas des glyphes appropriés. Quand ce descripteur confirme la police comme contenant certains glyphes dans l'étendue correcte, l'agent utilisateur peut examiner celle-ci pour y vérifier la présence d'un glyphe donné ;
  8. S'il n'y a plus de polices à examiner dans la famille considérée dans l'étape 2, alors utiliser la valeur héritée, ou celle dépendante de l'agent utilisateur, de la propriété 'font-family' et reprendre le processus à partir de l'étape 2, en utilisant les meilleures correspondances possibles avec cette police. Si un caractère donné ne peut être rendu avec celle-ci, l'agent utilisateur ne disposera pas de police qui convienne pour celui-ci. L'agent utilisateur devrait faire correspondre chacun des caractères, pour lesquels il ne dispose pas d'une police appropriée, avec un symbole visible et choisi par celui-ci, de préférence un glyphe "caractère manquant" issu de l'une des polices disponibles ;
  9. Les agents utilisateurs qui disposent d'un mécanisme de rendu progressif, dans l'attente de la fin du téléchargement d'une police, peuvent, en cas de réussite, utiliser cette police comme une nouvelle famille de polices. Si certains glyphes manquaient dans celle-ci, ces glyphes étant déjà présents dans la police temporaire, alors la police téléchargée n'est pas utilisée pour le caractère correspondant et la police temporaire continue d'être utilisée.

Remarque : On peut optimiser cet algorithme en évitant le réexamen par les propriétés CSS2 de chacun des caractères.

Voici les tests de correspondance effectués dans l'étape 2, selon le descripteur :

  1. Le test sur 'font-style' est effectué en premier. La valeur 'italic' est retenue si la base de données des polices de l'agent utilisateur contient une police marquée avec les mots-clés 'italic' (préférable) ou bien 'oblique'. Autrement les valeurs doivent correspondre exactement sinon le test sur 'font-style' échoue ;
  2. Puis vient le test sur 'font-variant'. La valeur 'normal' retient une police qui n'est pas étiquetée 'small-caps'. La valeur 'small-caps' retient (1) une police marquée 'small-caps' ou (2) une police dans laquelle les petites capitales sont synthétisées ou (3) une police dont toutes les minuscules sont remplacées par des capitales. On peut synthétiser électroniquement les petites capitales en jouant sur l'échelle des capitales d'une police normale ;
  3. Le test sur 'font-weight' n'échoue jamais. (Voir 'font-weight' plus loin) ;
  4. Le résultat du test sur 'font-size' doit s'inscrire dans une marge de valeurs qui dépend de l'agent utilisateur (typiquement, la taille des polices proportionnelles est arrondie au pixel entier le plus proche alors que la tolérance sur la taille des polices fixes peut aller jusqu'à 20%). Les calculs supplémentaires (par exemple sur les valeurs exprimées en 'em' pour les autres propriétés) se basent alors sur la valeur établie pour 'font-size' et non sur la valeur qui y est spécifiée.

15.5.1 Les correspondances entre valeurs de graisse et les noms de police

Les valeurs de la propriété 'font-weight' sont données selon une échelle graduée numérique dans laquelle la valeur '400' (ou 'normal') correspond à un texte dans la police "normale" de la famille. On associe couramment à celle-ci le nom de graisse Book, Regular, Roman, Normal ou parfois Medium.

Les autres valeurs de graisse disponibles dans l'échelle numérique ne sont présentes que pour conserver une certaine graduation de la graisse dans une famille de polices. Les agents utilisateurs doivent faire correspondre leurs noms aux valeurs numériques de graisse pour préserver la variation visuelle ; une police correspondant à une valeur de graisse donnée ne doit pas apparaître moins grasse que celles qui correspondent à des valeurs plus faibles. Il n'existe aucune garantie de la façon dont un agent utilisateur va associer les polices d'une famille avec ces valeurs numériques. Voici quelques pistes qui montrent comment traiter certains cas typiques :

  • Si la famille de polices utilise déjà une échelle numérique de neuf valeurs (comme OpenType), les graisses devraient avoir une correspondance directe avec ces valeurs ;
  • S'il existe à la fois une police marquée Medium et une marquée Book, Regular, Roman ou Normal, alors on fait correspondre la Medium à '500' ;
  • La police étiquetée "Bold" correspond souvent à la valeur de graisse '700' ;
  • S'il y a moins de 9 graisses dans la famille, un algorithme par défaut peut combler les "manques" comme ceci : si '500' n'a pas de police correspondante, on fait alors correspondre cette graisse à la même police qui correspond déjà à '400'. Si une parmi les valeurs '600', '700', '800' ou '900' n'a pas de police correspondante, alors cette valeur partage la même police correspondante, si elle existe, que celle du mot-clé 'bolder', ou sinon, que celle qui correspond à 'lighter'. Si une parmi les valeurs '300', '200' ou '100' n'a pas de correspondance, alors cette valeur partage la même correspondance, si elle existe, que celle du mot-clé 'lighter', ou sinon, que celle qui correspond à 'bolder'.

L'existence d'une graisse plus épaisse pour toutes les valeurs de 'font-weight' n'est pas garantie. Par exemple, certaines familles de polices n'ont que les déclinaisons normale et grasse, d'autres peuvent en avoir huit.

Les deux exemples suivants montrent des correspondances typiques :

Supposons que la famille de polices "Rattlesnake" contienne quatre déclinaisons, leur graisse allant croissant : Regular, Medium, Bold, Heavy.
Premier exemple de correspondance avec 'font-weight'
Polices disponibles | Correspondance | En comblant les manques
"Rattlesnake Regular" | 400 | 100, 200, 300
"Rattlesnake Medium" | 500 |
"Rattlesnake Bold" | 700 | 600
"Rattlesnake Heavy" | 800 | 900

Supposons que la famille de polices "Ice Prawn" contienne six déclinaisons, leur graisse allant croissant : Book, Medium, Bold, Heavy, Black, ExtraBlack. Noter que l'agent utilisateur n'a pas établi de correspondance pour "Ice Prawn ExtraBlack".
Second exemple de correspondance avec 'font-weight'
Polices disponibles | Correspondance | En comblant les manques
"Ice Prawn Book" | 400 | 100, 200, 300
"Ice Prawn Medium" | 500 |
"Ice Prawn Bold" | 700 | 600
"Ice Prawn Heavy" | 800 |
"Ice Prawn Black" | 900 |
"Ice Prawn ExtraBlack" | (aucun) |

15.5.2 Exemples de correspondances de police

Exemple(s) :

Cet exemple définit une police particulière, Alabam Italic. On y trouve une description de police Panose et l'URI d'une ressource TrueType. Des descripteurs 'font-weight' et 'font-style' venant en complément. La déclaration précise ainsi qu'une correspondance sera atteinte pour les valeurs de graisse comprises entre 300 et 500. La famille de polices est Alabama et le nom entier de la police Alabama Italic :

@font-face {
  src: local("Alabama Italic"),
       url(http://www.15_fonts.org/A/alabama-italic) format("truetype");
  panose-1: 2 4 5 2 5 4 5 9 3 3;
  font-family: Alabama, serif;
  font-weight:   300, 400, 500;
  font-style:  italic, oblique;
}

Exemple(s) :

L'exemple suivant définit une famille de polices. Un seul URI est donné pour ramener les données de police. Ce fichier de données va contenir plusieurs styles et graisses pour la police demandée. Une fois qu'une de ces définitions @font-face aura été exécutée, ces données vont se retrouver dans le cache de l'agent utilisateur au service des autres polices partageant le même URI :

@font-face {
  src: local("Helvetica Medium"),
       url(http://www.15_fonts.org/sans/Helvetica_family) format("truedoc");
  font-family: "Helvetica";
  font-style: normal
}
@font-face {
  src: local("Helvetica Oblique"),
       url("http://www.15_fonts.org/sans/Helvetica_family") format("truedoc");
  font-family: "Helvetica";
  font-style: oblique;
  slope: -18
}

Exemple(s) :

L'exemple suivant regroupe trois polices existantes en une seule police virtuelle, celle-ci gagnant une couverture élargie. Dans chacune de ces trois déclarations, on donne le nom entier de la police au moyen du descripteur 'src', ce qui en provoquerait l'utilisation préférentielle au cas où celle-ci était disponible localement. Une quatrième règle pointe vers une police ayant la même couverture en une seule ressource :

@font-face {
  font-family: Excelsior;
  src: local("Excelsior Roman"), url("http://site/er") format("intellifont");
  unicode-range: U+??; /* Latin-1 */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont");
  unicode-range: U+100-220; /* Latin Extended A et B */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont");
  unicode-range: U+4??; /* Cyrillique */
}
@font-face {
  font-family: Excelsior;
  src: url("http://site/excels") format("truedoc");
  unicode-range: U+??,U+100-220,U+4??;
}

Exemple(s) :

L'exemple suivant pourrait faire partie de la feuille de style par défaut d'un agent utilisateur. C'est une implémentation de la famille de polices générique de CSS2 serif, réalisant une correspondance sur une grande variété de polices serifs qui existent sur diverses plates-formes. Aucunes dimensions ne sont indiquées, celles-ci variant pour chacune des alternatives :

@font-face {
  src: local("Palatino"),
      local("Times New Roman"),
      local("New York"),
      local("Utopia"),
      url("http://somewhere/free/font");
  font-family: serif;
  font-weight: 100, 200, 300, 400, 500;
  font-style: normal;
  font-variant: normal;
  font-size: all
}


Le texte

16 Le texte

  • 16.1 L'alinéa : la propriété 'text-indent'
  • 16.2 L'alignement : la propriété 'text-align'
  • 16.3 La décoration
    • 16.3.1 Trait en-dessous, trait au-dessus, rayure et clignotement : la propriété 'text-decoration'
    • 16.3.2 Les ombrages de texte : la propriété 'text-shadow' property
  • 16.4 L'interlettrage et l'espace-mot : les propriétés 'letter-spacing' and 'word-spacing'
  • 16.5 La capitalisation : la propriété 'text-transform'
  • 16.6 Les blancs : la propriété 'white-space'

Les propriétés définies ci-dessous influencent la représentation visuelle des caractères, des blancs, des mots et des paragraphes.

16.1 L'alinéa : la propriété 'text-indent'

'text-indent'
Valeur : <longueur> | <pourcentage> | inherit
Initiale : 0
S'applique à : à ceux des éléments de type bloc
Héritée : oui
Pourcentage : se rapporte à la largeur du bloc conteneur
Médias : visuel

Cette propriété spécifie un alinéa pour la première ligne du texte dans un bloc. Plus précisément, celui de la première boîte de la première rangée dans la première boîte de ligne de ce bloc. Cette boîte est indentée à partir du bord gauche (ou droit, pour une mise en page de droite à gauche) de la boîte de ligne. Les agents utilisateurs devraient représenter cette indentation comme un espace vide.

Le significations des valeurs sont :

<longueur>
L'alinéa a une longueur fixe ;
<pourcentage>
L'alinéa correspond à un pourcentage de la largeur du bloc conteneur.

La valeur de la propriété 'text-indent' peut être négative, mais ceci dépend des limites de l'implémentation. Si cette valeur est négative, la valeur de la propriété 'overflow' peut avoir une influence sur la visibilité du texte.

Exemple(s) :

Cet exemple produit un alinéa de '3em' :

  P { text-indent: 3em }

16.2 L'alignement : la propriété 'text-align'

'text-align'
Valeur : left | right | center | justify | <chaîne> | inherit
Initiale : selon l'agent utilisateur et selon le sens d'écriture
S'applique à : ceux des éléments de type bloc
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété décrit l'alignement d'un contenu en-ligne dans un élément de type bloc. Les significations des valeurs sont :

left, right, center et justify
Respectivement, l'alignement à gauche, à droite, centré et justifié d'un texte ;
<chaîne>
Spécifie une chaîne sur laquelle les cellules d'une table vont s'aligner (voir le passage sur l'alignement horizontal dans une colonne pour le détail et pour un exemple). Cette valeur ne s'applique qu'aux cellules d'une table. Appliquée à un autre élément, celle-ci sera considérée comme étant 'left' ou 'right', en fonction de la valeur de la propriété 'direction', respectivement 'ltr' ou 'rtl'.

Un pavé de texte consiste en un empilement de boîtes de ligne. Pour les valeurs 'left', 'right' et 'center', cette propriété indique la façon dont les boîtes en-ligne, dans chacune des boîtes de ligne, s'alignent par rapport aux côtés gauche et droite de ces boîtes de ligne ; l'alignement n'est pas effectué par rapport à la zone de visualisation. Pour la valeur 'justify', l'agent utilisateur peut, en plus des ajustements de position, étirer les boîtes de ligne. Voir également les propriétés 'letter-spacing' et 'word-spacing').

Exemple(s) :

Dans cet exemple, noter que tous les éléments de type bloc dans élément DIV avec la classe 'center' auront leur contenu centré, la propriété 'text-align' étant héritée :

DIV.center { text-align: center }

Remarque : L'algorithme de justification effectif dépend de l'agent utilisateur et de l'écriture.

Les agents utilisateurs conformes peuvent interpréter la valeur 'justify' comme étant 'left', ou 'right', selon que le sens d'écriture de l'élément est de gauche à droite, ou de droite à gauche.

16.3 La décoration

16.3.1 Trait en-dessous, trait au-dessus, rayure et clignotement: la propriété 'text-decoration'

'text-decoration'
Valeur : none | [ underline || overline || line-through || blink ] | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non (voir les explications)
Pourcentage : sans objet
Médias : visuel

Cette propriété décrit les décorations qui sont ajoutées au texte d'un élément. Quand la propriété est appliquée à un élément de type bloc, elle agit sur tous les descendants de type en-ligne de celui-ci. Quand elle est appliquée à un élément de type en-ligne, ou agit sur celui-ci, cette propriété influence toutes les boîtes générées par cet élément. Quand les éléments sont vides ou sans contenu textuel (ex. l'élément IMG en HTML), les agents utilisateurs doivent ignorer cette propriété.

Les significations des valeurs sont :

none
Aucune décoration ;
underline
Chaque ligne de texte est soulignée ;
overline
Chaque ligne de texte reçoit un trait au-dessus ;
line-through
Chaque ligne de texte est rayée en son milieu ;
blink
Le texte clignote (une alternance entre visible et invisible). Les agents utilisateurs conformes ne sont pas tenus de reconnaître cette valeur.

La couleur, ou les couleurs, requises pour la décoration de texte devraient être déterminées par la valeur de la propriété 'color'.

Cette propriété n'est pas héritée, cependant les boîtes qui descendent d'une boîte de bloc donnée devraient recevoir la même décoration que celle-ci (ex. toutes devraient être soulignées). La couleur de la décoration devrait être conservée, même si la valeur de la propriété 'color' des éléments descendants était différente.

Exemple(s) :

Dans cet exemple en HTML, le contenu de texte de chacun des éléments A, ceux-ci étant des liens, seront soulignés :

A[href] { text-decoration: underline }

16.3.2 Les ombrages de texte : la propriété 'text-shadow'

'text-shadow'
Valeur : none | [<couleur> || <longueur> <longueur> <longueur>? ,]* [<couleur> || <longueur> <longueur> <longueur>?] | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non (voir les explications)
Pourcentage : sans objet
Médias : visuel

Cette propriété accepte une liste de valeurs, séparés par une virgule, représentant des effets d'ombrage à appliquer au texte d'un élément. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ceux-ci ne recouvriront jamais le texte lui-même. Les effets d'ombrage ne modifient pas la taille d'une boîte, mais peuvent s'étendre au-delà des limites de celle-ci. Les effets d'ombrages se situent au même niveau dans l'empilement que l'élément en question.

Chaque effet doit spécifier un décalage de l'ombrage, et peut, en option, spécifier une zone de flou et la couleur de l'ombrage.

Le décalage de l'ombrage est donné par deux valeurs de <longueur> qui en précisent la distance par rapport au texte. La première spécifie la distance horizontale à la droite du texte, une valeur négative place l'ombrage à la gauche de celui-ci. La seconde spécifie la distance verticale en-dessous du texte, une valeur négative place l'ombrage au-dessus de celui-ci.

En option, on peut spécifier, après les valeurs de décalage de l'ombrage, celle du rayon du flou. C'est une longueur qui indique les limites de cet effet de flou. L'algorithme exact pour le calcul de cet effet n'est pas spécifié.

En option également, on peut spécifier, avant ou après les valeurs de décalage de l'ombrage, celle de la couleur de l'ombrage. Cette valeur de couleur servira de fondement pour l'effet d'ombrage. Si aucune couleur n'est indiquée, c'est la valeur de la propriété 'color' qui est considérée à sa place.

On peut employer les ombrages de texte avec les pseudo-éléments :first-letter et :first-line.

Exemple(s) :

L'exemple ci-dessous produira un ombrage à droite et en dessous du texte de l'élément. Aucune couleur ni rayon de flou ayant été spécifiés, l'ombrage prendra la couleur de l'élément en question et n'aura pas d'effet de flou :

H1 { text-shadow: 0.2em 0.2em }

Celui-ci produira un ombrage à droite et en-dessous du texte de l'élément. Cet ombrage aura un rayon de flou de 5px et de couleur rouge :

H2 { text-shadow: 3px 3px 5px red }

Dans l'exemple suivant, on spécifie une liste d'effets d'ombrage. Le premier ombrage apparaîtra à droite et en-dessous du texte, avec une couleur rouge et sans effet de flou. Le deuxième va recouvrir le premier effet d'ombrage et apparaîtra à gauche et en-dessous du texte, avec une couleur jaune et un effet de flou. Le troisième sera placé à droite et au-dessus du texte. Aucune couleur n'étant spécifiée pour celui-ci, c'est la valeur de la propriété 'color' de l'élément en question qui sera utilisée :

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Exemple(s) :

Considérons cette règle :

SPAN.glow {
    background: white;
    color: white;
    text-shadow: black 0px 0px 5px;
}

Ici, on a utilisé les propriétés 'background' et 'color' avec la même valeur, ainsi que la propriété 'text-shadow' pour créer un effet "éclipse solaire" :

Effet d'éclipse solaire. [D]

Remarque : Cette propriété n'est pas définie en CSS1. Certains effets d'ombrage (tel que celui du dernier exemple) peuvent rendre le texte invisible pour les agents utilisateurs ne reconnaissant que CSS1.

16.4 L'interlettrage et l'espace-mot : les propriétés 'letter-spacing' et 'word-spacing'

'letter-spacing'
Valeur : normal | <longueur> | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété précise le comportement de l'espacement entre les caractères du texte. Les significations des valeurs sont :

normal
C'est l'espacement normal pour la police en question. Cette valeur permet à l'agent utilisateur la modification de l'interlettrage pour la justification d'un texte ;
<longueur>
Cette valeur indique la quantité d'espacement qui s'ajoute à l'interlettrage par défaut. Celle-ci peut être négative, son interprétation dans les limites de l'implémentation. Pour un texte à justifier, les agents utilisateurs peuvent ne plus pouvoir augmenter ou diminuer l'interlettrage.

Les algorithmes d'interlettrage dépendent des agents utilisateurs. La justification peut aussi avoir une influence sur l'interlettrage (voir la propriété 'text-align').

Exemple(s) :

Dans cet exemple, l'interlettrage des éléments BLOCKQUOTE est augmenté de 'O.1em' :

BLOCKQUOTE { letter-spacing: 0.1em }

Dans celui-ci, l'agent utilisateur ne peut pas en modifier l'interlettrage :

BLOCKQUOTE { letter-spacing: 0cm }   /* Pareil à '0' */

Quand l'interlettrage résultant entre deux caractères est différent de celui par défaut, les agents utilisateurs ne devraient pas utiliser de ligatures.

Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'letter-spacing' comme étant 'normal'.

'word-spacing'
Valeur : normal | <longueur> | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété précise le comportement de l'espacement entre des mots. Les significations des valeurs sont :

normal
L'espace-mot normal, tel que défini par la police en question et/ou l'agent utilisateur ;
<longueur>
Cette valeur indique la quantité d'espacement qui s'ajoute à l'espace-mot par défaut. Les valeurs peuvent être négatives, leur interprétation dans les limites de l'implémentation.

Les algorithmes d'espace-mot dépendent de l'agent utilisateur. La justification peut aussi avoir une influence sur l'espacement entre les mots (voir la propriété 'text-align').

Exemple(s) :

Dans cet exemple, l'espace-mot entre chacun des mots des éléments H1 est augmenté de '1em' :

H1 { word-spacing: 1em }

Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'word-spacing' comme étant 'normal'.

16.5 La capitalisation : la propriété 'text-transform'

'text-transform'
Valeur : capitalize | uppercase | lowercase | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété détermine les effets de capitalisation du texte d'un élément. Les significations des valeurs sont :

capitalize
La première lettre de chaque mot est en majuscule ;
uppercase
Les lettres de chacun des mots sont en majuscules ;
lowercase
Les lettres de chacun des mots sont en minuscules ;
none
Aucun effet de capitalisation.

Dans chaque cas, la transformation effective dépend de l'écriture de la langue en question. Voir RFC 2070 ([RFC2070]) pour la détermination de la langue utilisée dans un élément.

Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'text-transform' comme étant 'none', pour les caractères n'appartenant pas au répertoire Latin-1 et pour les éléments dans certaines langues, langues pour lesquelles la transformation serait différente de celle spécifiée dans les tables de conversion de ISO 10646 ([ISO10646]).

Exemple(s) :

Dans cet exemple, l'ensemble du texte des éléments H1 est transformé en capitales :

H1 { text-transform: uppercase }

16.6 Les blancs : la propriété 'white-space'

'white-space'
Valeur : normal | pre | nowrap | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété détermine la gestion des blancs dans un élément.

normal
Cette valeur enjoint aux agents utilisateurs de fusionner les séquences de blancs et d'effectuer des retours à la ligne de manière appropriée pour remplir les boîtes de ligne. Dans un contenu généré, les survenues de la séquence de caractères "\A" peuvent produire d'autres retours à la ligne (ex. comme l'élément BR en HTML) ;
pre
Cette valeur interdit aux agents utilisateurs la fusion des séquences de blancs. Les retours à la ligne n'interviennent qu'aux endroits des caractères "nouvelle ligne" de la source, ou aux survenues de la séquence "\A" dans un contenu généré ;
nowrap
Cette valeur provoque la fusion des blancs comme pour 'normal' mais supprime les retours à la ligne d'un texte, sauf les retours à la ligne induits par la séquence "\A" dans un contenu généré (ex. comme l'élément BR en HTML).

Exemple(s) :

Les règles suivantes indiquent comment sont gérés les blancs dans les éléments PRE et P, ainsi que pour l'attribut "nowrap" de HTML :

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

Les agents utilisateurs conformes peuvent ignorer la propriété 'white-space' des feuilles de style de l'auteur et de l'utilisateur, mais pas dans la feuille de style par défaut où une valeur doit être spécifiée pour celle-ci.


Les tables

17 Les tables

  • 17.1 Introduction aux tables
  • 17.2 Le modèle de table de CSS
    • 17.2.1 Les objets de table anonymes
  • 17.3 Les sélecteurs de colonne
  • 17.4 Les tables dans le modèle de mise en forme visuel
    • 17.4.1 La position et l'alignement de la légende
  • 17.5 La disposition visuelle des contenus de la table
    • 17.5.1 Les couches de la table et la transparence
    • 17.5.2 Les algorithmes de largeur de table : la propriété 'table-layout'
      • La disposition de table fixe
      • La disposition de table automatique
    • 17.5.3 Les algorithmes de la hauteur de table
    • 17.5.4 L'alignement horizontal dans une colonne
    • 17.5.5 Les effets dynamiques des rangées et colonnes
  • 17.6 Les bordures
    • 17.6.1 Le modèle des bordures séparées
      • Les bordures autour des cellules vides : la propriété 'empty-cells'
    • 17.6.2 Le modèle des bordures fusionnées
      • La résolution des conflits de bordure
    • 17.6.3 Les styles de bordure
  • 17.7 Le rendu auditif des tables
    • 17.7.1 Les en-têtes parlées: la propriété 'speak-header'

17.1 Introduction aux tables

Les tables sont une représentation des relations entre des données. Les auteurs précisent ces relations dans le langage du document et précisent la représentation de celles-ci de deux manières, l'une visuelle et l'autre auditive.

Les auteurs peuvent spécifier la mise en forme d'une table sous la forme d'un quadrillage de cellules. Les rangées et les colonnes de cellules peuvent s'organiser en groupes de rangées et en groupes de colonnes. Ces rangées, colonnes, groupes de rangées, groupes de colonnes et cellules peuvent recevoir des bordures dessinées autour d'eux (en CSS2, selon deux modèles de bordures). Les auteurs peuvent aligner les données ,dans un sens vertical ou horizontal, dans la cellule ou dans toutes les cellules d'une rangée ou d'une colonne.

Les auteurs peuvent aussi spécifier le rendu auditif d'une table, comment les en-têtes et les donnés seront dites. Dans le langage du document, ceux-ci peuvent étiqueter des cellules ou des groupes de cellules, quand il s'agit d'un rendu auditif, pour que les cellules d'en-tête soit dites avant celles des données. Dans les faits, ceci "sérialise" la table : les utilisateurs consultant de façon auditive la table entendent la séquence d'en-têtes suivie par celle des données.

Exemple(s) :

Voici, décrit en HTML 4.0, une table simple de trois rangées par trois colonnes :

<TABLE>
<CAPTION>Voici une table simple en 3x3</CAPTION>
<TR id="rangee1">
   <TH>En-tête 1      <TD>Cellule 1        <TD>Cellule 2
<TR id="rangee2">
   <TH>En-tête 2      <TD>Cellule 3        <TD>Cellule 4
<TR id="rangee3">
   <TH>En-tête 3      <TD>Cellule 5        <TD>Cellule 6
</TABLE>

Ce code crée une table (l'élément TABLE), trois rangées (les éléments TR), trois cellules d'en-tête (les élément TH) et six cellules de données (les éléments TD). Noter que, dans l'exemple, les trois colonnes sont implicites : il y en a autant dans la table que l'en-tête et les cellules de donnés le demandent.

Cette règle CSS centre le texte horizontalement dans les cellules d'en-tête et applique un style gras à celles de données :

TH { text-align: center; font-weight: bold }

La règle suivante aligne le texte des cellules d'en-tête sur leur ligne de base et centre verticalement le texte de chacune des cellules de données :

TH { vertical-align: baseline }
TD { vertical-align: middle }

Cette règle-ci spécifie une bordure en trait plein bleu épais de 3px autour de la première rangée et un trait plein noir épais de 1px autour des rangées suivantes :

TABLE      { border-collapse: collapse }
TR#rangee1 { border-top: 3px solid blue }
TR#rangee2 { border-top: 1px solid black }
TR#rangee3 { border-top: 1px solid black }

Noter, cependant, que les bordures autour des rangées se recouvrent quand celles-ci se rencontrent. De quelle couleur (noir ou bleu) et de quelle épaisseur (1px ou 3px) seront les bordures entre rangee1 et rangee2 ? Ce point est abordé dans le passage traitant de la résolution des conflits de bordure.

Dans cette règle, la légende est placée au-dessus de la table :

CAPTION { caption-side: top }

Et enfin, cette règle-ci indique, en cas de rendu auditif, que chaque rangée de données soit lue selon le schéma "En-tête, Données, Données" :

TH { speak-header: once }

Par exemple, la première rangée serait dite "En-tête, Cellule1, Cellule2". Par contre, avec cette règle :

TH { speak-header: always }

la première rangée serait dite "En-tête1 Cellule1 En-tête1 Cellule2".

L'exemple précédent montre l'action de CSS avec des éléments de HTML 4.0 ; dans cette spécification, la sémantique des divers éléments des tables (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH et TD) est bien définie. Pour d'autres langages de document (tel que les applications XML), ces éléments ne sont pas forcément prédéfinis. C'est pourquoi, CSS2 permet aux auteurs de "faire correspondre" les éléments du langage d'un document avec ceux des tables via la propriété 'display'. Par exemple, dans la règle suivante, l'élément FOO se comporte comme un élément TABLE de HTML et l'élément BAR comme un élément CAPTION :

FOO { display : table }
BAR { display : table-caption }

Les divers éléments des tables sont abordés dans le chapitre qui suit. Dans cette spécification, le terme élément de table se réfère à tout élément impliqué dans la création d'une table. Un élément de table "interne" est un de ceux qui produisent une rangée, un groupe de rangées, une colonne, un groupe de colonnes ou une cellule.

17.2 Le modèle de table de CSS

Le modèle de table de CSS se fonde sur celui de HTML 4.0, dans lequel la structure d'une table participe étroitement et parallèlement avec la disposition visuelle de cette table. Dans ce modèle, une table consiste en une légende facultative et un nombre quelconque de rangées de cellules. On dit que celui-ci est "prioritaire aux rangées", les auteurs spécifiant des rangées explicitement dans le langage du document, et non des colonnes. Les colonnes se déduisent une fois que les rangées ont été spécifiées (la première cellule de chacune des rangées font partie de la première colonne, la deuxième cellule de la deuxième colonne, etc.). On peut regrouper structurellement les rangées et les colonnes, la présentation reflétant ce regroupement (ex. une bordure peut être dessinée autour d'un groupe de rangées).

C'est ainsi que les tables, les légendes, les rangées, les groupes de rangées, les colonnes, les groupes de colonnes et les cellules composent le modèle de table.

Le modèle de table CSS ne requiert pas du langage du document que celui-ci comporte des éléments correspondants à chacun de ces composants. Pour les langages de document (tels que les applications XML) qui n'ont pas d'éléments de table prédéfinis, les auteurs doivent faire correspondre les éléments de ces langages avec ces éléments des tables, et ceci avec l'aide de la propriété 'display'. Les valeurs suivantes de 'display' adjoignent une sémantique de table à un élément arbitraire :

table (TABLE en HTML)
Spécifie un comportement de table de type bloc pour un élément : c'est un bloc rectangulaire qui participe à un contexte de mise en forme de bloc ;
inline-table (TABLE en HTML)
Spécifie un comportement de table de type en-ligne pour un élément : c'est un bloc rectangulaire qui participe à un contexte de mise en forme en-ligne ;
table-row (TR en HTML)
Spécifie que l'élément est une rangée de cellules ;
table-row-group (TBODY en HTML)
Spécifie qu'un élément regroupe une ou plusieurs rangées ;
table-header-group (THEAD en HTML)
Comme pour 'table-row-group', cependant, pour une mise en forme visuelle, ce groupe de rangées est toujours affiché avant toutes les autres rangées et groupes de rangées et après une éventuelle légende en position supérieure. Les agents utilisateurs d'impression peuvent répéter les rangées d'en-tête sur chacune des pages sur lesquelles s'étendrait une table ;
table-footer-group (TFOOT en HTML)
Comme pour 'table-row-group', cependant, pour une mise en forme visuelle, ce groupe de rangées est toujours affiché après toutes les autres rangées et groupes de rangées, et avant une éventuelle légende en position inférieure. Les agents utilisateurs d'impression peuvent répéter les rangées de pied sur chacune des pages sur lesquelles s'étendrait une table ;
table-column (COL en HTML)
Spécifie qu'un élément représente une colonne de cellules ;
table-column-group (COLGROUP en HTML)
Spécifie qu'un élément regroupe une ou plusieurs colonnes ;
table-cell (TD ou TH en HTML)
Spécifie qu'un élément représente une cellule de table ;
table-caption (CAPTION en HTML)
Spécifie la légende d'une table.

Les éléments dont la valeur de la propriété 'display' est 'table-column' ou 'table-column-group' ne sont pas rendus (exactement comme si celle-ci avait été 'none'), mais ceux-ci ont une certaine utilité, leurs attributs pouvant donner éventuellement un certain style aux colonnes que ceux-ci définissent.

La feuille de style par défaut pour HTML 4.0 en appendice montre l'utilisation de ces valeurs :

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

Les agents utilisateurs peuvent ignorer ces valeurs de la propriété 'display' pour des documents HTML, car les auteurs ne devraient pas modifier le comportement attendu pour un élément.

17.2.1 Les objets de table anonymes

Chaque élément table va automatiquement générer des objets de table anonymes autour de lui-même, ceux-ci consistent d'au moins trois objets imbriqués qui correspondent aux éléments avec la valeur 'table' ou 'inline-table, avec la valeur 'table-row' et avec la valeur 'table-cell'.

Des langages de document autres que HTML peuvent ne pas contenir tous les éléments du modèle de table de CSS2. Pour ceux-ci, on doit supposer l'existence des éléments "absents" pour que le modèle puisse fonctionner. Ces éléments absents génèrent des objets anonymes (par exemple des boîtes anonymes dans la mise en forme de la table) selon les règles suivantes :

  1. Quand le parent, noté P, d'un élément 'table-cell', noté T, n'est pas un élément 'table-row', un objet correspondant à ce dernier sera généré entre P et T. Cette objet recouvrira l'ensemble des éléments 'table-cell' consécutifs de T de même ascendance (dans l'arbre du document) ;
  2. Quand le parent P d'un élément 'table-row' T n'est pas un élément 'table', 'inline-table' ou 'table-row-group', un objet correspondant à un élément 'table' sera généré entre P et T. Cette objet recouvrira l'ensemble des éléments 'table-row' consécutifs de T de même ascendance (dans l'arbre du document), ceux-ci requérant un parent 'table', à savoir 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' et 'caption' ;
  3. Quand le parent P d'un élément 'table-column' n'est pas un élément 'table' T, 'inline-table' ou 'table-column-group', un objet correspondant à un élément 'table' sera généré entre P et T. Cet objet recouvrira l'ensemble des éléments 'table-column' consécutifs de T de même ascendance (dans l'arbre du document), ceux-ci requérant un parent 'table', à savoir 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' et 'table-caption' ;
  4. Quand le parent P d'un élément 'table-row-group' (ou 'table-header-group' ou 'table-footer-group') T n'est pas un élément 'table' ou 'inline-table', un objet correspondant à un élément 'table' est généré entre P et T. Cet objet recouvrira l'ensemble des éléments consécutifs de T de même ascendance (dans l'arbre du document), ceux-ci requérant un parent 'table', à savoir 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' et 'caption' ;
  5. Quand un enfant T d'un élément 'table (ou 'inline-table') P n'est pas un élément 'table-row-group', 'table-header-group', 'table-footer-group' ou 'table-row', un objet correspondant à un élément 'table-row' sera généré entre P et T. Cet objet recouvrira l'ensemble des éléments consécutifs de T de même ascendance, ceux-ci n'étant pas des éléments 'table-row-group', 'table-header-group', 'table-footer-group' ou 'table-row' ;
  6. Quand un enfant T d'un élément 'table-row-group' (ou 'table-header-group' ou 'table-footer-group') P n'est pas un élément 'table-row', un objet correspondant à un élément 'table-row' sera généré entre P et T. Cet objet recouvrira l'ensemble des éléments consécutifs de T de même ascendance, ceux-ci n'étant pas des éléments 'table-row' ;
  7. Quand un enfant T d'un élément 'table-row' P n'est pas un élément 'table-cell', un objet correspondant à un élément 'table-cell' sera généré entre P et T. Cet objet recouvrira l'ensemble des éléments consécutifs de T de même ascendance, ceux-ci n'étant pas des éléments 'table-cell'.

Exemple(s) :

Dans cet exemple en XML, on suppose qu'un élément 'table' contient l'élément HBOX :

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

la feuille de style qui lui est associée étant :

HBOX { display: table-row }
VBOX { display: table-cell }

Example(s) :

Dans cet exemple-ci, on suppose que trois éléments 'table-cell' contiennent les textes des éléments ROW. Noter que le texte est à son tour encapsulé dans des boîtes de ligne anonymes, ainsi que c'est expliqué dans le modèle de mise en forme visuel :

<STACK>
  <ROW>Voici la rangée du <D>haut</D>.</ROW>
  <ROW>Voici la rangée du <D>milieu</D>.</ROW>
  <ROW>Voici la rangée du <D>bas</D>.</ROW>
</STACK>

la feuille de style associée étant :

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }

Les agents utilisateurs HTML ne sont pas tenus de créer des objets anonymes selon les règles précitées.

17.3 Les sélecteurs de colonne

Les cellules des tables peuvent appartenir à l'un ou l'autre de ces contextes, celui de rangée et celui de colonne. Cependant, dans le document source, les cellules sont des descendants de rangées, et jamais de colonnes. Néanmoins, certains aspects des cellules peuvent être influencés par des propriétés appliquées aux colonnes.

Ces propriétés s'appliquent aux éléments des colonnes et de groupes de colonnes :

'border'
Les diverses propriétés de bordure ne s'appliquent aux colonnes que si la valeur de la propriété 'border-collapse' de l'élément table est 'collapse'. Dans ce cas, les bordures appliquées aux colonnes et groupes de colonnes sont soumises à l'algorithme de résolution de conflit qui va déterminer le style de ces bordures à chacun des bords des cellules ;
'background'
Les propriétés d'arrière-plan s'applique aux fonds des cellules de la colonne, mais seulement si les cellules et rangées concernées ont des fonds transparents. Voir le passage intitulé "Les couches de la table et la transparence" ;
'width'
La propriété 'width' donne la largeur minimale de la colonne ;
'visibility'
Quand la propriété 'visibility' d'une colonne a la valeur 'collapse', aucunes des cellules de la colonne n'est rendue et celles des cellules qui déborderaient dans d'autres colonnes sont rognées. De plus, la largeur de la table est diminuée de celle de la colonne qui aurait autrement été affichée. Voir le passage traitant des effets dynamiques plus loin. Les autres valeurs admises pour la propriété 'visibility' n'ont pas d'effet.

Example(s) :

Voici quelques exemples de règles de style appliquant des propriétés aux colonnes. Les deux premières prises ensemble reproduisent l'attribut "rules" de HTML avec la valeur "cols". La troisième règle rend la colonne avec la classe "total" en bleu, les deux dernières montrent la façon de construire une colonne de taille fixe à l'aide de l'algorithme de disposition fixe.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.total { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

17.4 Les tables dans le modèle de mise en forme visuel

Selon le modèle de mise en forme visuel, une table peut se comporter comme un élément de type bloc ou comme un élément remplacé de type en-ligne. Les tables ont un contenu, un espacement, des bordures et des marges.

Dans ces deux cas, l'élément table génère une boîte anonyme, celle-ci contient la boîte de la table elle-même et celle de la légende (si elle existe). Les boîtes de la table et de la légende conservent leurs propres aires de contenu, d'espacement, de marge et de bordure, les dimensions de la boîte anonyme rectangulaire étant juste suffisantes pour contenir celles-ci. Les marges verticales en contact entre la boîte de la table et celle de la légende fusionnent. Tout repositionnement de la table doit concerner la boîte anonyme entière, et pas seulement la boîte de la table, la légende suivant ainsi la table.

Une table et sa légende au-dessus, les deux ont des marges, celles en contact ont fusionné comme pour les marges verticales normales. [D]

Schéma d'une table avec une légende supérieure, la marge du bas de la légende fusionne avec celle du haut de la table.

17.4.1 La position et l'alignement de la légende

'caption-side'
Valeur : top | bottom | left | right | inherit
Initiale : top
S'applique à : ceux des éléments 'table-caption'
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Cette propriété indique la position de la boîte de la légende en fonction de celle de la table. Les significations des valeurs sont :

top
Place la boîte de la légende au-dessus de celle de la table ;
bottom
Place la boîte de la légende au-dessous de celle de la table ;
left
Place la boîte de la légende à gauche de celle de la table ;
right
Place la boîte de la légende à droite de celle de la table.

Les légendes au-dessus d'un élément avec une valeur 'table', ou au-dessous celui-ci, sont mises en forme un peu de la même manière que pour un élément de type bloc avant la table, ou après celle-ci, à la différence que les légendes (1) héritent des propriétés de la table et (2) ne sont pas considérées comme étant des boîtes de bloc pour les éléments précédant la table, quand les propriétés 'display' de ceux-ci ont les valeurs 'compact' ou 'run-in'.

Pour une légende située au-dessus ou en-dessous de la boîte de la table, celle-ci se comporte aussi comme une boîte de bloc pour les calculs de largeur, ces calculs étant effectués par rapport à la largeur du bloc conteneur de la boîte de la table.

Pour une légende située à gauche ou à droite de la boîte de la table, d'autre part, c'est la valeur spécifiée pour la propriété 'width' quand la valeur est autre que 'auto', qui donne la largeur, une valeur 'auto' indiquant à l'agent utilisateur de prendre une "largeur raisonnable". Ceci variant de "la boîte la plus étroite possible" jusqu'à "une ligne seule", c'est pourquoi on recommande aux utilisateurs d'éviter de choisir une valeur 'auto' pour les largeurs des légendes latérales.

Pour aligner horizontalement le contenu dans la boîte de la légende, utiliser la propriété 'text-align'. Pour aligner verticalement les boîtes des légendes latérales par rapport à celle de la table, utiliser la propriété 'vertical-align'. Dans ce cas, les seules valeurs reconnues sont 'top', 'middle' et 'bottom'. Les autres valeurs admises par cette propriété sont considérées comme étant 'top'.

Example(s) :

Dans cet exemple, la propriété 'caption-side' place la légende sous la table. Cette légende sera aussi large que le parent de la table et le contenu de celle-ci sera justifié à gauche :

CAPTION { caption-side: bottom;
          width: auto;
          text-align: left }

Exemple(s) :

L'exemple suivant montre comment placer une légende dans la marge de gauche. La table elle-même est centrée, ses marges gauche et droite ayant la valeur 'auto', et l'ensemble de la boîte contenant la table et la légende est déplacé dans la marge de gauche de la même quantité que la largeur de la légende :

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

En supposant que la largeur de la table est inférieure à la largeur totale disponible, la mise en forme serait similaire à celle-ci :

Une table au centre avec une légend dans la marge gauche de la page. [D]

Schéma montrant une table centrée dont la légende se répand dans la marge de gauche, en réponse à la valeur négative d'une propriété 'margin-left'.

17.5 La disposition visuelle des contenus de la table

Comme pour les autres éléments du langage du document, les éléments internes de la table génèrent des boîtes rectangulaires avec un contenu et des bordures. Les cellules ont aussi un espacement. Les éléments internes de la table n'ont pas de marges.

La disposition visuelle de ces boîtes est régie par un quadrillage rectangulaire irrégulier de rangées et de colonnes. Chacune des boîtes occupe la totalité des cellules du quadrillage, selon les règles ci-après. Ces règles ne s'appliquent pas à HTML 4.0 ni aux versions précédentes de HTML, les étendues des rangées et colonnes obéissant ayant des limites propres à HTML.

  1. Chacune des boîtes des rangées occupe une rangée de cellules du quadrillage. Les boîtes des rangées remplissent ensemble la table, allant du haut vers le bas, dans l'ordre où celles-ci surviennent dans le document source (ex. la table occupe exactement autant de rangées du quadrillage qu'il y a d'éléments de rangées) ;
  2. Un groupe de rangées occupe les mêmes cellules du quadrillage que les rangées contenues par celui-ci.
  3. Une boîte de colonne occupe une ou plusieurs colonnes de cellules du quadrillage. Les boîtes des colonnes se placent l'une à côté de l'autre, dans l'ordre où celles-ci surviennent. La première d'entre elles peut se trouver à gauche ou à droite, en fonction de la valeur de la propriété 'direction' de la table.
  4. Un groupe de colonnes occupe les mêmes cellules du quadrillage que les colonnes contenues par celui-ci.
  5. Les cellules peuvent s'étendre sur plusieurs rangées ou colonnes. Bien que CSS2 ne définisse pas comment est déterminé le nombre de rangées ou colonnes qui s'étendent, un agent utilisateur peut avoir une connaissance particulière du document source ; une version ultérieure de CSS pourrait en exprimer la manière dans une syntaxe propre à CSS. Ainsi chaque cellule a la forme d'une boîte rectangulaire, dont la largeur et la hauteur englobe une ou plusieurs cellules du quadrillage. La rangée du haut de ce rectangle commence dans celle spécifiée par le parent de la cellule. Le rectangle doit se trouver le plus possible à gauche, sans recouvrir une quelconque autre boîte de cellule, et doit se trouver le plus possible à la droite des cellules de la même rangée qui apparaissent plus tôt dans le document source. Ceci quand la valeur de la propriété 'direction' de la table est 'ltr', et a contrario, quand la valeur de cette propriété est 'rtl', inverser les mots "gauche" et "droite" dans la phrase précédente.
  6. Une boîte de cellule ne peut pas s'étendre au-delà de la dernière boîte de rangée d'une table ou d'un groupe de rangées, les agents utilisateurs doivent en réduire les dimensions jusqu'à ce que celle-ci puisse y tenir.

Remarque : On peut positionner les cellules d'une table, mais ce n'est pas recommandé, car les positionnements absolu et fixe, comme le flottement, soustraient la boîte en question du flux normal, affectant ainsi la taille de la table.

Voici deux exemples, le premier intervenant dans un document HTML :

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

La seconde table est mise en forme selon l'illustration de droite. En HTML, le rendu de la table du premier exemple n'est pas défini explicitement, et en CSS pas du tout. Cette appréciation est laissée à l'agent utilisateur (ex. comme dans l'illustration de gauche).

Une table avec des cellules qui se chevauchent, sauf une. [D]

À gauche, une interprétation possible d'une table HTML 4.0 erronée ; à droite, la seule mise en forme possible d'une table non-HTML similaire.

17.5.1 Les couches de la table et la transparence

Dans le but de déterminer l'arrière-plan de chacune des cellules de la table, on peut se représenter les divers éléments de celle-ci comme étant disposés sur six couches superposées. L'arrière-plan d'un élément d'une couche donnée ne sera visible que si la couche qui vient par-dessus celle-ci a un arrière-plan transparent.

Schéma des couches de la table. [D]

Schéma des couches d'une table.

  1. La couche la plus basse, qui forme un seul plan, représente la boîte de la table elle-même. Comme pour toutes les boîtes, celle-ci peut être transparente ;

  2. La couche suivante contient les groupes de colonnes. Ceux-ci sont aussi haut que la table, mais ne recouvrent pas nécessairement la table entière horizontalement ;

  3. Par-dessus les groupes de colonnes viennent les aires représentant les boîtes des colonnes. Comme pour les groupes de colonnes, les colonnes sont aussi haute que la table mais ne recouvrent pas nécessairement la table entière horizontalement ;

  4. Ensuite vient la couche contenant les groupes de rangées. Chaque groupe de rangées est aussi large que la table. L'ensemble des groupes de rangées recouvre complètement la table de haut en bas ;

  5. La couche suivante contient les rangées. Celles-ci recouvrent également la table en entier ;

  6. La couche supérieure contient les cellules elles-mêmes. Ainsi que le montre l'illustration, et bien que les rangées contiennent le même nombre de cellules, certaines cellules peuvent n'avoir aucun contenu. Ces cellules "vides" sont transparentes quand la valeur de leur propriété 'empty-cells' est 'hide'.

Dans l'exemple suivant, la première rangée contient quatre cellules, mais la seconde ne contient aucune cellule, ainsi l'arrière-plan de la table est visible au travers de celles-ci, sauf là où une des cellules de la première rangée s'étend dans la seconde rangée. Soit le code HTML et les règles de style :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1
        <TD rowspan="2"> 2
        <TD> 3
        <TD> 4
      </TR>
      <TR><TD></TD></TR>
    </TABLE>
  </BODY>
</HTML>

ceci pourrait être mis en forme ainsi :

Table avec trois cellules vides dans la rangée du bas. [D]

Une table avec trois cellules vides dans la rangée du bas.

Noter que pour 'border-collapse: separate', l'arrière-plan de l'aire donnée par la propriété 'border-spacing' est toujours celui de l'élément table. Voir 17.6.1.

17.5.2 Les algorithmes de largeur de table : la propriété 'table-layout'

CSS ne définit pas de disposition "optimale" pour les tables dans la mesure où, pour de nombreux cas, ce qui est optimal est une question de goût. Par contre, CSS définit certaines contraintes que les agents utilisateurs doivent respecter pour la disposition d'une table. Ceux-ci peuvent employer l'algorithme de leur choix et sont libres de favoriser la rapidité du rendu sur la précision, sauf quand on sélectionne celui dit "algorithme de disposition fixe".

Noter que les règles décrites dans ce chapitre surclassent celles pour le calcul des largeurs du chapitre 10.3. En particulier, si pour la table les valeurs des marges sont '0' et celle de la largeur 'auto', la table ne prendra pas automatiquement la taille nécessaire pour remplir son bloc conteneur. Cependant, une fois que la valeur calculée pour 'width' est trouvée (à l'aide des algorithmes décrits plus bas ou, quand c'est approprié, par un algorithme propre à un certain agent utilisateur), les autres parties du chapitre 10.3 s'appliquent toujours. Ainsi, par exemple, on peut centrer une table en spécifiant une valeur 'auto' pour ses marges gauche et droite.

'table-layout'
Valeur : auto | fixed | inherit
Initiale : auto
S'applique à : ceux des éléments dont la valeur de la propriété 'display' est 'table' ou 'inline-table'
Héritée : non
Pourcentage : sans objet
Médias : visuel

La propriété 'table-layout' contrôle l'algorithme employé pour la disposition des cellules, des rangées et des colonnes de la table. Les significations des valeurs sont :

fixed
Utilisation de l'algorithme de disposition de table fixe ;
auto
Utilisation d'un quelconque algorithme automatique pour la disposition de la table.

Les deux algorithmes sont décrits ci-dessous.

La disposition de table fixe

Avec cet algorithme (rapide), la disposition horizontale de la table ne dépend pas du contenu des cellules, mais seulement de la largeur de la table, de la largeur des colonnes, des bordures et de l'espacement entre les cellules.

On peut spécifier explicitement la largeur de la table avec la propriété 'width'. Une valeur 'auto' (dans le cas de 'display: table' et 'display: inline-table') conduit à l'emploi de l'algorithme de disposition de table automatique.

Dans l'algorithme de disposition de table fixe, la largeur de chacune des colonnes est déterminée ainsi :

  1. Quand un élément de colonne a une valeur pour la propriété 'width' autre que 'auto', alors cette valeur est retenue pour la largeur de cette colonne ;
  2. Autrement, quand une cellule de la première rangée a une valeur pour la propriété 'width' autre que 'auto', cette valeur est retenue pour la largeur de cette colonne. Si cette cellule s'étend sur plus d'une colonne, la largeur est divisées entre les colonnes concernées ;
  3. Les éventuelles colonnes restantes se partagent équitablement l'espace horizontal restant de la table (moins les bordures et l'espacement entre les cellules).

Ainsi la largeur de la table est la plus grande des valeurs entre celle de la propriété 'width' de l'élément table et la somme des largeurs des colonnes (plus l'espacement entre les cellules et les bordures).

De cette façon, l'agent utilisateur peut commencer à afficher la table dès la réception de la première rangée effectuée. Les cellules des rangées suivantes n'affectent pas les largeurs des colonnes. Toute cellule dont le contenu déborderait s'appuie sur la propriété 'overflow' pour déterminer le rognage, ou non, du contenu qui a débordé.

La disposition de table automatique

Avec cet algorithme (qui ne demande généralement pas plus de deux itérations), la largeur de la table est donnée par celles de ses colonnes et des bordures intermédiaires. Cet algorithme reflète le comportement de plusieurs agents utilisateurs courants au moment de la rédaction de cette spécification. Les agents utilisateurs ne sont pas tenus de l'implémenter pour la détermination de la disposition de la table, dans le cas où la valeur de la propriété 'table-layout' est 'auto', et peuvent alors employer un algorithme quelconque.

Cet algorithme peut être inefficace, l'agent utilisateur devant avoir connaissance du contenu entier de la table avant de déterminer la disposition finale, et demander plus d'une itération.

On détermine les largeurs des colonnes comme ceci :

  1. Calculer la largeur minimale du contenu, notée LMC, de chaque cellule : le contenu mis en forme peut s'étendre sur un nombre indifférent de lignes mais ne doit pas déborder de la boîte de la cellule. Si la valeur, notée L, spécifiée pour la propriété 'width' de la cellule est plus grande que LMC, alors cette valeur L devient la largeur minimale de la cellule. Pour une valeur L de la propriété 'width' égale à 'auto', c'est LMC qui correspond à la largeur minimale de la cellule ;

    Calculer également la largeur "maximale" de la cellule pour chaque cellule : la mise en forme du contenu se fait alors sans retours à la ligne sinon aux endroits explicitement indiqués ;

  2. Pour chacune des colonnes, déterminer une largeur minimale et maximale à partir des cellules qui s'étendent dans celle-ci. La largeur minimale correspond à celle de la cellule qui demande la plus grande largeur minimale de cellule (ou à la valeur de la propriété 'width' de la colonne, la plus grande entre ces deux valeurs l'emporte). La largeur maximale correspond à celle de la cellule qui demande la plus grande largeur maximale de cellule (ou à la valeur de la propriété 'width' de la colonne, la plus grande entre ces deux valeurs l'emporte) ;
  3. Pour chacune des cellules qui s'étendent sur plus d'une colonne, augmenter les largeurs minimales des colonnes concernées de manière à ce que leur réunion soit aussi large que la cellule en question. Même chose pour leurs largeurs maximales. Si possible, élargir approximativement ces colonnes d'une même quantité.

Ceci fournit une largeur minimale et maximale pour chaque colonne. Les largeurs des colonnes agissent sur la largeur finale de la table ainsi :

  1. Quand la valeur L spécifiée pour la propriété 'width' d'un élément 'table', ou 'inline-table', est autre que 'auto', alors la valeur calculée pour cette propriété correspond à celle la plus grande entre L et la largeur minimale requise par l'ensemble des colonnes plus l'espacement entre les cellules et les bordures, cette valeur étant notée MIN. Si L est plus grand que MIN, la différence de largeur devrait être répartie entre les colonnes ;
  2. Quand, pour un élément 'table' ou 'inline-table', la valeur spécifiée pour 'width' est 'auto', la largeur calculée pour la table correspond à la largeur la plus grande entre celle du bloc conteneur de la table et MIN. Cependant, si la largeur maximale requise par les colonnes plus l'espacement entre les cellules et les bordures, cette valeur étant notée MAX, est inférieure à celle du bloc conteneur, alors utiliser MAX ;

Une valeur en pourcentage pour la largeur d'une colonne s'entend relativement à la largeur de la table. Quand la valeur de la propriété 'width' de la table est 'auto', un pourcentage exerce une contrainte sur la largeur de la colonne, ce qu'un agent utilisateur devrait essayer de résoudre (ceci n'est évidemment pas toujours possible, par exemple, si la largeur de la colonne était 110%, la contrainte ne pourrait pas être respectée).

Remarque : Avec cet algorithme, les rangées (et groupes de rangées) et les colonnes (et groupes de colonnes) à la fois contraignent et sont tributaires des dimensions des cellules qui y sont contenues. La spécification de la largeur d'une colonne peut avoir une influence indirecte sur la hauteur d'une rangée, et inversement.

17.5.3 Les algorithmes de la hauteur de table

La hauteur d'une table est donnée par la propriété 'height' de l'élément 'table' ou 'inline-table'. Pour une valeur 'auto' de celle-ci, la hauteur correspond à la somme des hauteurs des rangées plus les éventuels espacements entre les cellules et les bordures. Toute autre valeur indique une hauteur explicite, la table peut ainsi plus haute, ou moins haute, que la hauteur totale des rangées. CSS2 ne précise pas les modalités de rendu quand la hauteur spécifiée pour la table diffère de celle de son contenu, en particulier si la hauteur du contenu devait prendre le pas sur celle spécifiée, et sinon, comment l'espace supplémentaire devrait être réparti entre les rangées dont le total des hauteurs est inférieur à la hauteur de la table, ou encore, quand la hauteur du contenu dépasse celle spécifiée pour la table, si l'agent utilisateur devait proposer un mécanisme de défilement. Remarque : Des versions ultérieures de CSS pourraient approfondir cette question.

La hauteur de la boîte d'un élément 'table-row' est calculée une fois que l'agent utilisateur dispose de toutes les cellules d'une rangée donnée, c'est la valeur maximale spécifiée pour la propriété 'height' et la hauteur minimale, notée MIN, requise par les cellules. Quand, pour un élément 'table-row', la propriété 'height' a la valeur 'auto', la hauteur calculée de la rangée correspond à MIN. Cette valeur MIN dépend des hauteurs des boîtes des cellules et de l'alignement de celles-ci (tout comme pour le calcul de la hauteur d'une boîte de ligne). CSS2 ne définit pas à quoi se rapportent les valeurs en pourcentage de la propriété 'height' des rangées et groupes de rangées des tables.

En CSS2, la hauteur de la boîte d'une cellule correspond à la valeur maximale de la propriété 'height' de la cellule en question et à la hauteur minimale requise par son contenu (MIN). Pour la propriété 'height', une valeur spécifiée 'auto' induit une valeur calculée égale à MIN. CSS2 ne définit pas à quoi se réfèrent les valeurs en pourcentage de la propriété 'height' des cellules des tables.

CSS2 ne spécifie pas comment les cellules qui s'étendent sur plus d'une rangée influencent les calculs de la hauteur d'une rangée, sauf sur ce qui tient à la somme des hauteurs des rangées concernées, celle-ci devant être suffisamment grande pour contenir la cellule qui s'étend sur ces rangées.

La propriété 'vertical-align' de chacune des cellules de la table en détermine l'alignement dans la rangée. Le contenu de chaque cellule comprend une ligne de base, un haut et un bas, comme la rangée elle-même. Dans le contexte des tables, les significations des valeurs admises par la propriété 'vertical-align' sont :

baseline
La ligne de base de la cellule se place à la même hauteur que celle de la première rangée dans laquelle celle-ci s'étend (voir plus loin les définitions des lignes de base des cellules et des rangées) ;
top
Le haut de la boîte de la cellule s'aligne sur le haut de la première rangée dans laquelle celle-ci s'étend ;
bottom
Le bas de la boîte de la cellule s'aligne sur celui de la dernière rangée dans laquelle celle-ci s'étend ;
middle
Le milieu de la cellule s'aligne sur celui des rangées dans lesquelles celle-ci s'étend ;
sub, super, text-top, text-bottom
Ces valeurs ne s'appliquent pas aux cellules ; pour une de ces valeurs, la cellule s'aligne sur la ligne de base à la place.

La ligne de base d'une cellule correspond à celle de la première boîte de ligne de la cellule. Quand celle-ci ne contient pas de texte, cette ligne de base correspond à celle de l'objet qui s'y tient, ou s'il n'y en a pas, au bas de la boîte de la cellule. C'est la distance maximale entre le haut de la boîte de la cellule et la ligne de base entre toutes les cellules, dont la valeur de la propriété 'vertical-align' est 'baseline', qui détermine la ligne de base de la rangée. Voici un exemple :

Exemple d'alignement vertical des cellules. [D]

Schéma montrant les effets de diverses valeurs de la propriété 'vertical-align' sur les cellules d'une table.

Les boîtes des cellules 1 et 2 s'alignent sur leur ligne de base. La boîte de cellule 2 ayant la plus grande hauteur au-dessus de sa ligne de base, c'est elle qui détermine la ligne de base de la rangée. Noter que, si aucune cellule ne s'alignait sur sa ligne de base, la rangée n'aurait pas (ou n'aurait pas besoin) de ligne de base.

Pour éviter des situations ambiguës, l'alignement des cellules se détermine dans cet ordre :

  1. On positionne en premier les cellules alignées sur leur ligne de base. Ceci établit la ligne de base de la rangée. Ensuite, on positionne les cellules dont la valeur de la propriété 'vertical-align' est 'top' ;
  2. La rangée a maintenant un haut, éventuellement une ligne de base et une hauteur provisoire qui correspond à la distance entre le haut et le point le plus bas des cellules positionnées jusqu'ici (voir les conditions d'espacement de la cellule plus loin) ;
  3. Si une des cellules restantes, celles qui sont alignées en bas ou au milieu, a une hauteur plus grande que la hauteur provisoire, alors la hauteur de la rangée est augmentée jusqu'au maximum de celles-ci, en déplaçant le bas ;
  4. Et finalement, on positionne les autres cellules.

Les boîtes de cellule moins grandes que la hauteur de la rangée reçoivent un espacement supplémentaire en haut ou en bas.

17.5.4 L'alignement horizontal dans une colonne

On spécifie l'alignement horizontal du contenu d'une cellule dans sa boîte avec la propriété 'text-align'.

Pour plus d'une cellule dans une colonne, quand on spécifie une valeur de <chaîne> à la propriété 'text-align', le contenu de ces cellules s'aligne sur un axe vertical. Le début de la chaîne touche cet axe. C'est le sens de lecture qui détermine de quel côté se situe la chaîne par rapport à l'axe.

Un alignement du texte de cette manière ne présente un intérêt que si le texte tient sur une seule ligne. Le résultat n'est pas défini quand le contenu de la cellule s'étend sur plusieurs lignes.

Quand la valeur de la propriété 'text-align' est une chaîne et que celle-ci n'apparaît pas dans le contenu de la cellule, c'est la fin de celui-ci qui touche l'axe d'alignement vertical.

Noter que les chaînes ne doivent pas forcément être les mêmes pour chacune des cellules, bien que ce soit généralement le cas.

CSS n'offre aucun moyen de spécifier le décalage entre l'axe d'alignement vertical et le bord d'une boîte de colonne.

Exemple(s) :

Soit la feuille de style :

   TD { text-align: "." }
   TD:before { content: "$" }

cette feuille de style associée avec cette table HTML :

  <TABLE>
  <COL width="40">
  <TR> <TH>Appels hors circonscription
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

Ceci fera que le signe monétaire dollar va s'aligner sur le point décimal. En complément, on a utilisé le pseudo-élément :before pour insérer le signe dollar devant chacun des chiffres. La table pourrait être rendue ainsi :

Appels hors circonscription :
              $1.30
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 Les effets dynamiques des rangées et colonnes

La propriété 'visibility' accepte la valeur 'collapse' pour les éléments des rangées, groupes de rangées, colonnes et groupes de colonnes. Avec cette valeur, la rangée ou la colonne entières ne sont pas affichées et l'espace normalement occupé par celles-ci devient disponible pour d'autres contenus. Cependant, leur suppression n'affecte pas pour autant la disposition de la table. Ceci permet des effets dynamiques qui ne provoquent pas une re-disposition de la table pour tenir compte des changements potentiels des contraintes des colonnes.

17.6 Les bordures

CSS propose deux modèles distincts pour la spécification des bordures des cellules des tables. L'un, appelé modèle des bordures séparées, convient pour spécifier des bordures autour de cellules individuelles, l'autre convient pour des bordures continues d'un côté de la table à l'autre. On peut obtenir plusieurs styles de bordure selon le modèle employé, le choix de l'un ou de l'autre étant affaire de goût.

'border-collapse'
Valeur : collapse | separate | inherit
Initiale : collapse
S'applique à : à ceux des éléments dont la valeur de la propriété 'display' est 'table' ou 'inline-table'
Héritée : oui
Percentages: sans objet
Médias : visuel

Cette propriété permet la sélection du modèle de bordure d'une table. Pour une valeur 'separate', on sélectionne le modèle des bordures séparées, pour la valeur 'collapse', celui des bordures fusionnées. Voici leur description ci-dessous.

17.6.1 Le modèle des bordures séparées

'border-spacing'
Valeur : <longueur> <longueur>? | inherit
Initiale : 0
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'table' ou 'inline-table'
Héritée : oui
Percentages: N/A
Médias : visuel

Les longueurs spécifient la distance qui séparent les bordures de cellules adjacentes. Quand on ne spécifie qu'une longueur, ceci donne l'espacement horizontal et vertical. Quand on spécifie deux longueurs, la première donne l'espacement horizontal et la deuxième celui vertical. Ces longueurs ne peuvent pas être négatives.

Dans ce modèle, chaque cellule a une bordure individuelle. La propriété 'border-spacing' indique la distance entre les bordures de cellules adjacentes. Cet espace est comblé par l'arrière-plan de l'élément table. Les rangées, colonnes, groupes de rangées et de colonnes ne peuvent pas avoir de bordures (c.à.d. les agents utilisateurs doivent ignorer les propriétés de bordure de ces éléments).

Exemple(s) :

La table dont l'illustration suit pourrait être le résultat d'une feuille de style comme celle-ci :

  TABLE      { border: outset 10pt;
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* La cellule en haut à gauche */

Une table avec des bordures espacées. [D]

Une table dont la propriété 'border-spacing' n'a qu'une valeur de longueur. Noter que chacune des cellules a sa propre bordure tout comme la table une bordure séparée.

Les bordures autour des cellules vides : la propriété 'empty-cells'

'empty-cells'
Valeur : show | hide | inherit
Initiale : show
S'applique à : ceux des éléments dont la valeur de la propriété 'display' est 'table-cell'
Héritée : oui
Pourcentage : sans objet
Médias : visuel

Dans le modèle des bordures séparées, cette propriété contrôle le rendu de l'arrière-plan des cellules et des bordures autour de celles-ci, ces cellules n'ayant pas de contenu. Les cellules vides et celles dont la propriété 'visibility' a la valeur 'hide' se comportent comme si elles n'avaient pas de contenu visible. Par contenu visible, on entend "&nbsp;" et les autres blancs, sauf les caractères ASCII retour chariot ("\0D"), nouvelle ligne ("\0A"), tabulation ("\09") et espace ("\20").

Quand cette propriété a la valeur 'show', les bordures sont dessinées autour des cellules vides (comme pour les cellules normales).

Pour la valeur 'hide', aucune bordure n'est dessinée autour des cellules vides. De plus, si toutes les cellules d'une rangée ont la valeur 'hide' et n'ont pas de contenu visible, la rangée entière se comporte comme si la valeur de la propriété 'display' de celle-ci avait été 'none'.

Exemple(s) :

Cette règle autorise le dessin des bordures autour de chacune des cellules :

TABLE { empty-cells: show }

17.6.2 Le modèle des bordures fusionnées

Dans le modèle des bordures fusionnées, on peut spécifier des bordures, entièrement ou en partie, autour d'une cellule, d'une rangée, d'un groupe de rangée, d'une colonne ou d'un groupe de colonnes. Les bordures pour l'attribut HTML "rule" peuvent être spécifiées de cette manière.

Les bordures se centrent sur les lignes du quadrillage entre les cellules. Les agents utilisateurs doivent trouver une règle d'arrondi cohérente dans le cas d'un nombre impair d'unités discrètes (les pixels à l'écran, les points d'une imprimante).

Le schéma plus loin montre l'interaction de la largeur de la table, des épaisseurs des bordures, de l'espacement et de la largeur de la cellule. Leur relation est donnée par l'équation suivante, celle-ci est valable pour chacune des rangées de la table :

largeur-rangée = (0.5 * épaisseur-bordure0) + espacement-gauche1 + largeur1 + espacement-droit1 + épaisseur-bordure1 + espacement-gauche2 +...+ espacement-droitn + (0.5 * épaisseur-borduren)

Ici, n représente le nombre de cellules de la rangée, épaisseur-bordurei se réfère à la bordure entre les cellules i et i + 1, et espacement-gauchei et espacement-droiti se réfèrent respectivement à l'espacement gauche et droite de la cellule i. Noter que seule la moitié des deux bordures extérieures est comptée dans la largeur de la table, l'autre moitié se trouvant dans l'aire de la marge.

Schéma montrant les largeurs des cellules et bordures, et leurs espacements. [D]

Schéma montrant les dimensions des cellules et de leurs bordures ainsi que l'espacement des cellules.

Noter que dans ce modèle, la largeur de la table inclut la moitié de la bordure de celle-ci. Également, une table n'a pas d'espacement (mais elle a des marges).

La résolution des conflits de bordure

Dans le modèle des bordures fusionnées, on peut spécifier les bordures de chacun des bords de chacune des cellules avec les propriétés de bordure pour les divers éléments qui ont des bords communs (ceux des cellules, rangées, groupes de rangées, colonnes, groupes de colonnes et de la table elle-même), ces bordures peuvent varier en style, taille et couleur. En règle générale, pour un bord donné, c'est le style de bordure "attirant le plus l'attention" qui est retenu, sauf quand survient éventuellement la propriété 'border-style' avec une valeur 'hidden', ce qui a pour effet inconditionnel de supprimer l'affichage de la bordure.

En cas de conflit, les règles suivantes déterminent lequel des styles de bordure l'emporte :

  1. Les bordures contrôlées par la propriété 'border-style' avec la valeur 'hidden' sont considérées avant toutes celles intervenant dans le conflit. Cette valeur cause la suppression de toutes les bordures à cet endroit ;
  2. Les bordures dont la valeur de la propriété 'border-style' est 'none' ont la plus faible priorité. Une bordure ne sera omise que quand toutes les propriétés de bordure des éléments convergents sur ce bord auront une valeur 'none' (noter en passant que c'est la valeur par défaut pour la propriété 'border-style') ;
  3. Si aucun des styles de bordure de ces éléments n'est 'hidden' et au moins l'un d'entre eux n'est pas 'none', alors les bordures les plus larges sont retenues, les plus étroites rejetées. Si plusieurs d'entre eux ont la même valeur pour leur propriété 'border-width', alors on retiendra le style de bordure dans cet ordre de priorité 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' et enfin, celui de moindre poids, 'inset' ;
  4. Si les styles de bordure ne diffèrent que par leur couleur, alors le style de bordure d'une cellule l'emporte sur celui d'une rangée, ce dernier l'emporte à son tour sur celui d'un groupe de rangées, puis en succession, sur celui d'une colonne, sur celui d'un groupe de colonnes et finalement, sur celui de la table.

Exemple(s) :

L'exemple suivant illustre l'application de ces règles de préséance. Soit la feuille de style :

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

celle-ci associée avec cette source HTML :

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

ceci produirait quelque chose comme :

Un exemple de table avec des bordures fusionnées. [D]

Un exemple de table avec des bordures fusionnées.

Exemple(s) :

Cet exemple-ci montre une table avec des traits horizontaux entre les rangées. La bordure du haut de la table a une valeur 'hidden', ce qui a pour effet de supprimer la bordure du haut de la première rangée. C'est une implémentation de l'attribut "rules" en HTML 4.0 (rules="rows") :

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse;
                       border-top: hidden }

Table avec des règles horizontales. [D]

Une table avec des traits horizontaux entre les rangées.

On aurait pu obtenir le même effet, sans utiliser la valeur 'hidden' pour la bordure de la table, en donnant un style distinct à la première rangée, le choix de l'une ou l'autre méthode étant une affaire de goût :

TR:first-child { border-top: none }
TR { border-top: solid }

Exemple(s) :

Voici un autre exemple de bordures fusionnées cachées :

Table avec deux bordures manquantes. [D]

Une table avec deux bordures internes absentes.

La source HTML :

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3 Les styles de bordure

Certaines valeurs de la propriété 'border-style' ont une signification différente dans le contexte des tables que dans celui des autres éléments. Celles-ci sont repérées par un astérisque dans la liste qui suit :

none
Aucune bordure ;
*hidden
Même chose que pour 'none', cependant, dans le modèle des bordures fusionnées, cette valeur a une action inhibitrice sur les autres bordures (voir les conflits de bordures) ;
dotted
La bordure est constituée d'une succession de points ;
dashed
La bordure est constituée d'une succession de petits traits ;
solid
La bordure est constituée d'un trait plein ;
double
La bordure est constituée de deux traits pleins. La somme de leur épaisseur et de l'espace entre eux est égale à la valeur de la propriété 'border-width' ;
groove
La bordure semble avoir été gravée dans le canevas ;
ridge
L'opposé de 'groove', la bordure semble être en relief sur le canevas ;
*inset
Dans le modèle des bordures séparées, la bordure donne l'impression que la boîte entière est incrustée dans le canevas. Dans le modèle des bordures fusionnées, même effet que 'groove' ;
*outset
Dans le modèle des bordures séparées, la bordure donne l'impression que la boîte entière est extrudée du canevas. Dans le modèle des bordures fusionnées, même effet que 'ridge'.

17.7 Le rendu auditif des tables

Lors de la diction d'une table par un synthétiseur de parole, les relations entre les cellules de données et celles des en-têtes doivent être exprimées différemment, selon que ces cellules sont alignées horizontalement ou verticalement. Certains navigateurs avec synthèse de parole permettent à l'utilisateur de se mouvoir dans un espace en deux dimensions, leur donnant ainsi la possibilité d'une représentation spatiale de ces relations. Quand cela n'est pas possible, la feuille de style doit spécifier les endroits où les en-têtes sont annoncées.

17.7.1 Les en-têtes parlées : la propriété 'speak-header'

'speak-header'
Valeur : once | always | inherit
Initiale : once
S'applique à : ceux des éléments avec une information d'en-tête de table
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété indique si les en-têtes de table sont parlées avant chacune des cellules ou seulement avant une cellule quand celle-ci est associée à une en-tête différente de la cellule précédente. Les significations des valeurs sont :

once
L'en-tête est annoncée une fois, avant une succession de cellules ;
always
L'en-tête est annoncée à chaque fois, avant chacune des cellules pertinentes.

Chaque langage de document peut avoir un mécanisme différent permettant aux auteurs la spécification des en-têtes. Par exemple en HTML 4.0 ([HTML40]), on peut spécifier une information d'en-tête à l'aide de trois attributs différents ("headers", "scope" et "axis"), cette spécification précisant un algorithme pour déterminer cette information d'en-tête en l'absence de ces attributs.

Image d'une table. [D]

Illustration d'une table dont les cellules d'en-tête ("San Jose" et "Seattle") ne se trouvent pas dans la même rangée, ou colonne, que les données auxquelles elles s'appliquent.

Cet exemple en HTML présente les notes de frais, repas, hôtels et transport, pour un séjour de plusieurs jours dans deux déplacements. Conceptuellement, on peut considérer cette table comme un espace en plusieurs dimensions. Les en-têtes de cet espace sont : le lieu du déplacement, la date, la catégorie de frais et les sous-totaux. Certaines cellules définissent des repères le long d'un axe alors que d'autres représentent l'argent dépensé, à des points de cet espace. Voici le balisage pour cette table :

<TABLE>
<CAPTION>Rapport de frais de déplacement</CAPTION>
<TR>
  <TH></TH>
  <TH>Repas</TH>
  <TH>Hôtels</TH>
  <TH>Transports</TH>
  <TH>Sous-totaux</TH>
</TR>
<TR>
  <TH id="san-jose" axis="san-jose">San Jose</TH>
</TR>
<TR>
  <TH headers="san-jose">25-Aug-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26-Aug-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">subtotal</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
  <TH headers="seattle">27-Aug-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28-Aug-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">subtotal</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totals</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

En produisant le modèle des données de cette manière, les auteurs autorisent une exploration plus riche de la table par les navigateurs synthétiseurs de parole, par exemple, chaque cellule pourrait être énumérée dans une liste, l'en-tête concernée étant répétée avant chacune des cellules de données :

  San Jose, 25-Aug-97, Repas :  37.74
  San Jose, 25-Aug-97, Hôtels :  112.00
  San Jose, 25-Aug-97, Transports :  45.00
 ...

Le navigateur pourrait aussi dire les en-têtes quand celles-ci changent :

San Jose, 25-Aug-97, Repas : 37.74
    Hôtels : 112.00
    Transports : 45.00
  26-Aug-97, Repas : 27.28
    Hôtels : 112.00
...


L'interface utilisateur

18 L'interface utilisateur

  • 18.1 Les curseurs : la propriété 'cursor'
  • 18.2 Les préférences de couleur de l'utilisateur
  • 18.3 Les préférences de police de l'utilisateur
  • 18.4 Les contours dynamiques : la propriété 'outline'
    • 18.4.1 Les contours et la sélection [ndt. focus]
  • 18.5 Le grossissement

18.1 Les curseurs : la propriété 'cursor'

'cursor'
Valeur : [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
Initiale : auto
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : visuel, interactif

Cette propriété spécifie le type de curseur qui sera affiché pour l'appareil de pointage. Les significations des valeurs sont :

auto
L'agent utilisateur détermine lequel des curseurs employer selon un contexte donné
crosshair
Une marque en croix (ex. deux traits formant un signe "+") ;
default
Le curseur par défaut dépendant de la plate-forme. Souvent rendu par une flèche ;
pointer
Le curseur est représenté par un doigt indiquant un lien ;
move
Indique un objet qu'on peut déplacer ;
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indique que le bord d'un certain objet peut être déplacé. Par exemple, la valeur 'se-resize' est utilisée pour un mouvement commençant du coin sud-est de la boîte ;
text
Indique qu'on peut sélectionner le texte. Souvent rendu par une barre en I ;
wait
Indique un programme en progression, l'utilisateur devrait en attendre l'achèvement. Souvent rendu par une montre ou un sablier ;
help
Une aide est disponible pour l'objet survolé par le curseur. Souvent rendu par un point d'interrogation ou une bulle ;
<uri>
L'agent utilisateur charge le curseur à partir de la ressource désignée par l'URI. Quand l'agent utilisateur, dans une liste de curseur, ne peut pas prendre en charge le premier curseur, il devrait essayer avec le deuxième, et ainsi de suite. Si celui-ci ne peut rien faire avec aucun des curseurs de la liste, il doit utiliser le curseur générique placé à la fin de celle-ci.

Exemple(s) :

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Les préférences de couleur de l'utilisateur

En plus de la possibilité de prédéfinir les valeurs de couleur du texte, de l'arrière-plan, etc., CSS2 permet aux auteurs la spécification de couleurs de façon à les intégrer dans l'environnement graphique de l'utilisateur. Les feuilles de style qui prennent en compte les préférences de l'utilisateur offrent ainsi certains avantages :

  1. Des pages qui s'accordent avec les choix définis par l'utilisateur ;
  2. Des pages qui peuvent être plus accessibles, l'utilisateur ayant pu effectuer des réglages pour pallier une déficience donnée.

On a voulu que le jeu des valeurs définies pour les couleurs système soit exhaustif. Pour les systèmes n'ayant pas de valeur correspondante, la valeur spécifiée devrait être reliée à l'attribut système le plus proche ou à une couleur par défaut.

Voici la liste des valeurs supplémentaires des attributs CSS liés à la couleur et leurs significations. Toute propriété de couleur (ex. 'color' ou 'background-color') peut prendre l'un des noms suivants. Bien que ceux-ci ne soient pas sensibles à la casse, on recommande leur capitalisation mélangée comme ci-dessous, pour une meilleure lisibilité.

ActiveBorder
La bordure de la fenêtre active ;
ActiveCaption
La légende de la fenêtre active ;
AppWorkspace
La couleur d'arrière-plan de l'interface de documents multiples ;
Background
L'arrière-plan du plan de travail ;
ButtonFace
La couleur de la police des éléments d'affichage en trois dimensions ;
ButtonHighlight
La couleur d'activation des éléments d'affichage en trois dimensions (pour les bords à l'opposé de la source lumineuse) ;
ButtonShadow
La couleur de l'ombre des éléments d'affichage en trois dimensions ;
ButtonText
Le texte des boutons à pousser ;
CaptionText
Le texte des légendes, des boîtes de dimensionnement et des boîtes de flèches des barres de défilement ;
GrayText
Le texte en grisé (désactivé). Cette couleur prend la valeur #000 si un driver d'affichage donné ne peut rendre sûrement la couleur grise ;
Highlight
L'article, ou les articles, sélectionnés dans une zone de saisie ;
HighlightText
Le texte de l'article, ou des articles, sélectionnés dans une zone de saisie ;
InactiveBorder
La bordure d'une fenêtre inactive ;
InactiveCaption
La légende d'une fenêtre inactive ;
InactiveCaptionText
La couleur du texte d'une légende inactive ;
InfoBackground
La couleur de fond des infobulles ;
InfoText
La couleur du texte des infobulles ;
Menu
L'arrière-plan d'un menu ;
MenuText
Le texte d'un menu ;
Scrollbar
L'aire grise d'une barre de défilement ;
ThreeDDarkShadow
L'ombre sombre des éléments d'affichage en trois dimensions ;
ThreeDFace
La couleur de la police des éléments d'affichage en trois dimensions ;
ThreeDHighlight
La couleur d'activation des éléments d'affichage en trois dimensions ;
ThreeDLightShadow
L'ombre claire des éléments d'affichage en trois dimensions (pour les bords faisant face à la source lumineuse) ;
ThreeDShadow
L'ombre des éléments d'affichage en trois dimensions ;
Window
L'arrière-plan de la fenêtre ;
WindowFrame
Le cadre de la fenêtre ;
WindowText
Le texte des fenêtres.

Exemple(s) :

Par exemple, pour que les couleurs d'avant-plan et d'arrière-plan d'un paragraphe soient les mêmes que celles de la fenêtre de l'utilisateur :

P { color: WindowText; background-color: Window }

18.3 Les préférences de police de l'utilisateur

Comme pour les couleurs, les auteurs peuvent spécifier des polices de manière à utiliser les ressources du système de l'utilisateur. Consulter la propriété 'font' pour des détails.

18.4 Les contours dynamiques : la propriété 'outline'

Parfois, les auteurs de feuilles de style peuvent souhaiter créer des contours autour d'objets visuels, comme les boutons, les champs actifs des formulaires, les images découpées, etc., pour les faire ressortir. Les contours CSS2 diffèrent des bordures ainsi :

  1. Les contours n'occupent pas d'espace ;
  2. Les contours peuvent avoir une forme non rectangulaire.

Les propriétés de contour régissent le style de ces contours dynamiques.

'outline'
Valeur : [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel, interactif
'outline-width'
Valeur : <bordure-épaisseur> | inherit
Initiale : medium
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel, interactif
'outline-style'
Valeur : <bordure-style> | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel, interactif
'outline-color'
Valeur : <couleur> | invert | inherit
Initiale : invert
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : visuel, interactif

Le contour produit par les propriétés de contour est dessiné "par dessus" la boîte, c.à.d. le contour est toujours au-dessus de celle-ci et n'influence pas sur son placement ou sur sa taille, et sur aucune des autres boîtes. De ce fait, l'affichage, ou la suppression, des contours ne provoque pas une nouvelle mise en forme de la page.

Le contour est dessiné juste en dehors du bord de la bordure.

Les contours peuvent avoir une forme non rectangulaire. Par exemple, quand un élément est distribué sur plusieurs lignes, le contour correspond à celui minimum qui englobe toutes les boîtes de l'élément. À l'inverse des bordures, le contour ne s'ouvre pas à la fin ou au début de la boîte de ligne, et celui-ci est toujours entièrement connecté.

La propriété 'outline-width' admet les mêmes valeurs que celles de la propriété 'border-width'.

La propriété 'outline-style' admet les mêmes valeurs que celles de la propriété'border-style', sauf la valeur 'hidden' qui n'est pas admise pour un style de contour.

La propriété 'outline-color' admet toutes les valeurs de couleur, avec en plus le mot-clé 'invert'. Celui-ci produit l'inversion des couleurs des pixels à l'écran. C'est une astuce courante pour s'assurer que la bordure active soit visible, indépendamment de la couleur du fond.

La propriété raccourcie 'outline' sert à la spécification des valeurs pour les trois propriétés individuelles 'outline-style', 'outline-width' et 'outline-color'.

Noter que le contour est le même pour tous les côtés, à l'inverse des bordures, il n'existe pas de propriétés 'outline-top' ou 'outline-left'.

Cette spécification ne définit pas, quand plusieurs contours se chevauchent, comment ceux-ci sont dessinés ni comment le faire pour les boîtes dont des parties sont cachées derrière d'autres éléments.

Remarque : Le contour d'activation [ndt. focus outline] n'affectant pas la mise en forme (c.à.d. aucun espace n'est consacré aux contours dans le modèle de la boîte), celui-ci peut très bien déborder sur d'autres éléments de la page.

Exemple(s) :

Voici un exemple de dessin d'un contour épais autour d'un élément BUTTON :

BUTTON { outline-width : thick }

On peut employer un script pour le changement dynamique de l'épaisseur du contour, sans induire une remise en forme de la page.

18.4.1 Les contours et la sélection [ndt. focus]

Les interfaces graphiques des utilisateurs peuvent employer des contours autour des éléments pour confirmer à ceux-ci lequel des éléments de la page est sélectionné. Ces contours s'ajoutent aux éventuelles bordures de ces éléments, leur sélection ou désélection ne devant pas provoquer une nouvelle mise en forme de la page. La sélection d'un élément d'un document relève d'une action de l'utilisateur (ex. saisie d'un texte, sélection d'un bouton, etc.). Les agents utilisateurs reconnaissant le groupe de média interactif doivent conserver l'information relative à l'endroit où intervient la sélection et doivent aussi en donner une représentation. Ceci peut être réalisé à l'aide de contours dynamiques en conjonction avec la pseudo-classe :focus.

Exemple(s) :

Par exemple, on peut employer les règles suivantes pour faire apparaître un trait noir épais autour d'un élément sélectionné, ce trait devenant rouge quand on l'active :

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 Le grossissement

Le groupe de travail de CSS considère que le grossissement d'un document, ou de parties de celui-ci, ne devrait pas être spécifié par des feuilles de style. Les agents utilisateurs peuvent en avoir une interprétation de différentes façons (ex. images agrandies, volumes sonores augmentés, etc.).

Lors du grossissement d'une page, les agents utilisateurs devraient conserver les relations entre les éléments positionnés. Par exemple, une bande dessinée peut se composer d'images sur lesquelles viennent s'appliquer des éléments de texte. Quand un agent utilisateur grossit celle-ci, le texte devrait rester dans les bulles de la bande dessinée.


Les feuilles de styles auditives

19 Les feuilles de styles auditives

  • 19.1 Introduction aux feuilles de styles auditives
  • 19.2 La propriété de volume : 'volume'
  • 19.3 La propriété de parole : 'speak'
  • 19.4 Les propriétés de pause : 'pause-before', 'pause-after' et 'pause'
  • 19.5 Les propriétés de signal : 'cue-before', 'cue-after' et 'cue'
  • 19.6 La propriété de mixage : 'play-during'
  • 19.7 Les propriétés spatiales : 'azimuth' et 'elevation'
  • 19.8 Les propriétés des caractéristiques des voix : 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' et 'richness'
  • 19.9 Les propriétés de diction : 'speak-punctuation' et 'speak-numeral'

19.1 Introduction aux feuilles de styles auditives

Le rendu auditif d'un document, déjà couramment employé par la communauté des aveugles et des lecteurs déficients, combine la synthèse de la parole avec des "images auditives". Une telle présentation auditive est souvent réalisée, suite à une conversion du document en un texte plein, par un lecteur d'écran (un logiciel ou un appareil qui lit simplement tous les caractères apparaissant à l'écran). Ceci conduit à une présentation bien moins efficace que si la structure du document avait été conservée. On peut utiliser les propriétés des feuilles de style pour une présentation auditive en même temps que visuelle (médias mélangés) ou comme une alternative auditive à une présentation visuelle.

En dehors des avantages évidents pour l'accessibilité des documents, il existe d'autres marchés importants pour l'écoute d'informations, à savoir pour une utilisation dans les voitures, les systèmes de documentation industriels et médicaux (en intranets), les divertissements à la maison et pour aider les utilisateurs qui apprennent ou qui ont des difficultés à lire.

Quand on emploie les propriétés auditives, le canevas consiste en un espace physique en trois dimensions (l'environnement sonore) et en un espace temporel (on peut spécifier des sons avant, pendant et après d'autres sons). Les propriétés CSS permettent aussi une variation de la qualité de la voix synthétisée (le type de voix, la fréquence, l'inflexion, etc.).

Exemple(s) :

H1, H2, H3, H4, H5, H6 {
    voice-family: paul;
    stress: 20;
    richness: 90;
    cue-before: url("ping.au")
}
P.heidi { azimuth: center-left }
P.peter { azimuth: right }
P.goat  { volume: x-soft }

Ceci va conduire le synthétiseur de parole à dire les en-têtes avec une voix (un peu comme une "police auditive") appelée "paul", d'un ton neutre mais avec des intonations fortes. Avant la lecture de celles-ci, un échantillon sonore, désigné par l'URI, sera joué. Les paragraphes avec la classe "heidi" sembleront venir de l'avant gauche (pourvu que le système sonore soit capable de spatialisation audio) et ceux avec la classe "peter" venir de la droite. Les paragraphes avec la classe "goat" seront dit très doucement.

19.2 La propriété de volume : 'volume'

'volume'
Valeur : <nombre> | <pourcentage> | silent | x-soft | soft | medium | loud | x-loud | inherit
Initiale : medium
S'applique à : tous les éléments
Héritée : oui
Pourcentage : se rapporte à la valeur héritée
Médias : auditif

Le volume se réfère à la valeur moyenne de la forme de la vibration. En d'autres mots, une voix avec de fortes inflexions pour un volume de 50 pourrait très bien se situer au-delà de cette moyenne. Ces valeurs globales seront vraisemblablement ajustées par une action humaine pour un certain confort (avec pour effet d'augmenter proportionnellement les valeurs 0 et 100) ; cette propriété permet le réglage de l'échelle dynamique.

Les significations des valeurs sont :

<nombre>
Tout nombre compris en tre '0' et '100'. La valeur '0' représente le volume du niveau minimum audible et la valeur '100' correspond à celui du maximum de confort ;
<pourcentage>
Les valeurs en pourcentage sont calculées par rapport à la valeur héritée, et sont ensuite rognées pour se ranger dans l'échelle de '0' à '100' ;
silent
Pas de son du tout. Une valeur de '0' a une signification différente de 'silent' ;
x-soft
Équivaut à '0' ;
soft
Équivaut à '25' ;
medium
Équivaut à '50' ;
loud
Équivaut à '75' ;
x-loud
Équivaut à '100'.

Les agents utilisateurs devraient laisser le soin aux auditeurs de paramétrer les valeurs correspondant aux repères '0' et '100'. Aucun réglage n'est universel, les valeurs convenables dépendant de l'appareil utilisé (haut-parleurs, écouteurs), de l'environnement (en voiture, à la maison sur un ensemble de restitution audio, dans une librairie) et des préférences personnelles. Quelques exemples :

  • Un navigateur pour un usage en voiture est adapté aux conditions où les bruits de fond sont importants. La valeur '0' correspondrait à un niveau d'écoute assez soutenu, la valeur '100' à un niveau plutôt élevé. On distingue facilement la parole des bruits de la route mais l'échelle dynamique globale est réduite. Les véhicules mieux insonorisés autoriseraient une échelle dynamique élargie ;
  • Un autre navigateur parlant employé dans un appartement, tard dans la nuit, ou dans une salle d'étude partagée. La valeur '0' correspondrait à un niveau d'écoute très bas, la valeur '100' à un niveau peu élevé. Comme pour le premier exemple, la variation est faible, l'échelle dynamique est réduite. Ici les volumes effectifs sont bas, alors qu'ils étaient élevés précédemment ;
  • Dans une maison calme et isolée, les réglages pour un ensemble de restitution audio de qualité. La valeur '0' correspondrait à un niveau d'écoute plutôt bas, la valeur '100' à un niveau plutôt élevé, l'échelle dynamique est étendue.

On pourrait utiliser la même feuille de style de l'auteur dans tous ces cas, avec simplement un paramétrage convenable des valeurs '0' et '100' sur l'agent utilisateur.

19.3 La propriété de parole : 'speak'

'speak'
Valeur : normal | none | spell-out | inherit
Initiale : normal
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété spécifie si un texte aura un rendu auditif, et si c'est le cas, la manière de ce rendu (d'une façon analogue à la propriété 'visibility' et, parfois, à la propriété 'display'). Les valeurs admises sont :

none
Supprime le rendu auditif de manière à ce qu'un élément donné ne consomme pas de temps pour ce rendu. Noter, cependant, que les descendants peuvent surclasser cette valeur et ainsi être lus. Pour complètement supprimer le rendu d'un élément et de ses descendants, utiliser la propriété 'display') ;
normal
Suit les règles de prononciation propres à de la langue pour le rendu auditif d'un élément et de ses enfants ;
spell-out
Épelle le texte, lettre par lettre (utile pour les acronymes et les abréviations).

Noter la différence entre un élément dont la valeur de la propriété 'volume' est 'silent' et un élément dont la valeur de la propriété 'speak' est 'none'. Le premier élément aurait la même durée que s'il avait été lu, y compris les pauses avant et après celui-ci, aucun son n'étant produit. Le second n'a aucune durée et n'est pas rendu (bien que ses descendants puissent l'être).

19.4 Les propriétés de pause : 'pause-before', 'pause-after' et 'pause'

'pause-before'
Valeur : <durée> | <pourcentage> | inherit
Initiale : selon l'agent utilisateur
S'applique à : tous les éléments
Héritée : non
Pourcentage : voir les explications
Médias : auditif
'pause-after'
Valeur : <durée> | <pourcentage> | inherit
Initiale : selon l'agent utilisateur
S'applique à : tous les éléments
Héritée : non
Pourcentage : voir les explications
Médias : auditif

Ces propriétés spécifient la pause à observer avant que le contenu d'un élément ne soit lu, ou après qu'il l'ait été. Les significations des valeurs sont :

<durée>
Exprime la pause dans une unité de durée absolue (secondes et millisecondes) ;
<pourcentage>
Se rapporte à la valeur inverse de la propriété 'speech-rate'. Par exemple, si la valeur de celle-ci est de 120 mots par minute (c.à.d. un mot dure une demi-seconde ou 500ms) alors une valeur de 100% pour la propriété 'pause-before' signifie une pause de 500ms et une valeur de 20% une pause de 100ms.

La pause s'insère entre le contenu de l'élément et les contenus éventuels des propriétés 'cue-before' ou 'cue-after'.

Les auteurs devraient employer des unités relatives pour créer des feuilles de style plus robustes quand le débit de la parole varie beaucoup.

'pause'
Valeur : [ [<durée> | <pourcentage>]{1,2} ] | inherit
Initiale : selon l'agent utilisateur
S'applique à : tous les éléments
Héritée : non
Pourcentage : voir les descriptions des propriétés 'pause-before' et 'pause-after'
Médias : auditif

La propriété raccourcie 'pause' regroupe les spécifications des propriétés individuelles 'pause-before' et 'pause-after'. Quand on lui donne deux valeurs, la première s'applique à la propriété 'pause-before' et la seconde à la propriété 'pause-after'. Pour une seule valeur, celle-ci s'applique à ces deux propriétés.

Exemple(s) :

H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */
H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */
H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */

19.5 Les propriétés de signal : 'cue-before', 'cue-after' et 'cue'

'cue-before'
Valeur : <uri> | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : auditif
'cue-after'
Valeur : <uri> | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : auditif

Les images auditives sont une autre façon de distinguer des éléments sémantiques. On peut jouer des sons avant et/ou après un élément et, ainsi, le délimiter. Les significations des valeurs sont :

<uri>
L'URI doit désigner une ressource d'image auditive. Si cet URI désigne autre chose qu'un fichier audio, cette ressource doit être ignorée, la propriété devant être considérée avoir la valeur 'none' ;
none
Aucune image auditive n'est spécifiée.

Exemple(s) :

A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") }
H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
'cue'
Valeur : [ <'cue-before'> || <'cue-after'> ] | inherit
Initiale : non définie pour les propriétés raccourcies
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : auditive

La propriété raccourcie 'cue' regroupe les spécifications des propriétés individuelles 'cue-before' et 'cue-after'. Quand on lui donne deux valeurs, la première s'applique à la propriété 'cue-before' et la seconde à la propriété 'cue-after'. Pour une seule valeur, celle-ci s'applique à ces deux propriétés.

Exemple(s) :

Ces deux règles sont équivalentes :

H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
H1 {cue: url("pop.au") }

Quand un agent utilisateur ne peut rendre une image auditive (ex. l'environnement de l'utilisateur ne le permettant pas), on recommande que celui-ci produise un signal alternatif (ex. un message d'avertissement, l'émission d'un bip sonore, etc.).

Voir les passages sur les pseudo-éléments :before et :after pour des informations sur les aspects techniques de la génération de contenu.

19.6 La propriété de mixage : 'play-during'

'play-during'
Valeur : <uri> mix? repeat? | auto | none | inherit
Initiale : auto
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet
Médias : auditif

Semblable aux propriétés 'cue-before' et 'cue-after', cette propriété spécifie le son à jouer en arrière-plan, au cours de la lecture de l'élément. Les significations des valeurs sont :

<uri>
Le son désigné par cet <uri> est joué en arrière-plan du contenu de l'élément en train d'être lu ;
mix
Si présent, ce mot-clé indique que le son, celui hérité de la propriété 'play-during' du parent de l'élément en question, continuant d'être joué, est mixé avec celui désigné par la propriété <uri>. Quand cette valeur 'mix' n'est pas spécifiée, le son d'arrière-plan de l'élément en question remplace celui de son parent ;
repeat
Si présent, ce mot-clé indique que le son se répètera quand celui-ci est trop court pour le temps de la lecture d'un élément donné. Autrement, le son est joué une seule fois et puis s'arrête. Ceci est similaire à la propriété 'background-repeat'. Quand le son est trop long pour la durée de l'élément, on rogne ce son quand l'élément a fini d'être lu ;
auto
Le son du parent de l'élément continue d'être joué (on ne recommence pas à le jouer comme cela aurait été le cas si cette propriété avait été héritée) ;
none
Ce mot-clé indique un silence. Le son du parent (éventuel) de l'élément n'est pas audible pendant que l'élément en question se déroule, et redevient audible ensuite.

Exemple(s) :

BLOCKQUOTE.sad { play-during: url("violins.aiff") }
BLOCKQUOTE Q   { play-during: url("harp.wav") mix }
SPAN.quiet     { play-during: none }

19.7 Les propriétés spatiales : 'azimuth' et 'elevation'

La spatialisation de l'écoute est une importante propriété de style pour une présentation auditive. C'est une façon naturelle de discriminer entre plusieurs voix, comme dans la réalité (les gens se tiennent rarement au même endroit dans une pièce). Les haut-parleurs en stéréo produisent une scène sonore latérale. Les écouteurs quadriphoniques ou les configurations de chaînes avec 5 haut-parleurs, de plus en plus répandues, peuvent reproduire un environnement sonore complet et certaines configurations avec de multiples haut-parleurs peuvent créer une véritable scène sonore en trois dimensions. VRML 2.0 inclut également une spatialisation audio, ce qui implique la disponibilité allant grandissant de matériels grand public intégrant ces mécanismes.

'azimuth'
Valeur : <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
Initiale : center
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Les significations des valeurs sont :

<angle>
La position est décrite selon un angle compris entre les valeurs '-360deg' et '360deg'. La valeur '0deg' indique une position directement en face et au centre de la scène sonore, la valeur '90deg' en indique une vers la droite, la valeur '180deg' une vers l'arrière et la valeur '270deg' ('-90deg' en étant une équivalence plus pratique) une vers la gauche ;
left-side
Même chose que '270deg'. La valeur de 'behind' équivalant à '270deg' ;
far-left
Même chose que '300deg'. La valeur de 'behind' équivalant à '240deg' ;
left
Même chose que '320deg'. La valeur de 'behind' équivalant à '220deg' ;
center-left
Même chose que '340deg'. La valeur de 'behind' équivalant à '200deg' ;
center
Même chose que '0deg'. La valeur de 'behind' équivalant à '180deg' ;
center-right
Même chose que '20deg'. La valeur de 'behind' équivalant à '160deg' ;
right
Même chose que '40deg'. La valeur de 'behind' équivalant à '140deg' ;
far-right
Même chose que '60deg'. La valeur de 'behind' équivalant à '120deg' ;
right-side
Même chose que '90deg'. La valeur de 'behind' équivalant à '90deg' ;
leftwards
Déplace le son vers la gauche en fonction de l'angle courant. Plus précisément, on lui soustrait 20 degrés. Cette opération est effectuée avec un modulo de 360 degrés. Noter que la valeur 'leftwards' est plus justement décrite par "à l'inverse des aiguilles d'une montre", celle-ci retirant toujours 20 degrés, et même si l'azimuth hérité se situe déjà derrière l'auditeur (auquel cas le son semble se déplacer vers la droite) ;
rightwards
Déplace le son vers la droite en fonction de l'angle courant. Plus précisément, on lui ajoute 20 degrés. Voir 'leftwards' pour des explications à l'inverse.

Cette propriété sera plus vraisemblablement implémentée par le mélange d'un même signal issus de différents canaux, leurs volumes étant différents. Ceci pourrait aussi être obtenu par une modulation de phase, un retard digital et autres techniques de ce genre qui donne l'illusion d'une scène sonore. Les moyens précis d'atteindre cet effet ainsi que le nombre de haut-parleurs nécessaires dépendent de l'agent utilisateur, cette propriété décrivant simplement le résultat final souhaité.

Exemple(s) :

H1   { azimuth: 30deg }
TD.a { azimuth: far-right }          /*  60deg */
#12  { azimuth: behind far-right }   /* 120deg */
P.comment { azimuth: behind }        /* 180deg */

Quand on spécifie un azimuth spatial, l'appareil de sortie ne pouvant produire de sons en arrière de la position de l'auditeur, les agents utilisateurs devraient convertir ces valeurs de l'hémisphère arrière pour les ramener vers l'hémisphère avant. En voici une méthode :

  • si 90deg < x <= 180deg alors x := 180deg - x
  • si 180deg < x <= 270deg alors x := 540deg - x
'elevation'
Valeur : <angle> | below | level | above | higher | lower | inherit
Initiale : level
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Les significations des valeurs sont :

<angle>
Spécifie l'angle d'élévation compris entre les valeurs '-90deg' et '90deg'. La valeur '0deg' indique une position en face à l'horizontale, à peu près de niveau avec l'auditeur. La valeur '90deg' signifie directement au-dessus et '-90deg' directement au-dessous de celui-ci ;
below
Équivaut à '-90deg'.
level
Équivaut à '0deg' ;
above
Équivaut à '90deg'.
higher
Ajoute 10 degrés à l'élévation courante ;
lower
Soustrait 10 degrés à l'élévation courante.

Les moyens précis d'obtenir cet effet ainsi que le nombre de haut-parleurs nécessaires pour cela ne sont pas définis. Cette propriété décrit simplement le résultat final souhaité.

Exemple(s) :

H1   { elevation: above }
TR.a { elevation: 60deg }
TR.b { elevation: 30deg }
TR.c { elevation: level }

19.8 Les propriétés des caractéristiques des voix : 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' et 'richness'

'speech-rate'
Valeur : <nombre> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit
Initiale : medium
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété spécifie le débit de la parole. Noter que des valeurs de mots-clés absolus et relatifs sont à la fois admises (à comparer avec la propriété 'font-size'). Les significations des valeurs sont :

<nombre>
Spécifie le débit de parole en mots par minute, celui-ci, bien que variant selon la langue, est une quantité largement reconnue par les synthétiseurs de parole ;
x-slow
Équivaut à 80 mots par minute ;
slow
Équivaut à 120 mots par minute ;
medium
Équivaut à 180 - 200 mots par minute ;
fast
Équivaut à 300 mots par minute ;
x-fast
Équivaut à 500 mots par minute ;
faster
Ajoute 40 mots par minute au débit courant ;
slower
Soustrait 40 mots par minute au débit courant.
'voice-family'
Valeur : [[<voix-spécifique> | <voix-générique> ],]* [<voix-spécifique> | <voix-générique> ] | inherit
Initiale : selon l'agent utilisateur
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

La valeur est une liste de noms de familles de voix, ceux-ci séparés par une virgule et par ordre de priorité (à comparer avec 'font-family'). Les significations des valeurs sont :

<voix-générique>
Ce sont des familles de voix. Les valeurs admises sont 'male', 'female' et 'child' ;
<voix-spécifique>
Ces valeurs sont des instances spécifiques (ex. comedian, trinoids, carlos, lani, etc.) ;

Exemple(s) :

H1 { voice-family: announcer, male }
P.part.romeo  { voice-family: romeo, male }
P.part.juliet { voice-family: juliet, female }

On peut mettre les noms des voix spécifiques entre guillemets et on doit en effet le faire si un mot éventuel formant le nom ne se conforme pas aux règles de syntaxe pour les identifiants. On recommande aussi les guillemets pour les noms des voix spécifiques composés de plusieurs mots. Si on omet ces guillemets, les caractères blancs survenant avant ou après le nom de la famille de voix sont ignorés et les séquences éventuelles de ceux-ci sont converties en un seul espace.

'pitch'
Valeur : <fréquence> | x-low | low | medium | high | x-high | inherit
Initiale : medium
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété spécifie la tonalité moyenne (une fréquence) de la voix. Celle-ci dépend de la famille de voix. Par exemple, la tonalité moyenne pour une voix masculine se situe aux alentours de 120Hz et pour une voix féminine aux alentours de 210Hz.

Les significations des valeurs sont :

<fréquence>
Spécifie la tonalité moyenne de la voix courante en hertz (Hz) ;
x-low, low, medium, high, x-high
Ces valeurs ne correspondent pas à des fréquences absolues, ces valeurs dépendant de la famille de voix. Les agents utilisateurs devraient faire correspondre celles-ci avec des fréquences appropriées en fonction de la famille de voix et de l'environnement de l'utilisateur. Cependant, cette correspondance doit se faire dans un ordre cohérent (c.à.d. la valeur 'x-low' a une fréquence inférieure à celle de 'low', etc.).
'pitch-range'
Valeur : <nombre> | inherit
Initiale : 50
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété spécifie la variation d'une tonalité moyenne. La perception de la tonalité d'une voix humaine est déterminée par la fréquence fondamentale, la valeur typique de celle-ci étant 120Hz pour une voix masculine et 210Hz pour une voix féminine. Les langues humaines comportent des inflexions et des tonalités variables, ces variations véhiculent des significations supplémentaires et des accentuations. Ainsi, une voix exaltée, qui a beaucoup d'inflexions, affiche une grande variation de tonalité. Cette propriété donne l'étendue de cette variation, c.à.d. de combien la fréquence fondamentale peut dévier par rapport à la tonalité moyenne.

Les significations des valeurs sont :

<nombre>
Une valeur entre '0' et '100'. Une variation de tonalité de '0' produit une voix terne et monotone. Une variation de '50' correspond à une voix avec des inflexions normales. Pour des valeur supérieures à '50', la voie devient de plus en plus exaltée.
'stress'
Valeur : <nombre> | inherit
Initiale : 50
S'applique à :: tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété spécifie la hauteur des "pics locaux" dans le profil de l'intonation d'une voix. Par exemple, l'anglais est une langue accentuée, différentes parties d'une phrase recevant une accentuation primaire, secondaire ou tertiaire. La valeur de la propriété 'stress' régit l'ampleur de l'inflexion survenant à l'endroit de ces accentuations. Cette propriété s'utilise en conjonction avec la propriété 'pitch-range' et permet aux développeurs l'exploitation d'appareils auditifs de haute performance.

Les significations des valeurs sont :

<nombre>
Une valeur entre '0' et '100'. L'interprétation de celle-ci dépend de la langue employée. Soit, par exemple, une valeur de '50' pour une voix masculine moyenne anglaise (tonalité moyenne = 122Hz) avec une intonation et une accentuation normale, toutes choses étant égales, une voix italienne aurait un autre sens.
'richness'
Valeur : <nombre> | inherit
Initiale : 50
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété spécifie l'ampleur, ou la clarté, d'une voix. Une voix ample va "porter" dans une grande pièce, au contraire d'une voix douce (le terme "douce" se réfère au dessin de la forme de la vibration).

Les significations des valeurs sont :

<nombre>
Une valeur entre '0' et '100'. Plus la valeur est grande, plus la voix va porter. Une valeur plus faible produira une voix douce et mélodieuse.

19.9 Les propriétés de diction : 'speak-punctuation' et 'speak-numeral'

Une propriété de diction supplémentaire, speak-header, est décrite dans le chapitre sur les tables.

'speak-punctuation'
Valeur : code | none | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété spécifie comment lire les signes de ponctuation. Les significations des valeurs sont :

code
Les signes de ponctuation, telles que les points-virgules, les accolades et tout le reste, sont lus littéralement ;
none
Les signes de ponctuation ne sont pas lus, mais plutôt rendus naturellement, avec des pauses diverses.
'speak-numeral'
Valeur : digits | continuous | inherit
Initiale : continuous
S'applique à : tous les éléments
Héritée : oui
Pourcentage : sans objet
Médias : auditif

Cette propriété contrôle la façon de lire les nombres. Les significations des valeurs sont :

digits
Lit les nombres décomposés en leurs chiffres individuels. Ainsi, le nombre "237" est lu "deux trois sept" ;
continuous
Lit les nombres dans leur forme globale. Ainsi, le nombre "237" est lu "deux cent trente sept", leur représentation textuelles dépendant de la langue.


Appendice A : Un exemple de feuille de style pour HTML 4.0

Cet appendice est informatif, et non normatif.

Cette feuille de style décrit la mise en forme typique de tous les éléments HTML 4.0 ([HTML40]) à partir d'un examen approfondi des pratiques des agents utilisateurs actuels. On encourage les développeurs à l'utiliser comme feuille de style par défaut pour leurs implémentations.

La présentation complète de certains éléments HTML n'est pas exprimable en CSS2, ainsi les éléments remplacés (IMG, OBJECT), des scripts (SCRIPT, APPLET), des contrôles des formulaires et des cadres.

ADDRESS,
BLOCKQUOTE,
BODY, DD, DIV,
DL, DT,
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4,
H5, H6, IFRAME,
NOFRAMES,
OL, P, UL,
CENTER, DIR,
HR, MENU, PRE   { display: block }
OBJECT, APPLET  { display: inline }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.12em }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* Un exemple de style pour les éléments HTML 4.0 ABBR et ACRONYM */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Début des réglages bidi (ne pas changer) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Éléments de type bloc en HTML 4.0 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
COL, COLGROUP, TD, TH, CAPTION
                { unicode-bidi: embed }
/* Fin des réglages bidi */

@page           { margin: 10%
}
@media print {
  H1, H2, H3,
  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE,
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
}

@media aural {
  H1, H2, H3,
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}


Appendice B : Les changements depuis CSS1

  • B.1 Les nouvelles fonctionnalités
  • B.2 La mise à jour des descriptions
  • B.3 Les changements sémantiques depuis CSS1

Cet appendice est informatif, et non normatif.

CSS2 s'appuyant sur CSS1, toute feuille de style valide pour CSS1 l'est aussi pour CSS2. Les changements survenus entre la spécification CSS1 (voir [CSS1]) et cette spécification-ci se rangent dans trois catégories : les nouvelles fonctionnalités, les descriptions mises à jour de celles de CSS1 et les changements proprement dits apportés à CSS1.

B.1 Les nouvelles fonctionnalités

CSS2 apporte les fonctionnalités suivantes à celles de CSS1 :

  • Le concept des types de médias ;
  • La valeur 'inherit' à toutes les propriétés ;
  • Les médias paginés ;
  • Les feuilles de style auditives ;
  • Plusieurs fonctions pour l'internationalisation, dont les styles de numérotage des listes, la prise en compte des textes bidirectionnels et celle des marques de citation en fonction de la langue utilisée ;
  • Un mécanisme de sélection de police enrichi, incluant la correspondance intelligente des polices, leur synthèse et celles téléchargeables. Également, le concept des polices système a été introduit et une nouvelle propriété a été ajoutée, 'font-size-adjust' ;
  • Les tables, ainsi que de nouvelles valeurs pour les propriétés 'display' et 'vertical-align' ;
  • Les positionnements relatif et absolu, avec aussi le positionnement fixe ;
  • De nouveaux types de boîtes (en plus de bloc et en-ligne), compact et run-in ;
  • La possibilité de contrôler le débordement, le rognage et la visibilité du contenu dans le modèle de mise en forme visuel ;
  • La possibilité de spécifier des largeurs et hauteurs, minimales et maximales, dans le modèle de mise en forme visuel ;
  • Une extension du mécanisme des sélecteurs, avec les sélecteurs d' enfants, ceux adjacents et ceux d'attribut ;
  • Le contenu généré, les compteurs et le numérotage automatique et les marqueurs ;
  • Les ombrages de texte, au travers de la nouvelle propriété 'text-shadow' ;
  • Plusieurs nouvelles pseudo-classes, :first-child, :hover, :focus, :lang ;
  • Les couleurs et les polices système ;
  • Les curseurs ;
  • Les contours dynamiques.

B.2 La mise à jour des descriptions

La spécification CSS1 était courte et concise, celle-ci est beaucoup plus volumineuse et plus claire. Une grande part du contenu supplémentaire est consacré aux descriptions des nouvelles fonctionnalités, sans pour autant délaisser celles des fonctions de CSS1 qui ont été complétées. Sauf dans de rares cas, les descriptions refondues n'introduisent pas de changements syntaxiques ni sémantiques.

B.3 Les changements sémantiques depuis CSS1

Bien qu'une feuille de style CSS1 soit valide pour CSS2, il existe certains cas où l'interprétation de celle-ci prendra un sens différent en CSS2. La plupart de ces changements résulte de la prise en considération de l'expérience accumulée dans les implémentations, mais certains d'entre eux sont aussi des corrections d'erreurs.

  • La signification de "!important" a changé. En CSS1, la mention de "!important" dans la feuille de style de l'auteur avait priorité sur celle de l'utilisateur. Ceci est inversé en CSS2 ;
  • En CSS2, les valeurs de couleur sont rognées en fonction du gamut de l'appareil, et non plus en fonction du gamut de sRGB comme en CSS1 ;
  • En CSS1, la propriété 'margin-right' était ignorée quand on spécifiait à la fois une valeur pour 'margin-left' et pour 'width'. En CSS2, la relaxe de 'margin-left', ou de 'margin-right' dépend du sens d'écriture ;
  • En CSS1, les valeurs de plusieurs propriétés (ex. 'padding') se référaient à la largeur de leur élément parent. C'était une erreur, cette valeur devrait toujours se rapporter à la largeur d'un élément de type bloc, ce qui est reflété par l'introduction de l'expression "bloc conteneur" en CSS2 ;
  • En CSS2, la valeur initiale de la propriété 'display' est 'inline', et non 'block' comme en CSS1 ;
  • En CSS1, la propriété 'clear' s'appliquait à tous les éléments. C'était une erreur, la propriété ne s'applique qu'à ceux de type bloc en CSS2 ;
  • En CSS1, les pseudo-classes ':link', ':visited' et ':active' s'excluaient mutuellement. En CSS2, la pseudo-classe ':active' peut survenir en réunion avec ':link' ou ':visited' ;
  • Le facteur d'échelle recommandé, entre deux index adjacents dans la table des tailles des polices, pour la propriété 'font-size', a été réduit de 1.5 à 1.2 ;
  • La valeur calculée, et non pas la valeur réelle, de la propriété 'font-size' s'hérite ;
  • La description CSS1 de la valeur 'inside' (pour la propriété 'list-style-position') laissait entendre que la marge gauche du texte pouvait être affectée, plutôt que la position de la marque de liste. En CSS2, ce n'est plus le cas ;
  • Consulter également le chapitre normatif traitant des différences entre l'atomiseur de CSS1 et celui de CSS2.


Appendice C : Les notes pour l'implémentation et la mise en œuvre des polices

  • C.1 Un glossaire pour les polices
  • C.2 Le téléchargement des polices
  • C.3 La signification des chiffres Panose
  • C.4 La déduction des étendues Unicode pour TrueType
  • C.5 La génération automatique des descripteurs

Cet appendice est informatif, et non normatif.

C.1 Un glossaire pour les polices

DocLock™
La technologie DocLock™ de la société Bitstream assure que les ressources TrueDoc PFR ne peuvent être employées que dans le site auquel celles-ci sont destinées. Une ressource TrueDoc PFR déplacée vers un site différent, ou référencée par un autre site, ne fonctionnera pas ;
Signature digitale
Partie d'une technologie d'administration de confiance, employée pour la certification d'une ressource ;
Mise en cache des polices
La mise en cache des polices autorise la copie temporaire d'une police sur le système de l'utilisateur. Ces copies sont souvent stockées sur un disque dur en même temps que d'autres articles mis en cache comme, en particulier, les images pour un agent utilisateur ;
Le dessin d'une police
Un "indicateur" qui se rapporte au dessin particulier d'une police, excluant la taille de celle-ci ;
Correspondance de police
La correspondance de police est un processus de sélection d'une police similaire, fondé sur un ou plusieurs des attributs d'une police primaire. Quelques attributs courants : serif, sans-serif, graisse, hauteur de capitale, hauteur-x, espacement, langue et apparence. La correspondance de police est liée à l'algorithme utilisé et à l'échantillon des polices candidates ;
Sous-ensemble de représentation des glyphes
Le sous-ensemble de représentation des glyphes correspond au processus par lequel on retire les représentations de glyphes non souhaitées (l'information sur leurs mesures environnantes et leur crénage compris) d'une police primaire pour produire un sous-ensemble propre à un document ou un jeu de documents. C'est une opération particulièrement profitable pour les documents avec des écritures idéographiques, le complément des glyphes de la police de base pouvant être très important. La production d'un sous-ensemble de représentations des glyphes pour les documents employant des écritures avec des ligatures, comme pour l'arabe, est difficile si l'on ne connaît pas les règles de formation des ligatures du système d'affichage final ;
Intellifont
La technologie Intellifont, développée par la société Agfa, est le format natif pour les imprimantes de la société Hewlett-Packard et d'autres, celles-ci s'appuyant sur le langage PCL5. C'est également le format natif des ordinateurs de la marque Amiga ;
Infinifont
Une technique de synthèse de police qui, à partir d'un nombre Panose-1 (et, en option, des données supplémentaires décrivant la police), peut générer une copie de la police sans extrapolation des contours d'une police de référence ou sans interpolation entre deux contours, ou plus (voir [INFINIFONT]) ;
Italique
Une classe de formes de lettres pour les écritures latines, ces formes étant plus cursives que celle des lettres romanes, mais moins que celles des lettres manuscrites. Souvent, on dessine une paire de polices pour une utilisation conjointe, une police serif romane et une police italique. On emploie d'autres termes pour décrire cette classe, comme le terme cursive (kursiv pour les écritures cyrilliques). Pour une police sans serif, la police appariée consiste souvent en une variante inclinée ou oblique plutôt que de provenir d'une classe différente.

Formes italiques. [D]

Crénage
Une modification de l'espacement entre les représentations de glyphes donnés, qui semblerait autrement trop proches ou trop éloignés les uns des autres, pour obtenir un certain équilibre typographique ;

Illustration du crénage [D]

Police Multiple Master
Une police Multiple Master contient deux polices primaires qui sont traitées par un logiciel de rendu particulier pour donner une interpolation résultante. La société Adobe Systems fournit un mécanisme paramétrable pour contrôler le résultat ou la police interpolée résultante. Ces paramètres décrivant généralement les caractéristiques d'une police originale on parle du résultat "multiple master" comme de la "police synthétisée" ;
OpenType
OpenType est un élargissement du format de police TrueType qui contient des informations supplémentaires, celles-ci augmentant les capacités des polices pour une typographie internationale de qualité. Avec OpenType, on peut associer un seul caractère avec plusieurs représentations de glyphes et, à l'inverse, associer une combinaison de caractères avec une seule représentation de glyphe (la formation d'une ligature). Ce format inclus une information bidimensionnelle qui autorise des fonctions de positionnement et de liaison des glyphes complexes. Les formats TrueType et OpenType contiennent une information explicite sur l'écriture et la langue, de ce fait, une application de traitement de texte peut s'adapter en conséquence (voir [OPENTYPE]) ;
Police de serveur
Une police de serveur est une ressource de polices installée sur un serveur Web, cette ressource étant référencée par la définition d'une PoliceWeb. L'agent utilisateur peut employer celle-ci pour le rendu d'une page ;
Speedo
La technologie de police Speedo, développée par la société Bitstream, est le format de police natif des ordinateurs de marque Atari ST et Falcon. Celle-ci est également employée par certaines plates-formes utilisant le système X Window ;
TrueDoc
La technologie TrueDoc, développée par la société Bitstream, pour la création, le transport et l'illustration d'objets de police variables et indépendants de la plate-forme sur le Web. Ces objets sont créés par l'enregistreur de forme de caractère TrueDoc (Character Shape Recorder) et sont rendus par le lecteur de forme du caractère TrueDoc (Charachter Shape Player). Cette technologie est prévue pour l'affichage et l'impression sur le Web ;
TrueDoc Portable Font Resource
Un objet de police TrueDoc Portable Font Resource (ou PFR), indépendant de la plate-forme, est produit par un enregistreur de forme de caractère. On peut y mettre en entrée des polices TrueType ou Type 1 de toute provenance, que ce soit sur Windows, Macintosh ou Unix. Les ressources produites offrent de bons ratios de compression, sont indépendantes de la plate-forme et, comme elles ne sont pas dans un format natif (TrueType ou Type 1), ne peuvent facilement être installées sur un système ;
TrueType
Le format de police TrueType , développé par la société Apple puis licencié à la société Microsoft. C'est le format de police système natif pour les plates-formes Windows et Macintosh. Celui-ci contient un jeu de tables hiérarchique et des représentations de glyphes. Les caractères peuvent être repérés un à un et selon leur taille exprimées en points, ce qui produit d'excellents résultats pour les résolutions des écrans. Bien que les polices TrueType soient peu différentes entre Windows et Macintosh, celles-ci peuvent l'être suffisamment et empêcher leur usage commun.
TrueType Collection
Le format TrueType Collection (ou TTC), une extension du format TrueType, inclut des tables permettant la réunion de plusieurs polices TrueType dans un seul fichier de police TrueType. Les fichiers de ce type sont encore relativement peu courants ;
Polices TrueType GX
Les polices TrueType GX contiennent des rajouts au format TrueType standard qui permettent certaines variations, de façon similaire aux polices Multiple Master. Celles-ci peuvent varier selon divers paramètres tels la graisse, la hauteur et l'inclinaison. On peut définir ces paramètres pour obtenir pratiquement tous les effets. Le format TrueType GX peut également comporter d'autres représentations de glyphes de substitution pour les ligatures, les formes contextuelles, les fractions, etc. À ce jour, ce format n'est disponible que pour la plate-forme Macintosh (voir [TRUETYPEGX]) ;
Police Type 1
Les polices Type 1, développées par la société Adobe Systems, ont été l'un des premiers formats variables disponibles. Celles-ci contiennent généralement 228 caractères dont les représentations de glyphes sont décrites par des courbes de Bézier du troisième ordre. Les formats sont similaires pour les plates-formes Macintosh, Windows et Unix mais néanmoins séparés ; La société Adobe fournit un logiciel de gestion des polices, Adobe Type Manager, pour ces trois plates-formes. Le format Type1c est la forme de stockage avec une compression non destructive la plus récente pour les représentations de glyphes du Type 1 ;
Attache par URI
Un processus pour lier une ressource de police donnée à un certain site Web, ceci par l'incorporation d'un URI crypté ou d'un certificat digital d'utilisation dans la ressource même de police.

C.2 Le téléchargement des polices

De nombreux formats de police différents sont employés sur diverses plates-formes. Pour la sélection d'un format de police adéquat, on utilise une négociation de contenu transparente (voir [NEGOT]). On peut toujours savoir quand une police n'est plus référencée, car l'URI se trouve dans la description de la police. Une implémentation donnée saura lesquels des formats de polices téléchargeables lui sont connus et évitera ainsi, avec ces indices, de télécharger un format inexploitable.

C.3 La signification des chiffres Panose

Illustration de Panose-1 [D]

Le système d'exploitation Windows95 utilise les informations des rubriques Famille, Style Serif et Proportion pour la sélection et la correspondance d'une police.

On donne ci-après la signification des dix chiffres avec leurs valeurs admises (entre parenthèses), pour le cas le plus courant où le chiffre pour la "famille" est 2 - texte et affichage (quand le premier chiffre a une valeur différente, les neufs chiffres restants prennent un autre sens). Pour des détails supplémentaires sur Panose-1, voir [PANOSE].

Famille
  • Tous (0)
  • Pas de correspondance (1)
  • [PANOSE] Texte et affichage latins (2)
  • [PANOSE] Écriture latine (3)
  • [PANOSE] Décoratif latin (4)
  • [PANOSE] Pictural latin (5)
Style des sérifs
  • Tous (0)
  • Pas de correspondance (1)
  • Anse (2)
  • Anse obtuse(3)
  • Anse carrée (4)
  • Anse obtuse carrée (5)
  • Carré (6)
  • Mince (7)
  • Arête (8)
  • Exagérée (9)
  • Triangulaire (10)
  • Normal Sans (11)
  • Obtus Sans (12)
  • Perpendiculaire Sans (13)
  • Évasé (14)
  • Arrondi (15)
Graisse
  • Tous (0)
  • Pas de correspondance (1)
  • Very Light (2)[100]
  • Light (3) [200]
  • Thin (4) [300]
  • Book (5) [400] même chose que pour 'font-weight: normal;' en CSS1
  • Medium (6) [500]
  • Demi (7) [600]
  • Bold (8) [700] même chose que pour 'font-weight: bold;' en CSS1
  • Heavy (9) [800]
  • Black (10) [900]
  • Extra Black / Nord (11) [900] force une correspondance avec l'échelle 100-900 de CSS1
Proportion
  • Tous (0)
  • Pas de correspondance (1)
  • Ancienne mode (2)
  • Moderne (3)
  • Largeur égalisée (4)
  • Élargie (5)
  • Étroite (6)
  • Très élargie (7)
  • Très étroite (8)
  • Monospace (9)
Contraste
  • Tous (0)
  • Pas de correspondance (1)
  • Aucun (2)
  • Très faible (3)
  • Faible (4)
  • Moyen faible (5)
  • Moyen (6)
  • Moyen grand (7)
  • Grand (8)
  • Très grand (9)
Variation du trait
  • Tous (0)
  • Pas de correspondance (1)
  • Aucune variation (2)
  • Graduelle/Diagonale (3)
  • Graduelle/Transitionnelle (4)
  • Graduelle/Verticale (5)
  • Graduelle/Horizontale (6)
  • Rapide/Verticale (7)
  • Rapide/Horizontale (8)
  • Instantanée/Horizontale (9)
  • Instantanée/Verticale (10)
Style des branches
  • Tous (0)
  • Pas de correspondance (1)
  • Branches droites/Horizontal (2)
  • Branches droites/Calé (3)
  • Branches droites/Vertical (4)
  • Branches droites/Serif simple (5)
  • Branches droites/Serif double (6)
  • Branches non droites/Horizontal (7)
  • Branches non droites/Calé (8)
  • Branches non droites/Vertical 90)
  • Branches non droites/Serif simple (10)
  • Branches non droites/Serif double (11)
Forme de la lettre
  • Tous (0)
  • Pas de correspondance (1)
  • Normale/Touchante (2)
  • Normale/Équilibrée (3)
  • Normale/Encadrée (4)
  • Normale/Aplatie (5)
  • Normale/Arrondie (6)
  • Normale/Décentrée (7)
  • Normale/Carrée (8)
  • Oblique/Touchante (9)
  • Oblique/Équilibrée (10)
  • Oblique/Encadrée (11)
  • Oblique/Aplatie (12)
  • Oblique/Arrondie (13)
  • Oblique/Décentrée (14)
  • Oblique/Carrée (15)
Traits du milieu
  • Tous (0)
  • Pas de correspondance (1)
  • Standard/Coupé (2)
  • Standard/Pointu (3)
  • Standard/Serif (4)
  • Haut/Coupé (5)
  • Haut/Pointu (6)
  • Haut/Serif (7)
  • Constant/Coupé (8)
  • Constant/Pointu (9)
  • Constant/Serif (10)
  • Bas/Coupé (11)
  • Bas/Pointu (12)
  • Bas/Serif (13)
Hauteur-x
  • Tous (0)
  • Pas de correspondance (1)
  • Constante/Petite (2)
  • Constante/Standard (3)
  • Constante/Grande (4)
  • Plongeante/Petite (5)
  • Plongeante/Standard (6)
  • Plongeante/Grande (7)

La spécification Panose-2 (voir [PANOSE2]) offre une classification des polices plus complète et une technologie de correspondance qui ne se limite pas aux polices latines. Par exemple, on peut comparer les caractéristiques des sérifs d'une police latine avec les terminaisons des traits d'une police Kanji.

Illustration de Panose-2

La valeur Panose-2 n'est incorporée à aucun format de police connu, néanmoins on peut la mesurer.

C.4 La déduction des étendues Unicode pour TrueType

C'est une information qui est contenue dans la police et située dans les bits 'ulUnicodeRange de la table 'OS/2' (s'ils existent), ceux-ci contenant une représentation du jeu. Cette table est définie dans la spécification TrueType version corrigée 1.66 de la société Microsoft. En considérant l'information comme étant un jeu, chacun des éléments correspond avec un ensemble de caractères Unicode 1.1, la présence d'un élément donné dans le jeu est une indication que la police a un ou plusieurs glyphes représentés dans cet ensemble. Le jeu comprend 128 éléments décrits plus loin. L'ordre de leur succession suit en général celui du standard Unicode 1.1. On peut utiliser cette table pour convertir l'information contenue dans une police TrueType en un descripteur CSS 'unicode-range'.
Bloc | Adresse | Nom de l'ensemble | Étendue Unicode
0 | 1 | Latin de base | U+0-7F
1 | 2 | Supplément Latin-1 | U+80-FF
2 | 4 | Latin-1 étendu-A | U+100-17F
3 | 8 | Latin étendu-B | U+180-24F
4 | 1 | Extensions IPA | U+250-2AF
5 | 2 | Lettres modifiant l'espacement | U+2B0-2FF
6 | 4 | Combinaisons de marques diacritiques | U+300-36F
7 | 8 | Grec | U+370-3CF
8 | 1 | Symboles grecs et copte | U+3D0-3EF
9 | 2 | Cyrillique | U+400-4FF
10 | 4 | Arménien | U+530-58F
11 | 8 | Hébreu | U+590-5FF
12 | 1 | Hébreu étendu-A Hébreu étendu-B | Quelles étendues ?
13 | 2 | Arabe | U+600-69F
14 | 4 | Arabe étendu | U+670-6FF
15 | 8 | Devanagari | U+900-97F
16 | 1 | Bengali | U+980-9FF
17 | 2 | Gurmukhi | U+A00-A7F
18 | 4 | Gujarati | U+A80-AFF
19 | 8 | Oriya | U+B00-B7F
20 | 1 | Tamil | U+B80-BFF
21 | 2 | Telugu | U+C00-C7F
22 | 4 | Kannada | U+C80-CFF
23 | 8 | Malayalam | U+D00-D7F
24 | 1 | Thai | U+E00-E7F
25 | 2 | Lao | U+E80-EFF
26 | 4 | Géorgien | U+10A0-10EF
27 | 8 | Georgien étendu | U+10F0-10FF ?
28 | 1 | Hangul Jamo | U+1100-11FF
29 | 2 | Latin étendu supplémentaire | -
30 | 4 | Grec étendu | U+1F00-1FFF
31 | 8 | Ponctuation générale | U+2000-206F
32 | 1 | Exposants et indices | -
33 | 2 | Symboles monétaires | U+20A0-20CF
34 | 4 | Combinaisons de marques pour les symboles | U+20D0-20FF
35 | 8 | Symboles avec un aspect de lettre | U+2100-214F
36 | 1 | Formes numériques | U+2150-218F
37 | 2 | Flêches | U+2190-21FF
38 | 4 | Opérateurs mathématiques | U+2200-22FF
39 | 8 | Divers techniques | U+2300-23FF
40 | 1 | Dessins de contrôle | U+2400-243F
41 | 2 | Reconnaissance optique des caractères | U+2440-245F
42 | 4 | Les alphanumériques inclus | U+2460-24FF
43 | 8 | Dessins de boîtes | U+2500-257F
44 | 1 | Éléments d'ensemble | U+2580-259F
45 | 2 | Formes géométriques | U+25A0-25FF
46 | 4 | Symboles divers | U+2600-26FF
47 | 8 | Dingbats | U+2700-27BF
48 | 1 | CJK Symboles et ponctuation | U+3000-303F
49 | 2 | Hiragana | U+3040-309F
50 | 4 | Katakana | U+30A0-30FF
51 | 8 | Bopomofo | U+3100-312F
52 | 1 | Hangul compatibilité Jamo | U+3130-318F
53 | 2 | CJK Divers | ?
54 | 4 | CJK Lettres et mois inclus | U+3200-32FF
55 | 8 | CJK Compatibilité | U+3300-33FF
56 | 1 | Hangul | U+AC00-D7FF
59 | 8 | CJK Idéogrammes unifiés | U+4E00-9FFF
60 | 1 | Aire d'utilisation privée | U+E000-F8FF
61 | 2 | CJK idéogrammes de compatibilité | U+F900-FAFF
62 | 4 | Formes de présentation alphabétique | U+FB00-FB4F
63 | 8 | Formes-A de présentation arabe | U+FB50-FDFF
64 | 1 | Combinaisons de demi-marques | U+FE20-FE2F
65 | 2 | CJK Formes de compatibilité | U+FE30-FE4F
66 | 4 | Petites variantes de forme | U+FE50-FE6F
67 | 8 | Formes-B de présentation arabe | U+FE70-FEFF
68 | 1 | Formes de demi-largeur et de largeur entière | U+FF00-FFEF
69 | 2 | Spéciaux | U+FFF0-FFFD

Le système de champs de bits de TrueType présente l'inconvénient d'être lié à Unicode 1.1 et celui de ne pouvoir accompagner l'évolution de Unicode, ainsi, par exemple, celui-ci ne peut représenter le tibétain ou les autres écritures introduites depuis Unicode 2.0.

C.5 La génération automatique des descripteurs

Les outils de création devraient permettre aux auteurs l'ajout et l'édition des descripteurs de police. Dans certains cas, ces outils peuvent fournir une aide pour l'examen des polices installées localement et pour la génération des descripteurs de police mentionnés dans la feuille de style. Cette fonction peut aussi être accomplie par des outils produisant des sous-ensembles de polices, ou des conversions de police, en vue de leur chargement dynamique.

Cette table suggère, pour les formats de police courants, où trouver ces informations :
Descripteur | Type 1 | TrueType et OpenType | TrueType GX [TRUETYPEGX]
'ascent' | dans 'Ascender' dans le fichier AFM/PFM | dans 'Ascender' dans la table 'hhea' ou (de préférence) dans 'sTypoAscender' dans la table 'OS/2' | dans 'horizontalBefore' dans la table 'fmtx'
'baseline' |  |  | dans la table bsln, voir note
'bbox' | dans le dictionnaire de police FontBBox | dans les entrées 'xMin', 'xMax', 'yMin' et 'yMax' de la table 'head' |
'cap-height' | dans CapHeight dans le fichier AFM/PFM |  |
'descent' | dans 'Descender' dans le fichier AFM/PFM |  |
'mathline' |  |  | dans la table bsln
'font-family' | dans FamilyName, le dictionnaire d'information de police | dans la table name |
'stemh' | dans StdHW, le dictionnaire privé du fichier AFM/PFM |  |
'stemv' | dans /StdVW, le dictionnaire privé | dans la table cvt |
'topline' |  |  | dans la table bsln
'unicode-range' | dans le fichier cmap | dans la table OS/2, voir l'appendice C |
'units-per-em' | dans FontMatrix, le dictionnaire de police | dans unitsPerEm, dans la table head |
'widths' |  | dans la table hmtx |

  • Dans la table bsln, on peut utiliser la ligne de base idéographique centrale pour des successions majoritaires de caractères idéographiques, la ligne de base idéographique inférieure convenant mieux à un jet de caractères majoritairement latins, grecs ou cyrilliques.


Appendice D : La grammaire de CSS2

  • D.1 La grammaire
  • D.2 Le scanner lexical
  • D.3 La comparaison entre les atomisations de CSS2 et CSS1

Cet appendice est normatif.

La grammaire ci-dessous définit la syntaxe de CSS2. En quelque sorte, c'est un sous-ensemble de CSS2 dans la mesure où cette spécification impose des contraintes sémantiques supplémentaires que n'exprime pas cette grammaire. Un agent utilisateur conforme doit aussi adhérer aux règles d'interprétations ascendantes, à la convention de notation des propriétés et valeurs et celle de la notation des unités. Le langage du document pouvant en plus imposer certaines restrictions (ex. en HTML, il existe des restrictions sur les valeurs admises par l'attribut "class").

D.1 La grammaire

La grammaire ci-dessous est LL(1) (mais noter que la plupart des agents utilisateurs ne devraient pas l'employer telle quelle car celle-ci n'exprime pas les conventions d'interprétation, mais seulement la syntaxe CSS2). Le format de ces productions est optimisé pour une consultation humaine, certaines notations raccourcies allant au-delà de Yacc (voir [YACC]) étant employées :

  • * : 0 ou plus ;
  • + : 1 ou plus ;
  • ? : 0 ou 1 ;
  • | : alternatives séparées ;
  • [ ] : regroupement.

Voici les productions :

stylesheet
  : [ CHARSET_SYM S* STRING S* ';' ]?
    [S|CDO|CDC]* [ import [S|CDO|CDC]* ]*
    [ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*
  ;
media
  : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* IDENT? pseudo_page? S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
pseudo_page
  : ':' IDENT
  ;
font_face
  : FONT_FACE_SYM S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
operator
  : '/' S* | ',' S* | /* vide */
  ;
combinator
  : '+' S* | '>' S* | /* vide */
  ;
unary_operator
  : '-' | '+'
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator simple_selector ]*
  ;
simple_selector
  : element_name? [ HASH | class | attrib | pseudo ]* S*
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* IDENT S* ')' ]
  ;
declaration
  : property ':' S* expr prio?
  | /* vide */
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : term [ operator term ]*
  ;
term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* | function ]
  | STRING S* | IDENT S* | URI S* | UNICODERANGE S* | hexcolor
  ;
function
  : FUNCTION S* expr ')' S*
  ;
/*
 * Il y a une contrainte sur la couleur,
 * celle-ci devant avoir 3 ou 6 chiffres hexadécimaux (ex. [0-9a-fA-F])
 * après le signe "#" ; ex. "#000" est OK, mais pas "#abcd".
 */
hexcolor
  : HASH S*
  ;

D.2 Le scanner lexical

Ce qui suit est l'atomiseur, écrit en notation Flex (voir [FLEX]) L'atomiseur est insensible à la casse.

Les deux expressions "\377" qui surviennent représentent le nombre du caractère le plus élevé que Flex peut gérer (en décimal : 255). Celles-ci devraient être interprétées comme étant "\4177777" (en décimal : 1114111), lequel est le code du point le plus élevé pour Unicode/ISO-10646.

%option case-insensitive

h		[0-9a-f]
nonascii	[\200-\377]
unicode		\\{h}{1,6}[ \t\r\n\f]?
escape		{unicode}|\\[ -~\200-\377]
nmstart		[a-z_]|{nonascii}|{escape}
nmchar		[a-z0-9-_]|{nonascii}|{escape}
string1		\"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2		\'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident		{nmstart}{nmchar}*
name		{nmchar}+
num		[0-9]+|[0-9]*"."[0-9]+
string		{string1}|{string2}
url		([!#$%&*-~]|{nonascii}|{escape})*
w		[ \t\r\n\f]*
nl		\n|\r\n|\r|\f
range		\?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))

%%

[ \t\r\n\f]+		{return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/	/* ignorer les commentaires */

"<!--"			{return CDO;}
"-->"			{return CDC;}
"~="			{return INCLUDES;}
"|="			{return DASHMATCH;}

{string}		{return STRING;}

{ident}			{return IDENT;}

"#"{name}		{return HASH;}

"@import"		{return IMPORT_SYM;}
"@page"			{return PAGE_SYM;}
"@media"		{return MEDIA_SYM;}
"@font-face"		{return FONT_FACE_SYM;}
"@charset"		{return CHARSET_SYM;}

"!{w}important"		{return IMPORTANT_SYM;}

{num}em			{return EMS;}
{num}ex			{return EXS;}
{num}px			{return LENGTH;}
{num}cm			{return LENGTH;}
{num}mm			{return LENGTH;}
{num}in			{return LENGTH;}
{num}pt			{return LENGTH;}
{num}pc			{return LENGTH;}
{num}deg		{return ANGLE;}
{num}rad		{return ANGLE;}
{num}grad		{return ANGLE;}
{num}ms			{return TIME;}
{num}s			{return TIME;}
{num}Hz			{return FREQ;}
{num}kHz		{return FREQ;}
{num}{ident}		{return DIMEN;}
{num}%			{return PERCENTAGE;}
{num}			{return NUMBER;}

"url("{w}{string}{w}")"	{return URI;}
"url("{w}{url}{w}")"	{return URI;}
{ident}"("		{return FUNCTION;}

U\+{range}		{return UNICODERANGE;}
U\+{h}{1,6}-{h}{1,6}	{return UNICODERANGE;}

.			{return *yytext;}

D.3 La comparaison entre les atomisations de CSS2 et CSS1

Il existe quelques différences entre la syntaxe spécifiée dans la recommandation CSS1 ([CSS1]) et celle spécifiée plus haut. La plupart de ces différences étant dues aux nouveaux jetons de CSS2 qui n'existaient pas en CSS1. Et les autres étant dues au fait que la grammaire a été récrite pour une meilleure lisibilité. Cependant, il y a certains changements incompatibles, ceux-ci étaient considérés comme des erreurs de la syntaxe CSS1. Leur explication suit :

  • L'encodage des caractères des feuilles de style CSS1 ne pouvaient avoir lieu que sur 1 octet, comme pour ASCII et ISO-8859-1. CSS2 n'a plus ces limitations. Dans les faits, l'extrapolation à partir de l'atomiseur CSS1 ne présentant pas de grandes difficultés, certains agents utilisateurs acceptaient les encodages sur 2 octets ;
  • CSS1 n'admettait que quatre chiffres hexadécimaux après la barre oblique inverse (\) pour la désignation des caractères Unicode, CSS2 en admet six. En plus, CSS2 admet un caractère blanc pour la délimitation d'une séquence d'échappement. Par exemple, selon CSS1, la chaîne "\abcdef" est formée de 3 lettres (\abcd, e et f), selon CSS2, celle-ci n'en a qu'une (\abcdef) ;
  • Le caractère tabulation (ASCII 9) n'était pas admis dans une chaîne. C'est pourquoi, comme en CSS1, on n'employait les chaînes que pour les noms des polices et pour les URLs, le seul cas où cela pouvait conduire à une incompatibilité entre CSS1 et CSS2 réside dans une feuille de style dans laquelle le nom d'une famille de polices contient une tabulation ;
  • De la même façon en CSS1, les nouvelles lignes (échappées avec une barre oblique inverse) n'étaient pas admises ;
  • CSS2 interprète un nombre immédiatement suivi par un identifiant comme étant un jeton DIMEN (c.à.d. une unité inconnue), CSS1 l'interprétait comme un nombre et un identifiant. Cela signifie que pour CSS1, les déclarations 'font: 10pt/1.2serif' tout comme 'font: 10pt/1.2 serif' étaient valides, mais pour CSS2, l'espace est devenu obligatoire avant "serif" (certains agents utilisateurs acceptaient la première forme mais pas la seconde) ;
  • En CSS1, le nom d'une classe pouvait commencer par un chiffre (".55ft"), à moins qu'il s'agissait d'une dimension reconnue (".55in"). CSS2 interprète de telles classes comme étant des dimensions inconnues (ce qui laisse le champs libre pour l'addition ultérieure de nouvelles unités). Pour que la classe ".55ft" soit valide en CSS2, le premier chiffre doit être échappé (".\35 5ft").


Appendice E : Références

  • E.1 Les références normatives
  • E.2 Les références informatives

E.1 Les références normatives

[COLORIMETRY]
"Colorimetry, Second Edition", CIE Publication 15.2-1986, ISBN 3-900-734-00-3.
Disponible à http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html ;
[CSS1]
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 December 1996.
Disponible à http://www.w3.org/TR/REC-CSS1-961217.html ;
[FLEX]
"Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213 ;
[HTML40]
"HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 July 1997.
Disponible à http://www.w3.org/TR/REC-html40/. Ce document définit trois définitions de type de document, Strict, Transitional et Frameset, celles-ci étant atteignables depuis cette Recommandation ;
[IANA]
"Assigned Numbers", STD 2, RFC 1700, USC/ISI, J. Reynolds and J. Postel, October 1994.
Disponible à ftp://ftp.internic.net/rfc/rfc1700.txt ;
[ICC32]
"ICC Profile Format Specification, version 3.2", 1995.
Disponible à ftp://sgigate.sgi.com/pub/icc/ICC32.pdf ;
[ISO8879]
ISO 8879:1986 "Information Processing -- Text and Office Systems -- Standard Generalized Markup Language (SGML)", ISO 8879:1986.
Pour une liste des entités SGML, consulter ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/ ;
[ISO10646]
"Information Technology - Universal Multiple- Octet Coded Character Set (UCS) - Part 1: Architecture and Basic Multilingual Plane", ISO/IEC 10646-1:1993. La spécification actuelle prend aussi en considération les cinq premiers amendements à ISO/IEC 10646-1:1993. On peut consulter utilement les documents relatifs à BMP et au plan 1 qui montrent l'emplacement des écritures par rapport à celui des étendues numériques ;
[PNG10]
"PNG (Portable Network Graphics) Specification, Version 1.0 specification", T. Boutell ed., 1 October 1996.
Disponible à http://www.w3.org/pub/WWW/TR/REC-png-multi.html ;
[RFC1808]
"Relative Uniform Resource Locators", R. Fielding, June 1995.
Disponible à ftp://ds.internic.net/rfc/rfc1808.txt ;
[RFC2045]
"Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies", N. Freed and N. Borenstein, November 1996.
Disponible à ftp://ftp.internic.net/rfc/rfc2045.txt. Noter que cet RFC2045 annule RFC1521, RFC1522 et RFC1590 ;
[RFC2068]
"HTTP Version 1.1 ", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen, and T. Berners-Lee, January 1997.
Disponible à ftp://ftp.internic.net/rfc/rfc2068.txt ;
[RFC2070]
"Internationalization of the HyperText Markup Language", F. Yergeau, G. Nicol, G. Adams, and M. Dürst, January 1997.
Disponible à ftp://ds.internic.net/rfc/rfc2070.txt ;
[RFC2119]
"Key words for use in RFCs to Indicate Requirement Levels", S. Bradner, March 1997.
Disponible à ftp://ds.internic.net/rfc/rfc2119.txt ;
[RFC2318]
"The text/css Media Type", H. Lie, B. Bos, C. Lilley, March 1998.
Disponible à ftp://ds.internic.net/rfc/rfc2318.txt ;
[RFC1738]
"Uniform Resource Locators", T. Berners-Lee, L. Masinter, and M. McCahill, December 1994.
Disponible à ftp://ds.internic.net/rfc/rfc1738.txt ;
[SRGB]
"Proposal for a Standard Color Space for the Internet - sRGB", M. Anderson, R. Motta, S. Chandrasekar, M. Stokes.
Disponible à http://www.w3.org/Graphics/Color/sRGB.html ;
[UNICODE]
"The Unicode Standard: Version 2.0", The Unicode Consortium, Addison-Wesley Developers Press, 1996. Pour la bidirectionnalité, voir aussi le rectificatif à http://www.unicode.org/unicode/uni2errata/bidi.htm. Pour plus d'information et pour la dernière version de Unicode, consulter le site du Consortium Unicode à http://www.unicode.org/ ;
[URI]
"Uniform Resource Identifiers (URI): Generic Syntax and Semantics", T. Berners-Lee, R. Fielding, L. Masinter.
August 1998. Internet RFC 2396. Disponible à http://www.ietf.org/rfc/rfc2396.txt ;
[XML10]
"Extensible Markup Language (XML) 1.0" T. Bray, J. Paoli, C.M. Sperberg-McQueen, editors, 10 February 1998.
Disponible à http://www.w3.org/TR/REC-xml/ ;
[YACC]
"YACC - Yet another compiler compiler", S. C. Johnson, Technical Report, Murray Hill, 1975.

E.2 Les références informatives

[CHARSETS]
Les valeurs des jeux de caractères enregistrées. Télécharger la liste de celles-ci à ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets ;
[DOM]
"Document Object Model Specification", L. Wood, A. Le Hors, 9 October 1997.
Disponible à http://www.w3.org/TR/WD-DOM/ ;
[ISO10179]
ISO/IEC 10179:1996 "Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL)"
Disponible à http://occam.sjf.novell.com:8080/dsssl/dsssl96 ;
[GAMMA]
"Gamma correction on the Macintosh Platform", C. A. Poynton.
Disponible à ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf ;
[HTML32]
"HTML 3.2 Reference Specification", Dave Raggett, 14 January 1997.
Disponible à http://www.w3.org/TR/REC-html32.html ;
[INFINIFONT]
Voir http://www.fonts.com/hp/infinifont/moredet.html ;
[ISO9899]
ISO/IEC 9899:1990 Programming languages -- C.
[MONOTYPE]
Voir http://www.monotype.com/html/oem/uni_scrmod.html ;
[NEGOT]
"Transparent Content Negotiation in HTTP", K. Holtman, A. Mutz, 9 March, 1997.
Disponible à http://gewis.win.tue.nl/~koen/conneg/draft-ietf-http-negotiation-01.html ;
[OPENTYPE]
Voir http://www.microsoft.com/OpenType/OTSpec/tablist.htm ;
[PANOSE]
Pour des informations sur les mesures de classification PANOSE, consulter http://www.fonts.com/hp/panose/greybook et notamment les chapitres suivants : Latin Text, Latin Script, Latin Decorative et Latin Pictorial.

Les nombres Panose de certaines polices sont disponibles en ligne, on peut effectuer leur recherche ;

[PANOSE2]
Voir http://www.w3.org/Fonts/Panose/pan2.html. Panose-2 ne se limite pas aux polices latines ;
[POSTSCRIPT]
"The PostScript Language Reference Manual", Second Edition, Adobe Systems, Inc., Addision-Wesley Publishing Co., December 1990 ;
[RFC1630]
"Universal Resource Identifiers in WWW: A Unifying Syntax for the Expression of Names and Addresses of Objects on the Network as used in the World-Wide Web", T. Berners-Lee, June 1994.
Disponible à ftp://ftp.internic.net/rfc/rfc1630.txt ;
[RFC1766]
"Tags for the Identification of Languages", H. Alvestrand, March 1995.
Disponible à ftp://ftp.internic.net/rfc/rfc1766.txt ;
[RFC1866]
"HyperText Markup Language 2.0", T. Berners-Lee and D. Connolly, November 1995.
Disponible à ftp://ds.internic.net/rfc/rfc1866.txt ;
[RFC1942]
"HTML Tables", Dave Raggett, May 1996.
Disponible à ftp://ds.internic.net/rfc/rfc1942.txt ;
[TRUETYPEGX]
Voir http://fonts.apple.com/TTRefMan/index.html pour des détails sur le format TrueType GX de la société Apple Computer, ainsi que les descriptions des tables rajoutées et les spécifications de la qualité des polices ;
[W3CSTYLE]
La page des ressources du W3C sur les feuilles de style sur le Web.
Disponible à http://www.w3.org/pub/WWW/Style ;
[WAI-PAGEAUTH]
Le guide "WAI Accesibility Guidelines: Page Authoring" pour construire des documents accessibles est disponible à
http://www.w3.org/TR/WD-WAI-PAGEAUTH.


Appendice F : Index des propriétés

Nom | Valeurs | Valeur initiale | S'applique à (défaut : all) | Héritée ? | Pourcentage (défaut : sans objet) | Groupes de médias
'azimuth' | <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit | center |  | oui |  | auditif
'background' | ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit | voir les propriétés individuelles |  | non | admis pour 'background-position' | visuel
'background-attachment' | scroll | fixed | inherit | scroll |  | non |  | visuel
'background-color' | <couleur> | transparent | inherit | transparent |  | non |  | visuel
'background-image' | <uri> | none | inherit | none |  | non |  | visuel
'background-position' | [ [<pourcentage> | <longueur> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit | 0% 0% | ceux des éléments de type bloc et ceux remplacés | non | se rapporte à la taille de la boîte elle-même | visuel
'background-repeat' | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat |  | non |  | visuel
'border' | [ 'border-width' || 'border-style' || <couleur> ] | inherit | voir les propriétés individuelles |  | non |  | visuel
'border-collapse' | collapse | separate | inherit | collapse | ceux des éléments avec 'display:table' ou 'display:inline-table' | oui |  | visuel
'border-color' | <couleur>{1,4} | transparent | inherit | voir les propriétés individuelles |  | non |  | visuel
'border-spacing' | <longueur> <longueur>? | inherit | 0 | ceux des éléments avec 'display:table' ou 'display:inline-table' | oui |  | visuel
'border-style' | <bordure-style>{1,4} | inherit | voir les propriétés individuelles |  | non |  | visuel
'border-top' 'border-right' 'border-bottom' 'border-left' | [ 'border-top-width' || 'border-style' || <couleur> ] | inherit | voir les propriétés individuelles |  | non |  | visuel
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | <couleur> | inherit | la valeur de la propriété 'color' |  | non |  | visuel
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' | <bordure-style> | inherit | none |  | non |  | visuel
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' | <bordure-épaisseur> | inherit | medium |  | non |  | visuel
'border-width' | <bordure-épaisseur>{1,4} | inherit | voir les propriétés individuelles |  | non |  | visuel
'bottom' | <longueur> | <pourcentage> | auto | inherit | auto | éléments positionnés | non | se rapporte à la hauteur du bloc conteneur | visuel
'caption-side' | top | bottom | left | right | inherit | top | ceux des éléments avec 'display:table-caption' | oui |  | visuel
'clear' | none | left | right | both | inherit | none | ceux des éléments de type bloc | non |  | visuel
'clip' | <forme> | auto | inherit | auto | ceux des éléments de type bloc et ceux remplacés | non |  | visuel
'color' | <couleur> | inherit | selon l'agent utilisateur |  | oui |  | visuel
'content' | [ <chaîne> | <uri> | <compteur> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | chaîne vide | pseudo-éléments :before et :after | non |  | tous
'counter-increment' | [ <identifiant> <entier>? ]+ | none | inherit | none |  | non |  | tous
'counter-reset' | [ <identifiant> <entier>? ]+ | none | inherit | none |  | non |  | tous
'cue' | [ 'cue-before' || 'cue-after' ] | inherit | XX |  | non |  | auditif
'cue-after' | <uri> | none | inherit | none |  | non |  | auditif
'cue-before' | <uri> | none | inherit | none |  | non |  | auditif
'cursor' | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | auto |  | oui |  | visuel, interactive
'direction' | ltr | rtl | inherit | ltr | tous les éléments, voir explications | oui |  | visuel
'display' | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | inline |  | non |  | tous
'elevation' | <angle> | below | level | above | higher | lower | inherit | level |  | oui |  | auditif
'empty-cells' | show | hide | inherit | show | ceux des éléments avec 'display:table-cell' | oui |  | visuel
'float' | left | right | none | inherit | none | tous les éléments, sauf ceux positionnés et ceux avec un contenu généré | non |  | visuel
'font' | [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | voir les propriétés individuelles |  | oui | admis pour 'font-size' et 'line-height' | visuel
'font-family' | [[ <famille-nom> | <famille-générique> ],]* [<famille-nom> | <famille-générique>] | inherit | selon l'agent utilisateur |  | oui |  | visuel
'font-size' | <taille-absolue> | <taille-relative> | <longueur> | <pourcentage> | inherit | medium |  | oui, la valeur calculée s'hérite | se rapporte à la taille de la police du parent | visuel
'font-size-adjust' | <nombre> | none | inherit | none |  | oui |  | visuel
'font-stretch' | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | normal |  | oui |  | visuel
'font-style' | normal | italic | oblique | inherit | normal |  | oui |  | visuel
'font-variant' | normal | small-caps | inherit | normal |  | oui |  | visuel
'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal |  | oui |  | visuel
'height' | <longueur> | <pourcentage> | auto | inherit | auto | tous les éléments, sauf ceux en-ligne non remplacés, les colonnes et groupes de colonnes des tables | non | voir explication | visuel
'left' | <longueur> | <pourcentage> | auto | inherit | auto | ceux des éléments positionnés | non | se rapporte à la largeur du bloc conteneur | visuel
'letter-spacing' | normal | <longueur> | inherit | normal |  | oui |  | visuel
'line-height' | normal | <nombre> | <longueur> | <pourcentage> | inherit | normal |  | oui | se rapporte à la taille de la police de l'élément lui-même | visuel
'list-style' | [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit | XX | ceux des éléments avec 'display: list-item' | oui |  | visuel
'list-style-image' | <uri> | none | inherit | none | ceux des éléments avec 'display: list-item' | oui |  | visuel
'list-style-position' | inside | outside | inherit | outside | ceux des éléments avec 'display: list-item' | oui |  | visuel
'list-style-type' | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit | disc | ceux des éléments avec 'display: list-item' | oui |  | visuel
'margin' | <marge-largeur>{1,4} | inherit | XX |  | non | se rapporte à la largeur du bloc conteneur | visuel
'margin-top' 'margin-right' 'margin-bottom' 'margin-left' | <marge-largeur> | inherit | 0 |  | non | se rapporte à la largeur du bloc conteneur | visuel
'marker-offset' | <longueur> | auto | inherit | auto | ceux des éléments avec 'display: marker' | non |  | visuel
'marks' | [ crop || cross ] | none | inherit | none | dans un contexte de page | sans objet |  | visuel, paginé
'max-height' | <longueur> | <pourcentage> | none | inherit | none | tous les éléments, sauf ceux en-ligne non remplacés et ceux des tables | non | se rapporte à la hauteur du bloc conteneur | visuel
'max-width' | <longueur> | <pourcentage> | none | inherit | none | tous les éléments, sauf ceux en-ligne non remplacés et ceux des tables | non | se rapporte à la largeur du bloc conteneur | visuel
'min-height' | <longueur> | <pourcentage> | inherit | 0 | tous les éléments, sauf ceux en-ligne non remplacés et ceux des tables | non | se rapporte à la hauteur du bloc conteneur | visuel
'min-width' | <longueur> | <pourcentage> | inherit | selon l'agent utilisateur | tous les éléments, sauf ceux en-ligne non remplacés et ceux des tables | non | se rapporte à la largeur du bloc conteneur | visuel
'orphans' | <entier> | inherit | 2 | ceux des éléments de type bloc | oui |  | visuel, paginé
'outline' | [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit | voir les propriétés individuelles |  | non |  | visuel, interactive
'outline-color' | <couleur> | invert | inherit | invert |  | non |  | visuel, interactive
'outline-style' | <bordure-style> | inherit | none |  | non |  | visuel, interactive
'outline-width' | <bordure-épaisseur> | inherit | medium |  | non |  | visuel, interactive
'overflow' | visible | hidden | scroll | auto | inherit | visible | ceux des éléments de type bloc et ceux remplacés | non |  | visuel
'padding' | <espacement-largeur>{1,4} | inherit | XX |  | non | se rapporte à la largeur du bloc conteneur | visuel
'padding-top' 'padding-right' 'padding-bottom' 'padding-left' | <espacement-largeur> | inherit | 0 |  | non | se rapporte à la largeur du bloc conteneur | visuel
'page' | <identifiant> | auto | auto | ceux des éléments de type bloc | oui |  | visuel, paginé
'page-break-after' | auto | always | avoid | left | right | inherit | auto | ceux des éléments de type bloc | non |  | visuel, paginé
'page-break-before' | auto | always | avoid | left | right | inherit | auto | ceux des éléments de type bloc | non |  | visuel, paginé
'page-break-inside' | avoid | auto | inherit | auto | ceux des éléments de type bloc | oui |  | visuel, paginé
'pause' | [ [<durée> | <pourcentage>]{1,2} ] | inherit | selon l'agent utilisateur |  | non | voir les descriptions de 'pause-before' et 'pause-after' | auditif
'pause-after' | <durée> | <pourcentage> | inherit | selon l'agent utilisateur |  | non | voir explication | auditif
'pause-before' | <durée> | <pourcentage> | inherit | selon l'agent utilisateur |  | non | voir explication | auditif
'pitch' | <fréquence> | x-low | low | medium | high | x-high | inherit | medium |  | oui |  | auditif
'pitch-range' | <nombre> | inherit | 50 |  | oui |  | auditif
'play-during' | <uri> mix? repeat? | auto | none | inherit | auto |  | non |  | auditif
'position' | static | relative | absolute | fixed | inherit | static | tous les éléments, sauf ceux avec un contenu généré | non |  | visuel
'quotes' | [<chaîne> <chaîne>]+ | none | inherit | selon l'agent utilisateur |  | oui |  | visuel
'richness' | <nombre> | inherit | 50 |  | oui |  | auditif
'right' | <longueur> | <pourcentage> | auto | inherit | auto | éléments positionnés | non | se rapporte à la largeur du bloc conteneur | visuel
'size' | <longueur>{1,2} | auto | portrait | landscape | inherit | auto | dans un contexte de page | sans objet |  | visuel, paginé
'speak' | normal | none | spell-out | inherit | normal |  | oui |  | auditif
'speak-header' | once | always | inherit | once | ceux des éléments contenant une information d'en-tête | oui |  | auditif
'speak-numeral' | digits | continuous | inherit | continuous |  | oui |  | auditif
'speak-punctuation' | code | none | inherit | none |  | oui |  | auditif
'speech-rate' | <nombre> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit | medium |  | oui |  | auditif
'stress' | <nombre> | inherit | 50 |  | oui |  | auditif
'table-layout' | auto | fixed | inherit | auto | ceux des éléments avec 'display:table' ou 'display:inline-table' | non |  | visuel
'text-align' | left | right | center | justify | <chaîne> | inherit | selon l'agent utilisateur et du sens d'écriture | ceux des éléments de type bloc | oui |  | visuel
'text-decoration' | none | [ underline || overline || line-through || blink ] | inherit | none |  | non (voir explications) |  | visuel
'text-indent' | <longueur> | <pourcentage> | inherit | 0 | ceux des éléments de type bloc | oui | se rapporte à la largeur du bloc conteneur | visuel
'text-shadow' | none | [<couleur> || <longueur> <longueur> <longueur>? ,]* [<couleur> || <longueur> <longueur> <longueur>?] | inherit | none |  | non (voir explications) |  | visuel
'text-transform' | capitalize | uppercase | lowercase | none | inherit | none |  | oui |  | visuel
'top' | <longueur> | <pourcentage> | auto | inherit | auto | éléments positionnés | non | se rapporte à la hauteur du bloc conteneur | visuel
'unicode-bidi' | normal | embed | bidi-override | inherit | normal | tous les éléments, mais voir explications | non |  | visuel
'vertical-align' | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <pourcentage> | <longueur> | inherit | baseline | ceux des éléments de type en-ligne et ceux avec 'display:table-cell' | non | se rapporte à la valeur de 'line-height' de l'élément lui-même | visuel
'visibility' | visible | hidden | collapse | inherit | inherit |  | non |  | visuel
'voice-family' | [[<voix-spécifique> | <voix-générique> ],]* [<voix-spécifique> | <voix-générique> ] | inherit | selon l'agent utilisateur |  | oui |  | auditif
'volume' | <nombre> | <pourcentage> | silent | x-soft | soft | medium | loud | x-loud | inherit | medium |  | oui | se rapporte à la valeur héritée | auditif
'white-space' | normal | pre | nowrap | inherit | normal | ceux des éléments de type bloc | oui |  | visuel
'widows' | <entier> | inherit | 2 | ceux des éléments de type bloc | oui |  | visuel, paginé
'width' | <longueur> | <pourcentage> | auto | inherit | auto | tous les éléments, sauf ceux de type en-ligne non remplacés, les rangées et groupes de rangées des tables | non | se rapporte à la largeur du bloc conteneur | visuel
'word-spacing' | normal | <longueur> | inherit | normal |  | oui |  | visuel
'z-index' | auto | <entier> | inherit | auto | éléments positionnés | non |  | visuel


Appendice G : Index des descripteurs

Nom | Valeur | Valeur initiale
'ascent' | <nombre> | indéfinie
'baseline' | <nombre> | 0
'bbox' | <nombre>, <nombre>, <nombre>, <nombre> | indéfinie
'cap-height' | <nombre> | indéfinie
'centerline' | <nombre> | indéfinie
'definition-src' | <uri> | indéfinie
'descent' | <nombre> | indéfinie
'font-family' | [ <famille-nom> | <famille-générique> ] [, [<famille-nom> | <famille-générique> ]]* | selon l'agent utilisateur
'font-size' | all | <longueur> [, <longueur>]* | all
'font-stretch' | all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]* | normal
'font-style' | all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* | all
'font-variant' | [normal | small-caps] [,[normal | small-caps]]* | normal
'font-weight' | all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]* | all
'mathline' | <nombre> | indéfinie
'panose-1' | [<entier>]{10} | 0 0 0 0 0 0 0 0 0 0
'slope' | <nombre> | 0
'src' | [ <uri> [format(<chaîne> [, <chaîne>]*)] | <police-nom> ] [, <uri> [format(<chaîne> [, <chaîne>]*)] | <police-nom> ]* | indéfinie
'stemh' | <nombre> | indéfinie
'stemv' | <nombre> | indéfinie
'topline' | <nombre> | indéfinie
'unicode-range' | <étendue-unicode> [, <étendue-unicode>]* | U+0-7FFFFFFF
'units-per-em' | <nombre> | indéfinie
'widths' | [<étendue-unicode> ]? [<nombre> ]+ [,[<étendue-unicode> ]? <nombre> ]+] | indéfinie
'x-height' | <nombre> | indéfinie


Appendice H : Index

@ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

  • :active, 2, 3
  • :after, 1, 2
  • :before, 1, 2, 3
  • :first, 1
  • :first-child, 1
  • :first-letter, 1
  • :first-line, 1
  • :focus, 1
  • :hover, 1
  • :lang, 1
  • :left, 1
  • :link, 1, 2
  • :right, 1
  • :visited, 1, 2
  • =, 1
  • ~=, 1
  • |=, 1

  • @charset, 1
  • @font-face, 1, 2, 3, 4, 5, 6, 7
  • @import, 1, 2, 3
  • @media, 1, 2, 3, 4
  • @page, 1

  • absolue, longueur [...], 1
  • active (pseudo-classe), 1, 2
  • after, 1
  • agent utilisateur, 1
  • ancêtre, 1
  • <angle>, 1, 2
    • définition de [...], 1
  • anonyme, 1
  • anonyme, boîte en-ligne [...], 1
  • arménien, 1
  • 'ascent' (descripteur), 1
  • atomiseur, 1
  • attr(), 1
  • attribut, 1
  • auditive, image [...], 1
  • 'auditif', groupe de média [...], 1
  • 'azimuth', 1

  • 'background', 1
  • 'background-attachment', 1
  • 'background-color', 1
  • 'background-image', 1
  • 'background-position', 1
  • 'background-repeat', 1
  • <bas>
    • définition de [...], 1
  • 'baseline' (descripteur), 1
  • 'bbox' (descripteur), 1
  • before, 1
  • bicaméral, 1
    • définition de [...], 1
  • bidirectionnalité (bidi), 1
  • 'bitmap', groupe de média [...], 1
  • bloc, 1
  • bloc, boîte de [...], 1
  • bloc conteneur initial, 1
  • bloc, élément de type [...], 1
  • 'block', définition de [...], 1
  • boîte
    • bordure, 1
    • contenu, 1
    • contenu, hauteur du [...], 1
    • contenu, largeur du [...], 1
    • débordement, 1
    • espacement, 1
    • hauteur, 1
    • largeur, 1
    • marge, 1
  • boîte de bloc principale, 1
  • boîte de ligne, définition d'une [...], 1
  • boîte de ligne, 1
  • boîte en enfilade, 1
  • 'border', 1
  • 'border-bottom', 1
  • 'border-bottom-color', 1
  • 'border-bottom-style', 1
  • 'border-bottom-width', 1
  • 'border-collapse', 1
  • 'border-color', 1
  • 'border-left', 1
  • 'border-left-color', 1
  • 'border-left-style', 1
  • 'border-left-width', 1
  • 'border-right', 1
  • 'border-right-color', 1
  • 'border-right-style', 1
  • 'border-right-width', 1
  • 'border-spacing', 1
  • 'border-style', 1
  • 'border-top', 1
  • 'border-top-color', 1
  • 'border-top-style', 1
  • 'border-top-width', 1
  • 'border-width', 1
  • bord externe, 1
  • bord interne, 1
  • bordure, bord de [...], 1
  • bordure
    • d'une boîte, 1
  • <bordure-épaisseur>
    • définition de [...], 1
  • bordures séparées, 1
  • <bordure-style>, définition de [...], 1
  • 'bottom', 1

  • canevas, 1, 2
  • 'cap-height' (descripteur), 1
  • capitales initiales, 1
  • 'caption-side', 1
  • caractère, 1
  • caractères, encodage des [...], 1
    • par défaut, 1
    • déterminé par l'agent utilisateur, 1
  • cascade, 1
  • casse, sensibilité à la [...], 1
  • 'centerline' (descripteur), 1
  • chaîne, 1
  • <chaîne>, 1, 2, 3, 4, 5
  • <chaîne>, définition de [...], 1
  • circle, 1
  • cjk-ideographic, 1
  • 'clear', 1
  • 'clip', 1
  • close-quote, 1, 2
  • 'color', 1
  • combinateurs, 1, 2
  • commentaires, 1
  • compact, 1
  • compacte, boîte [...], 1
  • 'compact', définition de [...], 1
  • compatibilité ascendante, 1
  • compteurs, 1
  • <compteur>, 1
  • <compteur>, définition de [...], 1
  • conformité, 1, 2, 3, 4, 5, 6, 7, 8
  • conteneur, bloc [...], 1, 2, 3
    • initial, 1
  • contenu, 1
  • contenu, bord du [...], 1
  • 'content', 1
  • contenu
    • d'une boîte, 1
    • rendu, 1
  • contenu généré, 1
  • 'continu', groupe de média, 1
  • correspondance exacte, 1
  • correspondance, motif de [...], 1
  • correspondance avec le nom, 1
  • correspondance séparée par un blanc, 1
  • correspondance séparée par un tiret, 1
  • couleur, 1
  • <couleur>, 1, 2
    • définition de [...], 1
  • counter(), 1
  • 'counter-increment', 1
  • 'counter-reset', 1
  • 'cue', 1
  • 'cue-after', 1
  • 'cue-before', 1
  • cursive, définition de [...], 1
  • 'cursor', 1

  • 'dashed', 1, 2
  • decimal, 1
  • decimal-leading-zero, 1
  • déclaration, 1
  • déclaration, 1
  • déclaration, bloc de [...], 1
  • déclarations multiples, 1
  • défaut, feuille de style par [...], 1
  • défaut
    • encodage des caractères par [...], 1
  • 'definition-src' (descripteur), 1
  • descendant, 1
  • 'descent' (descripteur), 1
  • DEVRA, 1
  • DEVRAIT, 1
  • 'direction', 1
  • disc, 1
  • 'display', 1
  • document, langage du [...], 1
  • document, arbre du [...], 1
  • DOIT, 1
  • 'dotted', 1, 2
  • 'double', 1, 2
  • <droit>
    • définition de [...], 1
  • DTD, 1, 2
  • <durée>, 1
    • définition de [...], 1

  • échappement avec barre oblique inverse, 1
  • élément, 1
    • suivant, 1
    • précédent, 1
  • élément remplacé, 1
  • 'elevation', 1
  • em (unité), 1
  • em, le carré [...], 1, 2
  • empilement, contexte d' [...], 1
  • empilement, contexte d'[...] local, 1
  • empilement, contexte d'[...] racine 1
  • empilement, niveau dans l'[...], 1
  • 'empty-cells', 1
  • encodage, vecteur d'[...], 1
  • enfant, 1
  • enfants, 1
  • en-ligne, élément de type [...], 1
  • <entier>, 1
    • définition de [...], 1
  • espacement
    • d'une boîte, 1
  • espacement, bord de l'[...] 1
  • <espacement-largeur>
    • définition de [...], 1
  • <étendue-unicode>
    • définition de [...], 1
  • ex (unité), 1

  • FACULTATIF, 1
  • <famille-nom>
    • définition de [...], 1
  • <famille-générique>
    • définition de [...], 1
  • fantasy, définition de [...], 1
  • feuille, 1
  • feuille de style, 1
  • fictives, séquence de balises [...], 1, 2, 3
  • first-child (pseudo-classe), 1
  • first-letter, 1
  • first-line, 1
  • flottants, règles des [...], 1
  • 'float', 1
  • focus, 1
  • focus (pseudo-classe), 1
  • 'font', 1
  • 'font-family', 1
  • 'font-family' (descripteur), 1
  • 'font-size', 1
  • 'font-size' (descripteur), 1
  • 'font-size-adjust', 1
  • 'font-stretch', 1
  • 'font-stretch' (descripteur), 1
  • 'font-style', 1
  • 'font-style' (descripteur), 1
  • 'font-variant', 1
  • 'font-variant' (descripteur), 1
  • 'font-weight', 1
  • 'font-weight' (descripteur), 1
  • forcé, retour à la ligne [...], 1
  • <forme>
    • définition de [...], 1
  • <fréquence>, 1
    • définition de [...], 1
  • fusion, marge de [...], 1

  • <gauche>
    • définition de [...], 1
  • géorgien, 1
  • glyphe, 1
  • glyphe abstrait, 1
  • 'grille', groupe de média [...], 1
  • 'groove', 1, 2

  • <haut>
    • définition de [...], 1
  • hauteur-x, 1
  • hébreu, 1
  • 'height', 1
  • 'hidden, 1
  • 'hidden', 1
  • hiragana, 1
  • hiragana-iroha, 1
  • horizontale, marge [...], 1
  • hover (pseudo-classe), 1

  • identifiant, 1
  • identifiant, définition d'un [...], 1
  • ignorer, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27
  • important, 1
  • import conditionnel, 1
  • inherit, définition de [...], 1
  • 'inline', définition de [...], 1
  • inline-table, 1
  • 'inline-table', 1
  • 'inset', 1, 2
  • intelligente, correspondance de police [...], 1
  • 'interactif', groupe de média [...], 1
  • interlignage, 1
  • interlignage, demi-[...], 1
  • intrinsèques, dimensions [...], 1
  • invalide, 1
  • invert, 1
  • iso-10646, 1
  • italic, définition de [...], 1

  • katakana, 1
  • katakana-iroha, 1

  • lang (pseudo-classe), 1
  • langue, 1
  • langue, code de [...], 1, 2
  • lecteur d'écran, 1
  • 'left', 1
  • <longueur>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    • définition de [...], 1
  • 'letter-spacing', 1
  • lettrine, 1
  • ligatures, 1
  • 'line-height', 1
  • link (pseudo-classe), 1, 2
  • 'list-item', définition de [...], 1
  • 'list-style', 1
  • 'list-style-image', 1
  • 'list-style-position', 1
  • 'list-style-type', 1
  • LL(1), 1
  • lower-greek, 1
  • lower-latin, 1
  • lower-roman, 1

  • marge
    • horizontale, 1
    • d'une boîte, 1
    • verticale, 1
  • marge, bord de la [...], 1
  • <marge-largeur>
    • définition de [...], 1
  • 'margin', 1
  • 'margin-bottom', 1
  • 'margin-left', 1
  • 'margin-right', 1
  • 'margin-top', 1
  • 'marker', définition de [...], 1
  • 'marker-offset', 1
  • 'marks', 1
  • marqueurs, 1
  • 'mathline' (descripteur), 1
  • 'max-height', 1
  • 'max-width', 1
  • média, 1
  • média, groupe de [...], 1
  • média, type de [...], 1
  • média, import conditionnel de, 1
  • message, entité de [...], 1
  • 'min-height', 1
  • 'min-width', 1
  • mise en forme, contexte de [...], 1
  • mise en forme, structure de [...], 1
  • modèle de mise en forme visuel, 1
  • monocaméral, 1, 2
    • définition de [...], 1
  • monospace, définition de [...], 1

  • NE DEVRA PAS, 1
  • NE DEVRAIT PAS, 1
  • NE DOIT PAS, 1
  • nouvelle ligne, 1
  • no-close-quote, 1, 2
  • <nombre>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    • définition de [...], 1
  • 'none'
    • comme style de bordure, 1, 2
    • comme valeur de la propriété 'display', 1
  • no-open-quote, 1, 2
  • numérotage automatique, 1

  • open-quote, 1, 2
  • 'orphans', 1
  • outil d'édition, 1
  • outline, 1
  • 'outline', 1
  • 'outline-color', 1
  • 'outline-style', 1
  • 'outline-width', 1
  • 'outset', 1, 2
  • overflow, 1
  • 'overflow', 1

  • 'padding', 1
  • 'padding-bottom', 1
  • 'padding-left', 1
  • 'padding-right', 1
  • 'padding-top', 1
  • page, aire de la [...], 1
  • page, boîte de la [...], 1
  • page, contexte de la [...], 1
  • page, modèle de la [...], 1
  • page, sélecteur de [...], 1
  • 'page', 1
  • 'page-break-after', 1
  • 'page-break-before', 1
  • 'page-break-inside', 1
  • 'paginé', groupe de média [...], 1
  • Panose-1, 1
  • panose-1, 1
  • 'panose-1' (descripteur), 1
  • parent, 1
  • 'pause', 1
  • 'pause-after', 1
  • 'pause-before', 1
  • PEUT, 1
  • 'pitch', 1
  • 'pitch-range', 1
  • pixel, 1
  • pixel de référence, 1
  • 'play-during', 1
  • police, 1
  • police, description de [...], 1
  • <police-description>
    • définition de [...], 1
  • police, données de [...], 1
  • police, famille de [...], 1
  • polices, jeu de [...], 1
  • police, nom de [...] entier, 1
  • <police-nom>
    • définition de [...], 1
  • police, ressource de définition de [...], 1
  • police, synthèse de [...], 1
  • police de système, 1
  • police, table d'encodage de [...], 1
  • police, téléchargement de [...], 1
  • portée, 1
  • 'position', 1
  • positionnement absolu, 1
  • positionnés, élément ou boîte [...], 1
  • positionnement relatif, 1
  • positionnement, schéma de [...], 1
  • <pourcentage>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    • définition de [...], 1
  • précédent, élément [...], 1
  • propriété, 1
  • propriétés de liste, 1
  • propriété raccourcie, 1, 2, 3
  • pseudo-classe
    • :first, 1
    • :left, 1
    • :right, 1
  • pseudo-classes, 1
    • :active, 1, 2
    • :focus, 1
    • :hover, 1
    • :lang, 1
    • :link, 1, 2
    • :visited, 1, 2
  • pseudo-éléments, 1
    • :after, 1, 2
    • :before, 1, 2
    • :first-letter, 1
    • :first-line, 1, 2

  • 'quotes', 1

  • racine, 1
  • RECOMMENDÉ, 1
  • règle-at, 1
  • règles-at, 1, 2
  • règles, jeu de [...], 1
  • rendu du contenu, 1
  • rendu progressif, 1
  • repères de coupe, 1
  • repères d'alignement, 1
  • REQUIS, 1
  • Resource Identifier (URI), 1
  • 'richness', 1
  • 'ridge', 1, 2
  • 'right', 1
  • rognée, zone [...], 1
  • run-in, 1
  • 'run-in', définition de [...], 1

  • sans-serif, définition de [...], 1
  • sélecteur, 1, 2, 3, 4
    • correspondance avec un [...], 1
    • sujet du [...], 1
  • sélecteurs descendants, 1
  • sélecteur d'enfant, 1
  • sélecteur simple, 1
  • sélecteur de type, 1
  • sélecteur universel, 1
  • serif, définition de [...], 1
  • 'size', 1
  • 'slope' (descripteur), 1
  • 'solid', 1, 2
  • source, document [...], 1
  • 'speak', 1
  • 'speak-header', 1
  • 'speak-numeral', 1
  • 'speak-punctuation', 1
  • 'speech-rate', 1
  • square, 1
  • 'src' (descripteur), 1
  • 'statique', groupe de média [...], 1
  • 'stemh' (descriptor), 1
  • 'stemv' (descriptor), 1
  • 'stress', 1
  • sujet du sélecteur, 1

  • table, 1
  • table, éléments de [...], 1
    • interne, 1
  • table, style de bordure de [...], 1
  • 'table', 1
  • table-caption, 1
  • 'table-caption', 1
  • table-cell, 1
  • 'table-cell', 1
  • table-column, 1
  • 'table-column', 1
  • table-column-group, 1
  • 'table-column-group', 1
  • table-footer-group, 1
  • 'table-footer-group', 1
  • table-header-group, 1
  • 'table-header-group', 1
  • 'table-layout', 1
  • table-row, 1
  • 'table-row', 1
  • table-row-group, 1
  • 'table-row-group', 1
  • tables, 1
  • tables, correspondance avec les éléments des [...], 1
  • tables, éléments des [...] internes, 1
  • 'tactile', groupe de média [...], 1
  • <taille-absolue>
    • définition de [...], 1
  • <taille-relative>
    • définition de [...], 1
  • 'text-align', 1
  • 'text-decoration', 1
  • 'text-indent', 1
  • 'text-shadow', 1
  • 'text-transform', 1
  • text/css, 1
  • 'top', 1
  • 'topline' (descripteur), 1
  • 'tous', groupe de médias [...], 1

  • unicode, 1
  • 'unicode-bidi', 1
  • 'unicode-range' (descripteur), 1
  • Uniform Resource Locator (URL), 1
  • Uniform Resource Name (URN), 1
  • unité em, 1
  • unités relatives, 1
  • 'units-per-em' (descripteur), 1
  • upper-latin, 1
  • upper-roman, 1
  • URI (Uniform Resource Identifier), 1
  • <uri>, 1, 2, 3, 4, 5, 6
    • définition de [...], 1
  • URL (Uniform Resource Locator), 1
  • URN (Uniform Resource Name), 1

  • valeur, 1
  • valeur d'aspect, 1
  • valeur calculée, 1
  • valeur initiale, 1
  • valeur réelle, 1
  • valeur spécifiée, 1
  • valide, feuille de style [...], 1
  • 'vertical-align', 1
  • verticale, marge [...], 1
  • vide, 1
  • 'visibility', 1
  • visited (pseudo-classe), 1, 2
  • 'visual', groupe de média [...], 1
  • visualisation, zone de [...], 1
  • 'voice-family', 1
  • <voix-générique>, définition de [...], 1
  • <voix-spécifique>, définition de [...], 1
  • volume, 1
  • 'volume', 1

  • 'white-space', 1
  • 'widows', 1
  • 'width', 1
  • 'widths' (descripteur), 1
  • 'word-spacing', 1

  • 'x-height' (descripteur), 1

  • 'z-index', 1


Tutoriel WEB

Glossaire des propriétés CSS

Table des matières

  • Information sur les préfixes navigateurs
    • Utilisation des préfixes navigateurs
  • Propriétés de mise en forme de texte
    • I. Propriétés de mise en forme de texte
      • I-A. Mise en forme de la police
        • I-A-1. Nom de police | font-family
        • I-A-2. Police personnalisée | @font-face
        • I-A-3. Taille du texte | font-size
        • I-A-4. Gras | font-weight
        • I-A-5. Petites capitales | font-variant
        • I-A-6. Petites capitales | font-variant
        • I-A-7. Italique | font-style
        • I-A-8. La police tout-en-un | font
      • I-B. Mise en forme des paragraphes
        • I-B-1. Alignement horizontal | text-align
        • I-B-2. Dernière ligne | text-align-last
        • I-B-3. Alignement vertical | vertical-align
        • I-B-4. Décoration | text-decoration
        • I-B-5. Capitales | text-transform
        • I-B-6. Alinéa | text-indent
        • I-B-7. Hauteur de ligne | line-height
        • I-B-8. Césure | white-space
        • I-B-9. Césure forcée | word-wrap
        • I-B-10. Ombrage | text-shadow
      • I-C. Définition de la couleur de texte
        • I-C-1. Couleur de texte | color
  • Propriétés de mise en forme des boîtes
    • II. Propriétés de mise en forme des boîtes
      • II-A. Dimensions des boîtes
        • II-A-1. Largeur | width
        • II-A-2. Hauteur | height
        • II-A-3. Largeur minimale | min-width
        • II-A-4. Largeur maximale | max-width
        • II-A-5. Hauteur minimale | min-height
        • II-A-6. Hauteur maximale | max-height
      • II-B. Marges extérieures
        • II-B-1. Marge externe en haut | margin-top
        • II-B-2. Marge externe à gauche | margin-left
        • II-B-3. Marge externe à droite | margin-right
        • II-B-4. Marge externe en bas | margin-bottom
        • II-B-5. Marge externe | margin
      • II-C. Espacements
        • II-C-1. Espacement en haut | padding-top
        • II-C-2. Espacement à gauche | padding-left
        • II-C-3. Espacement à droite | padding-right
        • II-C-4. Espacement en bas | padding-bottom
        • II-C-5. Espacement tout-en-un | padding
      • II-D. Bordures
        • II-D-1. Épaisseur de la bordure | border-width*
        • II-D-2. Couleur de la bordure | border-color*
        • II-D-3. Type de bordure | border-style*
        • II-D-4. Bordure à gauche | border-left*
        • II-D-5. Bordure en haut | border-top*
        • II-D-6. Bordure à droite | border-right*
        • II-D-7. Bordure en bas | border-bottom*
        • II-D-8. Bordure tout-en-un | border*
        • II-D-9. Bordure arrondie | border-radius
        • II-D-10. Ombre | box-shadow
      • II-E. Contours
        • II-E-1. Épaisseur du contour | outline-width
        • II-E-2. Couleur du contour | outline-color
        • II-E-3. Type de contour | outline-style
        • II-E-4. Décalage du contour | outline-offset
        • II-E-5. Contour tout-en-un | outline
  • Propriétés de mise en forme d'arrière-plans
    • III. Propriétés de mise en forme d'arrière-plans
      • III-A. Couleur de fond
        • III-A-1. Couleur de fond | background-color
      • III-B. Image de fond
        • III-B-1. Image de fond | background-image
        • III-B-2. Fond fixé | background-attachment
        • III-B-3. Répétition du fond | background-repeat
        • III-B-4. Position du fond | background-position
        • III-B-5. Fond tout-en-un | background
        • III-B-6. Transparence | opacity
  • Propriétés des listes
    • IV. Propriétés des listes
      • IV-A. Type de liste | list-style-type
      • IV-B. Position en retrait | list-style-position
      • IV-C. Puce personnalisée | list-style-image
      • IV-D. Liste tout-en-un | list-style
  • Propriétés de mise en forme des tableaux
    • V. Propriétés de mise en forme des tableaux
      • V-A. Type de bordure | border-collapse
      • V-B. Cellules vides | empty-cells
      • V-C. Position du titre | caption-side
      • V-D. Affichage des cellules | table-layout
      • V-E. Espacement des cellules | border-spacing
  • Propriétés d'affichage et de positionnement
    • VI. Propriétés d'affichage et de positionnement
      • VI-A. Affichage
        • VI-A-1. Type d'élément | display
        • VI-A-2. Affichage | visibility
        • VI-A-3. Afficher seulement une partie | clip
        • VI-A-4. Limiter les dimensions | overflow
      • VI-B. Positionnement
        • VI-B-1. Flottant | float
        • VI-B-2. Stopper un flottant | clear
        • VI-B-3. Type de positionnement | position
        • VI-B-4. Position par rapport aux coins | top bottom left right
        • VI-B-5. Ordre d'affichage | z-index
  • Propriétés de transformation et d'animation
    • VII. Propriétés de transformation et d'animation (CSS 3)
      • VII-A. Propriétés de transformation
        • VII-A-1. Origine de la transformation | transform-origin
        • VII-A-2. Perspective 3D | perspective
        • VII-A-3. Origine de la perspective | perspective-origin
        • VII-A-4. Fonctions de transformation | transform
          • Translation | translate()
          • Rotation | rotate()
          • Redimensionnement | scale()
          • Distorsion | skew()
          • Transformation matricielle | matrix()
        • VII-A-5. Face arrière | backface-visibility
        • VII-A-6. Héritage 3D | transform-style
        • VII-A-7. Exemple de transformation 3D
      • VII-B. Propriétés de transition
        • VII-B-1. Nom de propriété(s) | transition-property
        • VII-B-2. Durée de transition | transition-duration
        • VII-B-3. Effet de transition | transition-timing-function
        • VII-B-4. Délai de démarrage | transition-delay
        • VII-B-5. La transition tout-en-un | transition
        • VII-B-6. Exemple récapitulatif
      • VII-C. Propriétés d'animation
        • VII-C-1. Étapes de l'animation | @keyframes
        • VII-C-2. Nom de l'animation | animation-name
        • VII-C-3. Durée de l'animation | animation-duration
        • VII-C-4. Effet de l'animation | animation-timing-function
        • VII-C-5. Délai de l'animation | animation-delay
        • VII-C-6. Itérations de l'animation | animation-iteration-count
        • VII-C-7. Sens de l'animation | animation-direction
        • VII-C-8. État de l'animation | animation-play-state
        • VII-C-9. Style de l'élément hors animation | animation-fill-mode
        • VII-C-10. L'animation tout-en-un | animation
        • VII-C-11. Exemple récapitulatif


Tutoriel WEB

Glossaire des propriétés CSS

Utilisation des préfixes navigateurs

CSS 3 apporte de nombreuses nouvelles fonctionnalités qui sont implémentées au fur et à mesure par les navigateurs.

L'implémentation d'une nouvelle fonctionnalité se fait en plusieurs étapes. La dernière d'entre elles est la mise en place sur la version stable du navigateur pour pouvoir tester la fonctionnalité dans un contexte réel et affiner le cas échéant certains détails. Cela signifie donc que la fonctionnalité est implémentée, mais pas encore en version finale, c'est-à-dire que son comportement est encore susceptible d'évoluer pour corriger d'éventuels bogues ou mieux coller aux spécifications.

Il faut donc que la fonctionnalité puisse être testée sans être pour autant disponible dans sa version définitive. Pour pouvoir faire la distinction entre les propriétés CSS stables et celles en cours de finalisation, le W3C a normalisé la syntaxe des préfixes vendeurs (vendor-specific extensions).

La règle est simple : chaque moteur de rendu peut implémenter des propriétés en les préfixant avec leur propre identifiant entouré de tirets.

Par exemple, si le moteur XYZ souhaite expérimenter la propriété prop, il pourra le faire sous le nom -xyz-prop.

Les principaux préfixes utilisés sont :

  • -moz- (Firefox et dérivés) ;
  • -webkit- (Chrome, Safari, Opera 15+ et dérivés) ;
  • -ms- (Internet Explorer) ;
  • -o- (Opera jusqu'à la version 12).

Même s'il est déconseillé d'utiliser les propriétés préfixées sur une page Web en production (puisque leur implémentation est expérimentale), il est malgré tout courant de le faire, notamment parce qu'à ce stade de développement, l'implémentation est considérée comme suffisamment stable pour fonctionner correctement dans les cas généraux et n'être potentiellement boguée que dans des cas limites.

Pour mettre en place ces propriétés dans votre page, vous devez lister tous les préfixes possibles (par exemple pour border-radius) :

Sélectionnez
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;

Enfin, il faut penser au futur ! N'oubliez donc pas de préciser la propriété définitive. Il est important de mettre celle-ci en fin de liste afin d'écraser les versions expérimentales si la version définitive est disponible :

Sélectionnez
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

Les propriétés de style avec préfixe sont utilisables en JavaScript. Si la notation CSS des préfixes et la notation JavaScript des propriétés standards sont normalisées (en utilisant la notation camelCase : voir Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?), la gestion du préfixe dans la notation JavaScript ne l'est pas. Certains navigateurs conservent la notation camelCase (ou lowerCamelCase), d'autres utilisent une notation dite UpperCamelCase (avec majuscule initiale) pour différencier les propriétés préfixées de celles qui ne le sont pas.

Par exemple, pour récupérer ou affecter la valeur de la propriété border-radius pour l'élément dont l'identifiant est element, on procèdera comme suit :

Sélectionnez
var $element = document.getElementById('element');
if($element.style.borderRadius){
    // border-radius
}
else if($element.style.MozBorderRadius){
    // -moz-border-radius
}
else if($element.style.webkitBorderRadius){
    // -webkit-border-radius
}
else if($element.style.msBorderRadius){ // IE accepte aussi MsBorderRadius
    // -ms-border-radius
}
else if($element.style.OBorderRadius){
    // -o-border-radius
}
else{
    // il faut peut-être changer de navigateur ?
}

Complément d'information : Liste des propriétés CSS préfixées.


Tutoriel WEB

Glossaire des propriétés CSS

Table des matières

  • II. Propriétés de mise en forme des boîtes
    • II-A. Dimensions des boîtes
      • II-A-1. Largeur | width
      • II-A-2. Hauteur | height
      • II-A-3. Largeur minimale | min-width
      • II-A-4. Largeur maximale | max-width
      • II-A-5. Hauteur minimale | min-height
      • II-A-6. Hauteur maximale | max-height
    • II-B. Marges extérieures
      • II-B-1. Marge externe en haut | margin-top
      • II-B-2. Marge externe à gauche | margin-left
      • II-B-3. Marge externe à droite | margin-right
      • II-B-4. Marge externe en bas | margin-bottom
      • II-B-5. Marge externe | margin
    • II-C. Espacements
      • II-C-1. Espacement en haut | padding-top
      • II-C-2. Espacement à gauche | padding-left
      • II-C-3. Espacement à droite | padding-right
      • II-C-4. Espacement en bas | padding-bottom
      • II-C-5. Espacement tout-en-un | padding
    • II-D. Bordures
      • II-D-1. Épaisseur de la bordure | border-width*
      • II-D-2. Couleur de la bordure | border-color*
      • II-D-3. Type de bordure | border-style*
      • II-D-4. Bordure à gauche | border-left*
      • II-D-5. Bordure en haut | border-top*
      • II-D-6. Bordure à droite | border-right*
      • II-D-7. Bordure en bas | border-bottom*
      • II-D-8. Bordure tout-en-un | border*
      • II-D-9. Bordure arrondie | border-radius
      • II-D-10. Ombre | box-shadow
    • II-E. Contours
      • II-E-1. Épaisseur du contour | outline-width
      • II-E-2. Couleur du contour | outline-color
      • II-E-3. Type de contour | outline-style
      • II-E-4. Décalage du contour | outline-offset
      • II-E-5. Contour tout-en-un | outline

II. Propriétés de mise en forme des boîtes

II-A. Dimensions des boîtes

II-A-1. Largeur | width

width : permet de définir la largeur d'un élément. La valeur peut être en px, %, ou encore auto, la valeur par défaut. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
width: 200px;
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .width {
        width: 200px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<div class="width">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>

II-A-2. Hauteur | height

height : idem que pour la largeur mais pour la hauteur. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
height: 50px;
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .height {
        width: 200px;
        height: 50px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<div class="height">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>

II-A-3. Largeur minimale | min-width

min-width : permet de définir la largeur minimale sur un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez
min-width: 500px;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .min-w {
        min-width: 500px;
        width: 10%;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<p class="min-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>

II-A-4. Largeur maximale | max-width

max-width : permet de fixer la largeur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | none | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez
max-width: 50px;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .max-w {
        max-width: 50px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<p class="max-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>

II-A-5. Hauteur minimale | min-height

min-height : permet de fixer la hauteur minimale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez
min-height: 200px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .min-h {
        min-height: 200px;
        width: 50%;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<p class="min-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

II-A-6. Hauteur maximale | max-height▲

max-height : permet de fixer la hauteur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | none | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez
max-height: 20px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .max-h {
        max-height: 20px;
        width: 50%;
        border: 2px solid #696969;
        background-color: #93caff;
    margin-bottom: 50px;
    }
</style>
<p class="max-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat</p>

II-B. Marges extérieures

II-B-1. Marge externe en haut | margin-top

margin-top : permet de définir la marge externe en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez
margin-top: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .m-top1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }

    .m-top2 {
        background-color: yellow;
    }

    .m-top3 {
        margin-top: 20px; background-color: yellow;
    }
</style>
<div class="m-top1">
    <div class="m-top2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-B-2. Marge externe à gauche | margin-left

margin-left : permet de définir la marge externe à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
margin-left: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .m-left1 {
        border: 1px solid black;
        background-color: red;
        width: 420px;
    }

    .m-left2 {
        width: 200px;
        float: left;
        background-color: yellow;
    }

    .m-left3 {
        width: 200px;
        float: left;
        margin-left: 20px;
        background-color: yellow;
    }
</style>
<div class="m-left1">
    <div class="m-left2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="clear"></div>
</div>

II-B-3. Marge externe à droite | margin-right

margin-right : permet de définir la marge externe à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
margin-right: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .m-right1 {
        border: 1px solid black;
        background-color: red;
        width: 420px;
    }

    .m-right2 {
        width: 200px;
        float: left;
        margin-right: 20px;
        background-color: yellow;
    }

    .m-right3 {
        width: 200px;
        float: left;
        background-color: yellow;
    }
</style>
<div class="m-right1">
    <div class="m-right2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="clear"></div>
</div>

II-B-4. Marge externe en bas | margin-bottom

margin-bottom : permet de définir la marge externe en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
margin-bottom: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .m-bottom1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }

    .m-bottom2 {
        margin-bottom: 20px;
        background-color: yellow;
    }

    .m-bottom3 {
        background-color: yellow;
    }
</style>
<div class="m-bottom1">
    <div class="m-bottom2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-B-5. Marge externe | margin

margin : permet de définir en une seule fois les marges externes de tous les côtés d'un élément. Les valeurs négatives sont autorisées.

Syntaxe : <margin-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

  • une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;
  • deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;
  • trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;
  • quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Sélectionnez
margin: 20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .margin1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }

    .margin2 {
        background-color: yellow;
    }

    .margin3 {
        margin: 20px 5px;
        background-color: yellow;
    }

    .margin4 {
        background-color: yellow;
    }
</style>
<div class="margin1">
    <div class="margin2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="margin3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="margin4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-C. Espacements

II-C-1. Espacement en haut | padding-top

padding-top : permet de définir l'espacement interne en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
padding-top: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .p-top1 {
        background-color: red;
        width: 800px;
    }

    .p-top2 {
        padding-top: 20px;
        background-color: red;
        border: 1px solid black;
    }

    .p-top3 {
        background-color: yellow;
    }
</style>
<div class="p-top1">
    <div class="p-top2">
        <div style="p-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-2. Espacement à gauche | padding-left

padding-left : permet de définir l'espacement interne à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
padding-left: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .p-left1 {
        background-color: red;
        width: 800px;
    }

    .p-left2 {
        padding-left: 20px;
        background-color: red;
        border: 1px solid black;
    }

    .p-left3 {
        background-color: yellow;
    }
</style>
<div class="p-left1">
    <div class="p-left2">
        <div class="p-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-3. Espacement à droite | padding-right

padding-right : permet de définir l'espacement interne à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
padding-right: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .p-right1 {
        background-color: red;
        width: 800px;
    }

    .p-right2 {
        padding-right: 20px;
        background-color: red;
        border: 1px solid black;
    }

    .p-right3 {
        background-color: yellow;
    }
</style>
<div class="p-right1">
    <div class="p-right2">
        <div class="p-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-4. Espacement en bas | padding-bottom

padding-bottom : permet de définir l'espacement interne en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
padding-bottom: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .p-bottom1 {
        background-color: red;
        width: 800px;
    }

    .p-bottom2 {
        padding-bottom: 20px;
        background-color: red;
        border: 1px solid black;
    }

    .p-bottom3 {
        background-color: yellow;
    }
</style>
<div class="p-bottom1">
    <div class="p-bottom2">
        <div class="p-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-5. Espacement tout-en-un | padding

padding : permet de définir en une seule fois l'espacement interne de tous les côtés d'un élément. Les valeurs négatives sont autorisées.

Syntaxe : <padding-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

  • une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;
  • deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;
  • trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;
  • quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Sélectionnez
padding: 20px 5px 10px; /* 20px de marge en haut, 10px en bas, 5px à gauche et à droite */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .bottom1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }

    .bottom2 {
        padding: 20px 5px 10px;
        background-color: red;
    }

    .bottom3 {
        background-color: yellow;
    }
</style>
<div class="bottom1">
    <div class="bottom2">
        <div class="bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-D. Bordures

Pour les propriétés de cette partie suivies d'un astérisque (border*), il est possible de définir plus précisément l'effet voulu en "combinant" les noms de propriétés.
Exemples :
Sélectionnez
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

II-D-1. Épaisseur de la bordure | border-width*

border-width : permet de définir l'épaisseur du trait.

Syntaxe : <border-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

  • une valeur : bordure égale pour les quatre côtés ;
  • deux valeurs : la première correspond à l'épaisseur pour le haut et le bas, la seconde pour la gauche et la droite ;
  • trois valeurs : la première correspond à l'épaisseur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
  • quatre valeurs : respectivement l'épaisseur du haut, de la droite, du bas, de la gauche.
Sélectionnez
border-width: 5px 1px 3px 0;
border-color: black;
border-style: solid;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .border-w {
        border-width: 5px 1px 3px 0;
        border-color: black;
        border-style: solid;
        background-color: #93caff;
    }
</style>
<p class="border-w">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-D-2. Couleur de la bordure | border-color*

border-color : permet de définir la couleur de la bordure.

Syntaxe : [ <color> | transparent ]{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Notes : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit. Internet Explorer 6 et précédents ne supportent pas la valeur transparent.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

  • une valeur : couleur unique pour les quatre côtés ;
  • deux valeurs : la première correspond à la couleur pour le haut et le bas, la seconde pour la gauche et la droite ;
  • trois valeurs : la première correspond à la couleur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
  • quatre valeurs : respectivement la couleur du haut, de la droite, du bas, de la gauche.
Sélectionnez
border-width: 5px 2px 3px 4px;
border-color: black red blue green;
border-style: solid;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .border-color {
        border-width: 5px 2px 3px 4px;
        border-color: black red blue green;
        border-style: solid;
        background-color: #93caff;
    }
</style>
<p class="border-color">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-D-3. Type de bordure | border-style*

border-style : permet de définir le style de bordure.

Syntaxe : <border-style>{1,4} | inherit

Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : les valeurs inherit et hidden ne sont pas supportées par IE 8 et précédents.

Version CSS : 1

  • none : pas de bordure ;
  • hidden : bordure cachée, l'espace de bordure est apparent contrairement à none ;
  • solid : ligne pleine ;
  • double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
  • dashed : tirets ;
  • dotted : pointillés ;
  • inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
  • outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
  • ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
  • groove : autre effet 3D double bordure (dépend de la couleur de la bordure).
Sélectionnez
border-color: black;

border-style: none;
border-style: hidden
border-style: solid;
border-style: double;
border-style: dashed;
border-style: dotted;
border-style: inset;
border-style: outset;
border-style: ridge;
border-style: groove;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .b-style1 {
        border-color: black;
        border-style: solid;
        margin-bottom: 10px;
        background-color: #93caff;
    }

    .b-style2 {
        border-color: black;
        border-style: double;
        margin-bottom: 10px;
        background-color: #93caff;
    }

    .b-style3 {
        border-color: black;
        border-style: dashed;
        margin-bottom: 10px;
        background-color: #93caff;
    }

    .b-style4 {
        border-color: black;
        border-style: dotted;
        margin-bottom: 10px;
        background-color: #93caff;
    }

    .b-style5 {
        border-color: black;
        border-style: inset;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }

    .b-style6 {
        border-color: black;
        border-style: outset;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }

    .b-style7 {
        border-color: black;
        border-style: ridge;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }

    .b-style7 {
        border-color: black;
        border-style: groove;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }
</style>
<div class="b-style1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style7">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-4. Bordure à gauche | border-left*

border-left : indique la couleur, l'épaisseur et le type de bordure pour la bordure gauche. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-left-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
border-left: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .b-left {
        border-left: 2px dotted red;
        width: 70%;
        background-color: #93caff;
    }
</style>
<div class="b-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-5. Bordure en haut | border-top*

border-top : indique la couleur, l'épaisseur et le type de bordure pour la bordure en haut. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-top-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
border-top: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .b-top {
        border-top: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="b-top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-6. Bordure à droite | border-right*

border-right : indique la couleur, l'épaisseur et le type de bordure pour la bordure à droite. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-right-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
border-right: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .b-right {
        border-right: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="b-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-7. Bordure en bas | border-bottom*

border-bottom : indique la couleur, l'épaisseur et le type de bordure pour la bordure en bas. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-bottom-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
border-bottom: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .b-bottom {
        border-bottom: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="b-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-8. Bordure tout-en-un | border*

border : permet de définir la bordure en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.

Syntaxe : [ <border-width> || <border-style> || 'border-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
border: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .border {
        border: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="border">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-9. Bordure arrondie | border-radius

border-radius : permet d'arrondir les angles

Syntaxe : <valeur>{1,4} / <valeur>{1,4}

Compatibilité : IE 9+, FF 4+, Chrome 0.2+, Safari 5+, Opera 6+

Version CSS : 3

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

  • une valeur : angle unique pour les quatre côtés ;
  • deux valeurs : la première correspond à l'angle pour le haut et le bas, la seconde pour la gauche et la droite ;
  • trois valeurs : la première correspond à l'angle du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
  • quatre valeurs : respectivement : l'angle du haut, de la droite, du bas, de la gauche.

Complément d'information : Les bordures en CSS 3.

Sélectionnez
border-radius: 5px 10px 0 15px;
background-color: yellow;
border: 1px solid red;
padding: 5px; /* Pour éviter que le texte déborde des bordures arrondies */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir le code source
Cacher Sélectionnez
<style type="text/css">
    .border-radius {
        border-radius: 5px 10px 0 15px;
        background-color: yellow;
        border: 1px solid red;
        padding: 5px; width: 60%;
    }
</style>
<div class="border-radius">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-10. Ombre | box-shadow

box-shadow : permet d'ajouter un ombrage sur un élément.

Syntaxe : none | [, ]* <ombre> | inherit ou <ombre> [ <couleur>? <length> <longueur> <longueur>? <longueur>? | <longueur> <longueur> <longueur>? <longueur>? <couleur>? ] (source : MDN)

Compatibilité : IE 9+, FF 4+, Chrome 10+, Safari 4+, Opera 10.5+

Version CSS : 3

Explications sur la syntaxe (source : Créer des effets étonnants avec la propriété CSS3 box-shadow) :

  • une valeur positive pour le décalage horizontal décale l'ombre vers la droite, une valeur négative vers la gauche ;
  • une valeur positive pour le décalage vertical décale l'ombre vers le bas, une valeur négative vers le haut ;
  • vous ne pouvez pas donner une valeur négative pour l'étendue de flou. Plus la valeur est grande, plus le flou s'étale ;
  • une distance de propagation positive entraine une expansion de la zone d'ombre dans toutes les directions, une valeur négative entraine une contraction ;
  • la couleur est celle de l'ombre ;
  • la propriété inset indique une ombre interne plutôt qu'externe.
Sélectionnez
box-shadow: 2px 2px 4px black;
box-shadow: 2px 2px 4px black inset;
box-shadow: 3px 3px 10px 1px #7b7b7b;
Note :
[X]
Note :
[X]
Voir le code source
Cacher Sélectionnez
<style type="text/css">
    .box1 {
        width: 200px;
        height: 100px;
        background-color: yellow;
        box-shadow: 2px 2px 4px black;
        position: relative;
        margin-bottom: 10px;
    }

    .box2 {
        position: absolute;
        top: 1px;
        left: 1px;
        font-style: italic;
        font-weight: bold;
    }

    .box3 {
        position: absolute;
        top: 1px;
        right: 1px;
    }

    .box4 {
        width: 200px;
        height: 100px;
        background-color: yellow;
        box-shadow: 2px 2px 4px black inset;
        position: relative;
        margin-bottom: 10px;
    }

    .box5 {
        position: absolute;
        top: 3px;
        left: 5px;
        font-style: italic;
        font-weight: bold;
    }

    .box6 {
        position: absolute;
        top: 3px;
        right: 1px;
    }

    .box7 {
        box-shadow: 3px 3px 10px 1px #7b7b7b;
        border: 1px solid #cecdcd;
        background-color: white;
        width: 80px;
        height: 80px;
    }
</style>
<div class="box1">
    <div class="box2">Note :</div>
    <div class="box3">[X]</div>
</div>
<div class="box4">
    <div class="box5">Note :</div>
    <div class="box6">[X]</div>
</div>
<div class="box7"></div>

II-E. Contours

Les contours permettent d'entourer un élément. Bien que similaires aux bordures, ils diffèrent sur certains points :

  • ils n'augmentent pas l'espace utilisé par l'élément mais se positionnent par dessus le contenu (voir exemple) ;
  • ils ne sont pas nécessairement rectangulaires, bien que la plupart des navigateurs ne respectent pas la spécification (et dessinent des contours rectangulaires) ;
  • on ne peut pas définir de contour spécifique à chaque côté ;
  • en cas de saut de ligne, le contour n'est pas coupé, il est fermé en fin de ligne et ouvert à la ligne suivante, donnant visuellement deux contours.

Exemple :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .outline-w-p {
        outline-width: thick;
        outline-color: gold;
        outline-style: solid;
        outline-offset: 5px;
        border: 3px solid black;
        background-color: #93caff;
        padding: 0.8em;
        width: 80%;
        margin: 10px auto 20px;  /* Évite de chevaucher le cadre de code */
    }
    .outline-w-span {
        outline-width: 0.8em;
        outline-color: silver;
        outline-color: rgba(214,214,214,0.8);
        outline-style: solid;
    }
</style>
<p class="outline-w-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore <span class="outline-w-span">magna aliqua.<br />Ut enim</span> ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-E-1. Épaisseur du contour | outline-width

outline-width : permet de définir l'épaisseur du trait.

Syntaxe : thin | medium | thick | <longueur> | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : Les valeurs prédéfinies dépendent de l'agent utilisateur, néanmoins, les valeurs habituelles sont de 1px pour thin, 3px pour medium et 5px pour thick.

Version CSS : 2.1

Le contour est placé en avant du contenu, cachant éventuellement une partie de ce dernier comme dans l'exemple ci-dessus. Cependant, il ne constitue pas lui-même un élément et ne masque pas réellement les éléments qui sont en-dessous. Notamment, les liens restent cliquables ou le texte sélectionnable.

Exemples :

Sélectionnez
outline-width: thin;
outline-width: 0.2em;
outline-width: 4px;

II-E-2. Couleur du contour | outline-color

outline-color : permet de définir la couleur du contour.

Syntaxe : <couleur> | invert | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Notes.
La valeur invert (qui est pourtant la valeur par défaut) n'est pas supportée par Chrome, Opera 15+ et Safari et a été abandonnée par Firefox 3.0+.
Pour les navigateurs ne supportant pas invert, la valeur par défaut correspond à la valeur calculée pour color.

Version CSS : 2.1

Exemples :

Sélectionnez
outline-color: green;
outline-color: #93caff;
outline-color: rgba(127, 218, 54, 0.8);

II-E-3. Type de contour | outline-style

outline-style : permet de définir le style du contour.

Syntaxe : <outline-style> | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : même si elle est peu appliquée, la spécification prévoit que le contour doit s'adapter aux débordements éventuels du contenu et peut ne pas être rectangulaire (Opera 12 et inférieurs respecte la spécification).

Version CSS : 2.1

  • none (par défaut) : pas de bordure ;
  • solid : ligne pleine ;
  • double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
  • dashed : tirets ;
  • dotted : pointillés ;
  • inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
  • outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
  • ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
  • groove : autre effet 3D double bordure (dépend de la couleur de la bordure).

Exemples :

Sélectionnez
outline-style: none;
outline-style: solid;
outline-style: double;
outline-style: dashed;
outline-style: dotted;
outline-style: inset;
outline-style: outset;
outline-style: ridge;
outline-style: groove;

II-E-4. Décalage du contour | outline-offset

outline-offset : permet de décaler les limites du contour.

Syntaxe : <longueur> | inherit

Compatibilité : IE, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 9.5+

Note : par défaut, le contour est collé aux limites de l'élément, si offline-offset est différent de 0, un espacement transparent est créé entre l'élément et le contour (si la valeur est négative, le contour est contracté à l'intérieur de l'élément).

Version CSS : 3

Exemples :

Sélectionnez
outline-offset: 0;
outline-offset: 5px;
outline-offset: -5px;
outline-offset: 0.4em;

II-E-5. Contour tout-en-un | outline

outline : permet de définir le contour en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.

Syntaxe : [ <outline-width> || <outline-style> || <outline-color> ] | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : la propriété outline-offset ne peut pas être intégrée à la propriété raccourcie outline.

Version CSS : 2.1

Exemples :

Sélectionnez
outline: thin dotted blue;
outline: solid #FFD700;
outline: 6px double;


Tutoriel WEB

Glossaire des propriétés CSS

Table des matières

  • III. Propriétés de mise en forme d'arrière-plans
    • III-A. Couleur de fond
      • III-A-1. Couleur de fond | background-color
    • III-B. Image de fond
      • III-B-1. Image de fond | background-image
      • III-B-2. Fond fixé | background-attachment
      • III-B-3. Répétition du fond | background-repeat
      • III-B-4. Position du fond | background-position
      • III-B-5. Fond tout-en-un | background
      • III-B-6. Transparence | opacity

III. Propriétés de mise en forme d'arrière-plans

III-A. Couleur de fond

III-A-1. Couleur de fond | background-color

background-color : définit la couleur de fond de l'élément.

Syntaxe : <color> | transparent | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complément d'information : Les couleurs en CSS 3.

Version CSS : 1

Sélectionnez
background-color: red;
background-color: #C0C0C0;
background-color: rgb(0, 255, 0);
background-color: rgba(0, 255, 0, 0.6);
background-color: hsl(250, 100%, 50%);
background-color: hsla(250, 100%, 50%, 0.6);

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Lorem ipsum dolore sit amet

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .background-color1 {
        background-color: red;
        border: 2px solid #696969;
        margin-bottom: 10px;
    }

    .background-color2 {
        background-color: #C0C0C0;
        border: 2px solid #696969;
        margin-bottom: 10px;
    }

    .background-color3 {
        background-color: rgb(0, 255, 0);
        border: 2px solid #696969;
    }
</style>
<div style="width: 60%;">
    <p class="background-color1">Lorem ipsum dolore sit amet</p>
    <p class="background-color2">Lorem ipsum dolore sit amet</p>
    <p class="background-color3">Lorem ipsum dolore sit amet</p>
</div>

III-B. Image de fond

III-B-1. Image de fond | background-image

background-image : indiquer l'URL de l'image (chemin absolu ou relatif).

Syntaxe : <uri> | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas plusieurs images de fond pour un même élément. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
background-image: url("./images/background.png"); /* relatif */
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .background-image {
        width: 100px;
        height: 100px;
        background-image: url('./images/background.png');
        border: 2px solid #696969;
    }
</style>
<div class="background-image"></div>

III-B-2. Fond fixé | background-attachment

background-attachment : permet de fixer le fond lors du défilement de la page.

Syntaxe : scroll | fixed | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

  • fixed : le fond reste fixe quand on scrolle ;
  • scroll : le fond défile quand on scrolle (par défaut).
Sélectionnez
background-attachment: fixed;
background-attachment: scroll;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .background-attch1 {
        background-image: url('./images/background.png');
        background-attachment: fixed;
        background-repeat: no-repeat;
    }

    .background-attch2 {
        background-image: url('./images/background.png');
        background-repeat: no-repeat;
        background-attachment: scroll;
    }
</style>
<div class="background-attch1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="background-attch2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

III-B-3. Répétition du fond | background-repeat

background-repeat : permet de répéter ou non le fond.

Syntaxe : repeat | repeat-x | repeat-y | no-repeat | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

  • repeat : le fond est répété (par défaut) ;
  • repeat-x : le fond est répété horizontalement ;
  • repeat-y : le fond est répété verticalement ;
  • no-repeat : le fond est affiché une fois, il n'est pas répété.
Sélectionnez
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .background-repeat1 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: repeat;
        float: left;
        border: 2px solid #696969;
        margin-right: 20px;
    }

    .background-repeat2 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: repeat-x;
        float: left;
        border: 2px solid #696969;
        margin-right: 20px;
    }

    .background-repeat3 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: repeat-y;
        float: left;
        border: 2px solid #696969;
        margin-right: 20px;
    }

    .background-repeat4 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: no-repeat;
        float: left;
        border: 2px solid #696969;
    }
</style>
<div class="background-repeat1"></div>
<div class="background-repeat2"></div>
<div class="background-repeat3"></div>
<div class="background-repeat4"></div>
<div style="clear: both;"></div>

III-B-4. Position du fond | background-position

background-position : permet de définir l'emplacement du fond. Utilisé pour la gestion de sprite par exemple. Pour fonctionner sous Firefox et Opera, la propriété background-attachment doit être à fixed.

Syntaxe : [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Il y a deux possibilités pour cette propriété :

  • la première, en définissant la position en px ou % depuis le coin en haut à gauche ;
    Sélectionnez
    background-position: 100px 20px; /* 100px à droite, 20px en bas */
  • la seconde, en utilisant les valeurs prédéfinies pour la verticale et pour l'horizontale :
Sélectionnez
background-position: top; /* en haut, verticalement */
background-position: center; /* au milieu, verticalement */
background-position: bottom; /* en bas, verticalement */

background-position: left; /* à gauche, horizontalement */
background-position: center; /* au centre, horizontalement */
background-position: right; /* à droite, horizontalement */
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .background-pos1 {
        width: 200px;
        height: 200px;
        background-image: url('./images/background.png');
        background-repeat: no-repeat;
        background-position: 100px 20px;
        border: 2px solid #696969;
    }
</style>
<div class="background-pos1"></div>

III-B-5. Fond tout-en-un | background

background : comme la propriété font, il est possible de définir le fond en une seule fois via background.
L'ordre importe peu, mais il est possible de définir : background-image, background-repeat, background-attachment, background-position.

Syntaxe : ['background-color' ||
'background-image' ||
'background-repeat' ||
'background-attachment' || 'background-position']
| inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas plusieurs images de fond pour un même élément. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
background: url("./images/background.png") no-repeat top right; /* l'image reste en haut à droite de l'écran et n'est pas répété */
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .background1 {
        width: 200px;
        height: 200px;
        background: url('./images/background.png') no-repeat top right;
        border: 2px solid #696969;
    }
</style>
<div class="background1"></div>

III-B-6. Transparence | opacity

opacity / filter : permet de rendre un élément transparent à un certain pourcentage. Pour IE8 et ses précédentes versions, il faut passer par la propriété filter. Le reste des navigateurs acceptent opacity.

Syntaxe : <valeur> | inherit

Compatibilité : IE 9, FF 3.6+, Chrome 17+, Safari 5+, Opera 11.6+

Note : IE 8 et précédents supporte un équivalent : filter: alpha(opacity=50).

Version CSS : 3

Sélectionnez
opacity: 0.5;
filter: alpha(opacity=50); /* <= IE8 */
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .opacity1 {
        width: 100px;
        height: 100px;
        background-image: url('./images/background.png');
        border: 2px solid #696969;
    }

    .opacity2 {
        width: 50px;
        height: 50px;
        background-color: red;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }
</style>
<div class="opacity1">
    <div class="opacity2"></div>
</div>


Tutoriel WEB

Glossaire des propriétés CSS

Table des matières

  • IV. Propriétés des listes
    • IV-A. Type de liste | list-style-type
    • IV-B. Position en retrait | list-style-position
    • IV-C. Puce personnalisée | list-style-image
    • IV-D. Liste tout-en-un | list-style

IV. Propriétés des listes

IV-A. Type de liste | list-style-type

list-style-type : permet de définir le type de la liste.

Syntaxe : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

Compatibilité : IE complète 8 - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : IE 8 et précédents ne supporte les valeurs : decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian et inherit que si un doctype est déclaré.

Version CSS : 1

  • Pour les listes non ordonnées (<ul>) :
    • disc (par défaut) : un disque noir ;
    • circle : un cercle ;
    • square : un carré ;
    • none : aucune puce ne sera utilisée.
  • Pour les listes ordonnées (<ol>) :
    • decimal : des nombres 1, 2, 3, 4, 5... (par défaut) ;
    • decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...) ;
    • upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...) ;
    • lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...) ;
    • upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...) ;
    • lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...) ;
    • lower-greek : numérotation grecque, en minuscules ;
    • none : aucune.
Sélectionnez
list-style-type: disc;
list-style-type: square;
list-style-type: upper-roman;
  • Article 1
  • Article 2
  • Article 3
  • Article 1
  • Article 2
  • Article 3
  1. Article 1
  2. Article 2
  3. Article 3
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .list1 {
        list-style-type: disc;
    }

    .list2 {
        list-style-type: square;
    }

    .list3 {
        list-style-type: upper-roman;
    }
</style>
<div>
    <ul class="list1">
        <li>Article 1</li>
        <li>Article 2</li>
        <li>Article 3</li>
    </ul>
    <ul class="list2">
        <li>Article 1</li>
        <li>Article 2</li>
        <li>Article 3</li>
    </ul>
    <ol class="list3">
        <li>Article 1</li>
        <li>Article 2</li>
        <li>Article 3</li>
    </ol>
</div>

IV-B. Position en retrait | list-style-position

list-style-position : permet de définir la position de la puce lorsque le contenu est sur plusieurs lignes.

Syntaxe : inside | outside | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

  • inside : sans retrait ;
  • outside : avec retrait (par défaut).
Sélectionnez
list-style-position: inside;
list-style-position: outside;
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .list-pos1 {
        list-style-position: inside;
    }

    .list-pos2 {
        list-style-position: outside;
    }
</style>
<div style="width: 400px;">
    <ul class="list-pos1">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat.</li>
    </ul>
    <ul class="list-pos2">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat.</li>
    </ul>
</div>

IV-C. Puce personnalisée | list-style-image

list-style-image : permet de mettre une image en guise de puce.

Syntaxe : <uri> | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
list-style-image: url('./images/puce.gif');
  • article 1
  • article 2
  • article 3
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .list-img {
        list-style-image: url('./images/puce.gif');
    }
</style>
<div>
    <ul class="list-img">
        <li>article 1</li>
        <li>article 2</li>
        <li>article 3</li>
    </ul>
</div>

IV-D. Liste tout-en-un | list-style

list-style : permet de définir les valeurs de list-style-type, list-style-position et list-style-image en une seule fois. Vous n'êtes pas obligé de mettre toutes les valeurs et l'ordre n'a pas d'importance.

Syntaxe : [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez
list-style: inside square;
  • article 1
  • article 2
  • article 3
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .list-style {
        list-style: inside square;
    }
</style>
<div>
    <ul class="list-style">
        <li>article 1</li>
        <li>article 2</li>
        <li>article 3</li>
    </ul>
</div>


Tutoriel WEB

Glossaire des propriétés CSS

Table des matières

  • V. Propriétés de mise en forme des tableaux
    • V-A. Type de bordure | border-collapse
    • V-B. Cellules vides | empty-cells
    • V-C. Position du titre | caption-side
    • V-D. Affichage des cellules | table-layout
    • V-E. Espacement des cellules | border-spacing

V. Propriétés de mise en forme des tableaux

V-A. Type de bordure | border-collapse

border-collapse : permet de définir l'affichage des bordures des cellules d'un tableau.

Syntaxe : collapse | separate | inherit

Compatibilité : IE complète 8 - partielle 5 à 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Version CSS : 2.1

  • collapse : les bordures du tableau et des cellules sont unifiées ;
  • separate : les bordures du tableau et des cellules sont distinctes (par défaut) ;
  • inherit : la valeur est reprise du parent. Non supportée par Internet Explorer (IE 9 compris).
Sélectionnez
border-collapse: collapse;
border-collapse: separate;

Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .border1 {
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .border2 {
        border-collapse: separate;
    }
</style>
<div>
    <table class="border1">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>

    <table class="border2">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>
</div>

V-B. Cellules vides | empty-cells

empty-cells : permet d'afficher ou masquer les cellules vides. Ne fonctionne que si les bordures des cellules sont distinctes.

Syntaxe : hide | show | inherit

Compatibilité : IE complète 8 (si un doctype est déclaré) - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Version CSS : 2.1

  • hide : les bordures des cellules vides sont masquées (par défaut) ;
  • show : les bordures des cellules vides sont affichées.
Sélectionnez
empty-cells: hide;
empty-cells: show;

Cellule 1 | Cellule 2
Cellule 3 |
Cellule 1 | Cellule 2
Cellule 3 |
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .empty1 {
        empty-cells: hide;
        border-collapse: separate;
        margin-bottom: 20px;
    }

    .empty2 {
        empty-cells: show;
        border-collapse: separate;
    }
</style>
<div>
    <table class="empty1">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td></td>
    </tr>
    </table>

    <table class="empty2">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td></td>
    </tr>
    </table>
</div>

V-C. Position du titre | caption-side

caption-side : permet de définir la position du titre pour le tableau.

Syntaxe : top | bottom | inherit

Compatibilité : IE 8+ (si un doctype est déclaré), FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Version CSS : 2.1

  • top : le titre sera en haut du tableau (par défaut) ;
  • bottom : le titre sera en bas du tableau.
Sélectionnez
caption-side: top;
caption-side: bottom;

Titre du tableau
Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
Titre du tableau
Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .caption1 {
        caption-side: top;
        margin-bottom: 20px;
    }

    .caption2 {
        caption-side: bottom;
    }
</style>
<div>
    <table class="caption1" style="border: 1px solid black;">
    <caption>Titre du tableau</caption>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>

    <table class="caption2" style="border: 1px solid black;">
    <caption>Titre du tableau</caption>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>
</div>

V-D. Affichage des cellules | table-layout

table-layout : permet de définir la façon dont les cellules d'un tableau se comportent.

Syntaxe : inherit | auto | fixed

Compatibilité : IE 5+, FF 1.0+, Chrome, Safari 1.0+, Opera 7+

Explication.
inherit/auto : la largeur dépend du contenu et de l'algorithme utilisé par le navigateur.
fixed : la largeur est fixe et dépend soit de la largeur de la première ligne si aucune dimensions n'est spécifiée, soit des dimensions spécifiées. À noter que si le contenu des lignes est supérieur en terme d'espace, les cellules adoptent un overflow automatiquement.

Version CSS : 2.1

Exemple :

Cellule 1 | Lorem ipsum dolore sit amet, consectetur adipiscing elit
Cellule 3 | Cellule 4
Lorem ipsum dolore sit amet, consectetur adipiscing elit | Cellule 2
Lorem ipsum dolore sit amet, consectetur adipiscing elit Lorem ipsum dolore sit amet, consectetur adipiscing elit | Cellule 4
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .table-layout1 {
        border-collapse: collapse;
        margin-bottom: 20px;
        table-layout: fixed;
        width: 200px;
    }
    .table-layout2 {
        border-collapse: collapse;
        margin-bottom: 20px;
        table-layout: auto;
        width: 200px;
    }

    .table-layout2 td {
        white-space: nowrap;
    }
</style>
<table class="table-layout1">
<tr>
    <td>Cellule 1</td>
    <td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
</tr>
</table>
<table class="table-layout2">
<tr>
    <td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
    <td>Cellule 2</td>
</tr>
<tr>
    <td>Lorem ipsum dolore sit amet, consectetur adipiscing elit Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
    <td>Cellule 4</td>
</tr>
</table>

V-E. Espacement des cellules | border-spacing

border-spacing : permet de définir l'espacement enter les cellules. Ne fonctionne que si les cellules sont séparées (border-collapse: separate). Cette propriété est équivalente à l'attribut de présentation cellspacing en HTML.

Syntaxe : inherit | <longueur> | <longueur> <longueur>

Compatibilité : IE 7+, FF 1.0+, Chrome, Safari 1.0+, Opera 6+

Note : indiquez de une à deux valeurs à la suite. Selon le nombre de valeurs, la signification change :
une valeur : espacement horizontaux et verticaux ;
deux valeurs : la première longueur indique l'espacement horizontal (espace entre deux cellules de colonnes adjacentes), la seconde longueur indique l'espacement vertical (espace entre deux cellules d'une même colonne).

Version CSS : 2.1

Exemple :

Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
Cellule 1 | Cellule 2
Cellule 3 | Cellule 4
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .border-spacing1 {
        border-collapse: separate;
        margin-bottom: 20px;
        width: 200px;
        border-spacing: 10px;
    }
    .border-spacing2 {
        border-collapse: separate;
        margin-bottom: 20px;
        width: 200px;
        border-spacing: 10px 20px;
    }

    .border-spacing2 td {
        white-space: nowrap;
    }
</style>
<table class="border-spacing1">
<tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
</tr>
<tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
</tr>
</table>
<table class="border-spacing2">
<tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
</tr>
<tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
</tr>
</table>


Tutoriel WEB

Glossaire des propriétés CSS

Table des matières

  • VI. Propriétés d'affichage et de positionnement
    • VI-A. Affichage
      • VI-A-1. Type d'élément | display
      • VI-A-2. Affichage | visibility
      • VI-A-3. Afficher seulement une partie | clip
      • VI-A-4. Limiter les dimensions | overflow
    • VI-B. Positionnement
      • VI-B-1. Flottant | float
      • VI-B-2. Stopper un flottant | clear
      • VI-B-3. Type de positionnement | position
      • VI-B-4. Position par rapport aux coins | top bottom left right
      • VI-B-5. Ordre d'affichage | z-index

VI. Propriétés d'affichage et de positionnement

VI-A. Affichage

VI-A-1. Type d'élément | display

display : définit comment doit être affiché un élément HTML.

Syntaxe : inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Notes : la valeur inline-block n'est supportée par IE 6 que pour les éléments initialement inline ; les valeurs inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group et inherit ne sont pas supportées par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte ces valeurs.

Version CSS : 1

On ne va reprendre ici que ceux étant les plus utilisés :

  • none : l'élément ne sera pas affiché ;
  • block : l'élément devient de type "bloc" (comme <div>). Un élément de type bloc ajoute un espace avant et après le bloc, ainsi qu'un saut de ligne ;
  • inline : l'élément devient de type "inline" (en ligne, comme <span>). Valeur par défaut. Il n'y a pas d'espace avant ni après et n'ajoute pas de saut de ligne ;
  • inline-block : l'élément est affiché comme un "inline" mais peut être redimensionné comme un bloc ;
  • list-item : l'élément devient de type "élément de liste à puce" (comme <li>) ;
  • table : l'élément est affiché comme une table ;
  • table-caption : l'élément est affiché comme le titre d'un tableau ;
  • table-cell : l'élément est affiché comme une cellule de tableau ;
  • table-column : l'élément est affiché comme une colonne de tableau ;
  • table-column-group : l'élément est affiché comme un groupe de colonnes (<colgroup>) ;
  • table-header-group : l'élément est affiché comme l'en-tête d'un tableau ;
  • table-footer-group : l'élément est affiché comme le pied de page d'un tableau ;
  • table-row : l'élément est affiché comme une ligne de tableau ;
  • table-row-group : l'élément est affiché comme un groupe de lignes.
Sélectionnez
display: none;
display: block;
display: inline;
display: inline-block;
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .display1 {
        display: none;
        background-color: red;
    }

    .display2 {
        display: block;
        background-color: red;
    }

    .display3 {
        display: inline;
        background-color: red;
    }

    .display4 {
        display: inline-block;
        background-color: red;
    }
</style>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display1">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display2">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display3">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet,
<span class="display4">consectetur</span> adipisicing elit</div>

VI-A-2. Affichage | visibility

visibility : permet d'afficher ou de masquer un élément.

Syntaxe : visible | hidden | collapse | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : les valeurs inherit et collapse ne sont pas supportées par IE 8 et précédents.

Version CSS : 2.1

Contrairement à display: none;, l'élément masqué occupe toujours l'espace dans la page.

  • visible : l'élément est affiché ;
  • hidden : l'élément est masqué mais conserve son espace dans la page ;
  • collapse : cache une ligne ou une colonne d'un tableau.
Sélectionnez
visibility: visible;
visibility: hidden;
visibility: collapse;
display: none;
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est affichée.

lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase sera masquée mais l'espace est conservé.

lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici c'est une ligne d'un tableau que l'on masque

lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est masquée et l'espace supprimé.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .visible1 {
        visibility: visible;
    }

    .visible2 {
        visibility: hidden;
    }

    .visible3 {
        visibility: collapse;
    }

    .display {
        display: none;
    }
</style>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="visible1">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase est affichée.</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="visible2">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase sera masquée mais l'espace est conservé.</p>
</div>
<div style="margin-bottom: 10px; background-color: #93caff; padding: 10px; width: 60%;">
    <table>
    <tr id="visible3" class="visible3">
        <td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
    </tr>
    <tr>
        <td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
    </tr>
    <tr>
        <td><button>Cliquez ici</button></td>
    </tr>
    </table>
    <p>Ici c'est une ligne d'un tableau que l'on masque</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="display">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase est masquée et l'espace supprimé.</p>
</div>

VI-A-3. Afficher seulement une partie | clip

clip : permet de spécifier une zone visible d'un élément.

Syntaxe : <shape> | auto | inherit

Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquer quatre valeurs à la suite :

Sélectionnez
clip: rect(0px, 50px, 50px, 0px);
clip: rect(10px, 90px, 60px, 10px);

Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les coordonnées du rectangle qui sera affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.

Attention, clip ne s'applique qu'aux éléments dont la position est absolue.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .clip1 {
        position: absolute;
        clip: rect(0px 50px 50px 0px);
        width: 150px;
        border: 2px solid #696969;
        background-color: #93caff;
    }

    .clip2 {
        position: absolute;
        clip: rect(10px, 90px, 60px, 10px);
        width: 150px;
        border: 2px solid #696969;
        background-color: #93caff;
        left: 150px;
    }
</style>
<div style="position: relative; height: 110px;">
    <div class="clip1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</div>
    <div class="clip2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</div>
</div>

VI-A-4. Limiter les dimensions | overflow

overflow : permet de déterminer comment sera affiché le contenu d'un élément quand il dépasse les limites de son conteneur. C'est utilisé, entre autres, pour afficher des barres de défilement.

Syntaxe : visible | hidden | scroll | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

  • visible : tout l'élément sera affiché (par défaut) ;
  • hidden : l'élément sera masqué s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte masquée ;
  • scroll : tout comme pour hidden, l'élément sera coupé s'il dépasse les limites. Cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte. Ces barres seront obligatoirement affichées, même si celles-ci ne sont pas nécessaires ;
  • auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas.

Cette propriété peut être étendue par overflow-x et overflow-y.

Sélectionnez
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis. Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.

Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus. Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.

Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor purus, molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu at mattis. Nunc vehicula dui tortor, ut convallis odio.

Voir la source
Cacher Sélectionnez
<style type="text/css">
    .myDiv {
        width: 300px;
        height: 300px;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 100px;
    }
</style>
<button onclick="overflow('overflow: visible;');">visible</button>
<button onclick="overflow('overflow: hidden;');">hidden</button>
<button onclick="overflow('overflow: scroll;');">scroll</button>
<button onclick="overflow('overflow: auto;');">auto</button>
<div class="myDiv" style="overflow: visible;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis.
    Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus
    eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.</p>
    <p>Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus.
    Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at
    porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.</p>
    <p>Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor
    purus,     molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu
    at mattis. Nunc vehicula dui tortor, ut convallis odio.</p>
</div>

VI-B. Positionnement

VI-B-1. Flottant | float

float : permet de définir le flottement d'une boîte à gauche, à droite ou pas du tout.

Syntaxe : none | left | right | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

  • left : l'élément flotte à gauche ;
  • right : l'élément flotte à droite ;
  • none : pas de flottement (par défaut).
Sélectionnez
float: none;
float: left;
float: right;
NONE
LEFT
RIGHT
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .float1 {
        width: 500px;
        height: 204px;
        border: 2px solid #696969;
        background-color: #93caff;
    }

    .float2 {
        width: 100px;
        height: 100px;
        float: none;
        border: 1px solid black;
        background-color: white;
    }

    .float3 {
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid black;
        background-color: yellow;
    }

    .float4 {
        width: 100px;
        height: 100px;
        float: right;
        border: 1px solid black;
        background-color: red;
    }
</style>
<div class="float1">
    <div class="float2">NONE</div>
    <div class="float3">LEFT</div>
    <div class="float4">RIGHT</div>
</div>

VI-B-2. Stopper un flottant | clear

clear : permet de définir si un élément doit être adjacent à un autre ou placé en dessous.

Syntaxe : none | left | right | both | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

  • left : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche ;
  • right : l'élément est déplacé vers le bas pour se libérer des éléments flottants de droite ;
  • both : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche comme de droite ;
  • none : l'élément ne se déplacera pas (par défaut).
Sélectionnez
clear: left;
Flottant à gauche
Flottant à gauche avec marge de 20 pixels
Flottant nettoyé
Cacher Sélectionnez
<style type="text/css">
    .div1 {
        float: left;
        border: 1px solid #696969;
        background-color: white;
        height: 50px;
    }

    .div2 {
        float: left;
        border: 1px solid #696969;
        background-color: yellow;
        height: 50px;
        margin-left: 20px;
    }

    .clear1 {
        clear: left;
    }
</style>
<div style="border: 2px solid #696969; background-color: #93caff; width: 60%; padding: 10px;">
    <div class="div1">Flottant à gauche</div>
    <div class="div2">Flottant à gauche avec marge de 20 pixels</div>
    <div class="clear1">Flottant nettoyé</div>
</div>

VI-B-3. Type de positionnement | position

position : permet de définir le mode de positionnement d'un élément.

Syntaxe : absolute | fixed | relative | static | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

  • absolute : retire complètement l'élément du flux et le positionne par rapport à son plus proche ancêtre lui-même positionné (ou par défaut la fenêtre du navigateur) en fonction des propriétés top, right, bottom et left ;
  • fixed : position fixe. L'élément reste à sa position dans la fenêtre ;
  • relative : déplace l'élément par rapport à sa position dans le flux. Il n'est pas retiré du flux ;
  • static : positionnement normal (par défaut).
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .div_position {
        border: 2px solid #696969;
        background-color: #93caff;
        width: 60%;
        height: 400px;
    }

    .position {
        width: 100px;
        height: 100px;
        background-color: red;
        left: 10px;
        top: 100px;
    }
</style>
<button onclick="position('position: static;');">static</button>
<button onclick="position('position: fixed;');">fixed</button>
<button onclick="position('position: relative;');">relative</button>
<button onclick="position('position: absolute;');">absolute (sera placé tout en haut de la page)</button>
<div class="div_position">
    <div class="position" style="position: static;"></div>
</div>

VI-B-4. Position par rapport aux coins | top bottom left right

top - bottom - left - right : permettent de définir la position d'un élément. Valeurs en px, %, em... À utiliser pour un positionnement absolu, fixe ou relatif. Si la propriété position est à la valeur static, ces propriétés n'ont pas d'effet.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez
top: 30px;
left: 50px;

bottom: 10px;
right: 30px;
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .div_pos {
        position: relative;
        width: 60%;
        height: 400px;
        border: 2px solid #696969;
        background-color: #93caff;
    }

    .pos1 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 30px;
        left: 50px;
        border: 1px solid black;
        background-color: white;
    }

    .pos2 {
        position: absolute;
        width: 100px;
        height: 100px;
        bottom: 10px;
        right: 30px;
        border: 1px solid black;
        background-color: yellow;
    }
</style>
<div class="div_pos">
    <div class="pos1"></div>
    <div class="pos2"></div>
</div>

VI-B-5. Ordre d'affichage | z-index

z-index : permet, pour les éléments positionnés, de définir quel élément sera placé au-dessus de l'autre. Plus le nombre sera grand, plus il sera au premier plan.

Syntaxe : auto | <integer> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complément d'information : Comprendre z-index.

Version CSS : 2.1

Sélectionnez
z-index: 1;
z-index: 2;
z-index: 5;
Voir la source
Cacher Sélectionnez
<style type="text/css">
    .div_index {
        width: 400px;
        height: 400px;
        border: 2px solid #696969;
        background-color: #93caff;
        position: relative;
    }

    .index1 {
        width: 150px;
        height: 150px;
        background-color: yellow;
        z-index: 1;
        top: 50px;
        left: 50px;
        position: absolute;
    }

    .index2 {
        width: 150px;
        height: 150px;
        background-color: red;
        z-index: 2;
        top: 80px;
        left: 80px;
        position: absolute;
    }

    .index3 {
        width: 150px;
        height: 150px;
        background-color: blue;
        z-index: 2;
        top: 120px;
        left: 120px;
        position: absolute;
    }
</style>
<div class="div_index">
    <div class="index1"></div>
    <div class="index2"></div>
    <div class="index3"></div>
</div>


Tutoriel WEB

Glossaire des propriétés CSS

Table des matières

  • VII. Propriétés de transformation et d'animation (CSS 3)
    • VII-A. Propriétés de transformation
      • VII-A-1. Origine de la transformation | transform-origin
      • VII-A-2. Perspective 3D | perspective
      • VII-A-3. Origine de la perspective | perspective-origin
      • VII-A-4. Fonctions de transformation | transform
        • Translation | translate()
        • Rotation | rotate()
        • Redimensionnement | scale()
        • Distorsion | skew()
        • Transformation matricielle | matrix()
      • VII-A-5. Face arrière | backface-visibility
      • VII-A-6. Héritage 3D | transform-style
      • VII-A-7. Exemple de transformation 3D
    • VII-B. Propriétés de transition
      • VII-B-1. Nom de propriété(s) | transition-property
      • VII-B-2. Durée de transition | transition-duration
      • VII-B-3. Effet de transition | transition-timing-function
      • VII-B-4. Délai de démarrage | transition-delay
      • VII-B-5. La transition tout-en-un | transition
      • VII-B-6. Exemple récapitulatif
    • VII-C. Propriétés d'animation
      • VII-C-1. Étapes de l'animation | @keyframes
      • VII-C-2. Nom de l'animation | animation-name
      • VII-C-3. Durée de l'animation | animation-duration
      • VII-C-4. Effet de l'animation | animation-timing-function
      • VII-C-5. Délai de l'animation | animation-delay
      • VII-C-6. Itérations de l'animation | animation-iteration-count
      • VII-C-7. Sens de l'animation | animation-direction
      • VII-C-8. État de l'animation | animation-play-state
      • VII-C-9. Style de l'élément hors animation | animation-fill-mode
      • VII-C-10. L'animation tout-en-un | animation
      • VII-C-11. Exemple récapitulatif

VII. Propriétés de transformation et d'animation (CSS 3)

Les propriétés présentées dans cette partie peuvent nécessiter l'utilisation des préfixes vendeurs.

VII-A. Propriétés de transformation

Les transformations permettent de modifier le rendu visuel d'un ou plusieurs éléments. Ces transformations peuvent se faire dans le plan de la page (transformations 2D) ou dans un espace 3D.
Les transformations 2D sont correctement supportées par les navigateurs récents, en revanche, les transformations 3D, apparues plus récemment, le sont un peu moins.
Complément d'information : Les transformations 2D en CSS3.

VII-A-1. Origine de la transformation | transform-origin

transform-origin : permet de définir quel sera le point d'origine de la transformation.

Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center | right ] && [ <pourcentage> | <longueur> | top | center | bottom]]

Compatibilité (base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+
Compatibilité (3D ; trois valeurs) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Notes :
Trois valeurs sont possibles correspondant au déplacement sur les axes X, Y et Z (valeurs par défaut 50% 50% 0). Si une seule valeur est passée, l'origine est uniquement déplacée sur l'axe X (à moins que cette valeur soit un mot-clé spécifique à l'axe Y :top ou bottom, dans ce cas, seul l'axe Y est impacté), les autres axes prennent leur valeur par défaut.
Si deux valeurs sont passées, elles correspondent aux axes X et Y, l'axe Z prend sa valeur par défaut.
Seules des longueurs sont acceptées pour l'axe Z. L'origine peut se trouver en dehors de l'élément transformé (voir les démos de rotate() et scale()).

Démo de mise en œuvre de cette propriétéRotation | rotate().

Exemples :

Sélectionnez
transform-origin: 25%;
transform-origin: top -50px;
transform-origin: 2em bottom 10px;

VII-A-2. Perspective 3D | perspective

perspective | transform: perspective() : permettent de déterminer le point de fuite des transformations 3D et d'appliquer des effets de perspective.

Syntaxe (perspective) : none | <longueur>
Syntaxe (transform) : perspective(none | <longueur>)

Il existe deux façons de déclarer une perspective (voir exemples). Soit avec la propriété perspective, soit sous forme de fonction de transformation liée à la propriété transform.

La première permet de définir une perspective pour un ensemble d'éléments à partir d'un élément parent commun, la seconde pour une perspective liée à un seul élément en la combinant avec d'autres fonctions de transformation.

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Explications.
La valeur de la perspective permet de déterminer la distance de l'utilisateur au plan z=0. Si elle vaut none, 0 ou une valeur non autorisée, aucune perspective n'est appliquée.
Les dimensions affichées de chaque élément vont dépendre de leur positionnement selon l'axe z, un élément dont la position sur l'axe z est positive sera vu plus grand et plus petit pour une position négative.
Un élément se trouvant sur un plan de coordonnée z supérieure ou égale à la valeur de la perspective sera considéré comme « derrière » l'utilisateur et ne sera pas affiché.

Sur Firefox, un élément situé sur l'axe z à la même valeur que la perspective n'est pas affiché, pour les valeurs supérieures, il est affiché retourné.

Exemples :

Sélectionnez
perspective: none;
perspective: 25px;
perspective: 2em;

Exemples :

Sélectionnez
transform: perspective(none);
transform: perspective(25px);
transform: perspective(2em);

Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).

Perspective : px - Translation Z : px |
Texte
Extrait du code de l'exemple
Sélectionnez
#element{ /* L'élément recevant la transformation */
    transform: perspective(xpx) translateZ(zpx); /* x : valeur du champ Perspective ; z : valeurs du champ Décalage Z */

}

VII-A-3. Origine de la perspective | perspective-origin

transform-origin : permet de définir quel sera le point d'origine de la perspective.

Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center | right ] && [ <pourcentage> | <longueur> | top | center | bottom]]

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Note : par défaut, l'origine de la perspective se trouve au centre de l'élément (50% 50%).

Exemples :

Sélectionnez
perspective-origin: 25%;
perspective-origin: top -50px;

Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).

Origine X : px - Origine Y : px |
Perspective : px |
Texte
Extrait du code de l'exemple
Sélectionnez
#outerElement{ /* Bordure pointillée */
    perspective: Zpx; /* Z : valeur de Perspective */
    perspective-origin: Xpx Ypx; /* X : valeur de Origine X ; Y : valeur de Origine Y */
}
#innerElement{ /* Cadre doré */
    transform: translateZ(50px);
}

VII-A-4. Fonctions de transformation | transform

transform : permet d'appliquer une fonction de transformation sur un élément.

Syntaxe : none | <transform-fonction>+

Compatibilité (fonctions de base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+
Compatibilité (fonctions 3D) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Complément d'information : Les transformations en CSS 3.

Il est possible de définir plusieurs transformations différentes sur un même élément, par exemple :

Sélectionnez
selecteur{
    transform: translate(100px, 50px) rotate(50deg);
}

Si la valeur de transform est différente de none, alors un nouveau contexte d'empilement est créé, ce qui influe sur le comportement de z-index.

Translation | translate()

translate() | translate3d() : permettent de déplacer l'élément sur les différents axes.

Syntaxe : translate(<longueur-x>[, <longueur-y>])
Syntaxe : translate3d(<longueur-x>, <longueur-y>, <longueur-z>)

Notes.
longueur-x, longueur-y et le cas échéant longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Pour translate(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer une translation sur un seul axe avec les dérivés translateX(), translateY() et translateZ().

Exemples :

Sélectionnez
-moz-transform: translate(100px, -50px);
-webkit-transform: translate(100px, -50px);
-ms-transform: translate(100px, -50px);
-o-transform: translate(100px, -50px);
transform: translate(100px, -50px);

Dans la démo suivante, entrez les valeurs numériques pour les décalages en X et Y dans les champs suivants et cliquez sur « Déplacer » (cliquez sur la boîte jaune pour annuler le déplacement).

X : Y :
Extrait du code de l'exemple
Sélectionnez
#element{ /* L'élément recevant la transformation */
    transform: translate(xpx, ypx); /* x : valeur du champ Décalage X ; y : valeurs du champ Décalage Y */
}
Rotation | rotate()

rotate() | rotate3d() : permettent de faire pivoter un élément suivant le point d'origineOrigine de la transformation | transform-origin.

Syntaxe : rotate(<angle>)
Syntaxe : rotate3d(<longueur-x>, <longueur-y>, <longueur-z>, <angle>)

Notes.
Pour rotate3d(), longueur-x, longueur-y et longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Il est possible d'effectuer une rotation sur un seul axe avec les dérivés rotateX(), rotateY() et rotateZ().

  • deg (degrés), un cercle complet mesure 360 degrés (360deg) ;
  • grad (grades), un cercle complet mesure 400 grades (400grad) ;
  • rad (radians), un cercle complet mesure 2π (≈6.2832rad) ;
  • turn (tour), un cercle complet mesure 1 tour (1turn).

Quatre unités d'angle sont autorisées :

Exemples :

Sélectionnez
-moz-transform: rotate(260deg);
-webkit-transform: rotate(300grad);
-ms-transform: rotate(1.2rad);
-o-transform: rotate(0.25turn);
transform: rotate(260deg);

Dans la démo suivante, entrez l'angle de rotation, l'unité, puis cliquez sur « Rotation » (si rien ne se passe, c'est que l'unité n'est pas reconnue, cliquez sur la boîte jaune pour annuler la rotation).

Origine : | Angle : | Unité :
Extrait du code de l'exemple
Sélectionnez
#element{ /* L'élément recevant la transformation */
    transform-origin: valeur; /* Valeur du champ Origine */
    transform: rotate(x<angle>); /* x : valeur du champ Angle ; <angle> : valeurs du champ Unité */
}
Redimensionnement | scale()

scale() | scale3d() : permettent de redimensionner un élément selon les différents axes.

Syntaxe : scale(<nombre-x>[, <nombre-y>])
Syntaxe : scale3d(<nombre-x>, <nombre-y>, <nombre-z>)

Notes.
nombre-x, nombre-y et le cas échéant nombre-z correspondent aux facteurs de redimensionnement, les valeurs négatives sont autorisées, dans ce cas, l'élément semblera retourné. Les valeurs supérieures à 1 agrandiront l'élément, les valeurs inférieures le rétréciront.
Pour scale(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer un redimensionnement sur un seul axe avec les dérivés scaleX(), scaleY() et scaleZ().

Exemples :

Sélectionnez
-moz-transform: scale(1.5);
-webkit-transform: scale(0.5, 0.8);
-ms-transform: scale(1.5, 0.5);
-o-transform: scale(1);
transform: scale(2,1.5);

Dans la démo suivante, entrez les coefficients, puis cliquez sur « Redimensionner » (cliquez sur la boîte jaune pour annuler la rotation).

Origine : | X : | Y :
Texte
Extrait du code de l'exemple
Sélectionnez
#element{ /* L'élément recevant la transformation */
    transform-origin: valeur; /* Valeur du champ Origine */
    transform: scale(x, y); /* x : valeur du champ Axe X ; y : valeurs du champ Axe Y */
}
Distorsion | skew()

skew() | skewX() | skewY() : permettent la distorsion des éléments.

Syntaxe : skew(<angle-x>[, <angle-y>])
Syntaxe : skewX(<angle-x>) | skewY(<angle-y>)

Notes.
angle-x et angle-y sont des angles qui déterminent l'angle de la distorsion à appliquer sur chaque axe, les valeurs négatives sont autorisées.
Pour skew(), une seule valeur est autorisée, dans ce cas, l'angle sur l'axe y vaut 0.
Le comportement de skew() avec deux valeurs n'est pas le même que si l'on applique successivement skewX() et skewY() avec des valeurs identiques.

Exemples :

Sélectionnez
-moz-transform: skew(260deg);
-webkit-transform: skew(-300grad, 45deg);
-ms-transform: skewX(1.2rad);
-o-transform: skewY(0.25turn);
transform: skew(260deg);

Dans la démo suivante, entrez les angles, puis cliquez sur « Déformer » (cliquez sur la boîte jaune pour annuler la déformation).

Attention : certaines valeurs d'angles proches provoquent une déformation aux dimensions excessives de l'élément, d'autres le rendent invisible.

Angle : deg | Axe :
Extrait du code de l'exemple
Sélectionnez
#element{ /* L'élément recevant la transformation */
    transform: skew(adeg, adeg); /* Si skew() sélectionné ; a : valeur du champ Angle */
    transform: skewX(adeg); /* Si skewX() sélectionné ; a : valeur du champ Angle */
    transform: skewY(adeg); /* Si skewY() sélectionné ; a : valeur du champ Angle */
}
Transformation matricielle | matrix()

matrix() | matrix3d() : permettent de transformer un élément selon une matrice de transformation.

Syntaxe : matrix(<nombre-a>, <nombre-b>, <nombre-c>, <nombre-d>, <longueur-x>, <longueur-y>)
Syntaxe : matrix3d(<matrice-4x4>)

Notes.
En réalité, toutes les fonctions de transformation utilisent matrix() (ou matrix3d()), les autres fonctions ne sont que des formes simplifiées.
Le fonctionnement de matrix() et matrix3d() ainsi que le détail des paramètres impliquent des notions complexes (notamment mathématiques) qui vont au-delà du cadre de ce glossaire, ces points ne seront donc pas détaillés.
Pour les versions préfixées de Firefox (-moz-transform), les longueurs doivent contenir l'unité.

Article détaillé sur les matrices de transformation : The CSS3 matrix() Transform for the Mathematically Challenged.

Exemples :

Sélectionnez
-moz-transform: matrix(1, 0, 0.6, 1, 250px, 25px);
-webkit-transform: matrix(1, 0, 0.6, 1,  250, 25);
-o-transform: matrix(1, 0, 0.6, 1,  250, 25);
-ms-transform: matrix(1, 0, 0.6, 1,  250, 25);
transform: matrix(1, 0, 0.6, 1,  250, 25);
Matrice de transformation

VII-A-5. Face arrière | backface-visibility

backface-visibility : permet d'indiquer la visibilité de la face arrière d'un élément.

Syntaxe : visible | hidden

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Version CSS : 3

Notes.
La face arrière d'un élément est toujours transparente, la visibilité indique donc si l'on peut voir la face avant en miroir (visible) ou non (hidden).
Bien qu'il soit possible d'utiliser cette propriété pour des transformations 2D, elle est surtout utile pour les transformations 3D, permettant ainsi de visualiser ou non les éléments superposés.

Démo.

|
Texte
Extrait du code HTML de l'exemple
Sélectionnez
<div id="conteneur">
    <div id="element">Texte</div>
    <div id="under"></div>
</div>
Extrait du code CSS de l'exemple
Sélectionnez
#conteneur{ /* Le conteneur (bordure pointillée)
    transform-style: preserve-3d; /* Permet l'empilement sur l'axe z des éléments */
}
#element{ /* L'élément recevant la transformation (fond doré) */
    backface-visibility: visible|hidden; /* Case Fond arrière visible cochée|décochée */
    transform: rotateY(180deg|0); /* Case Élément retourné cochée|décochée */
}
#under{ /* L'élément en dessous (fond image developpez.com) */
    transform: translateZ(-10px); /* Permet de déplacer en arrière sur l'axe z */
}

VII-A-6. Héritage 3D | transform-style

transform-style : permet d'indiquer si les éléments enfants héritent de l'espace 3D de leur parent ou en créent un nouveau à partir de celui-ci.

Syntaxe : flat | preserve-3d

Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+

Internet Explorer (y compris la version 11) ne reconnait que la valeur flat pour cette propriété.

Version CSS : 3

Explications.
Lorsque l'on crée un espace 3D, deux types de comportement peuvent être souhaités : soit chaque élément est indépendant des autres et peut être déplacé individuellement, soit certains éléments peuvent contenir des éléments enfants dépendants de celui-ci.
Par exemple, si l'on veut créer un dé, on créera six éléments (les faces) qui appartiendront à l'espace 3D puis on intégrera à chaque face un nombre d'images constituant les points du dé, ces images devront donc être liées à la face associée sans être intégrées à l'espace 3D.
La valeur flat indique que les éléments enfants appartiennent au plan de leur parent, la valeur preserve-3d qu'ils appartiennent à l'espace 3D.

Démo.
Dans cet exemple, l'image est enfant du cadre doré. On applique au cadre une rotation de 45° (rotateY(45deg)) et à l'image une translation de 50px (translateZ(50px)).
Si preserve-3d est cochée, l'image appartient à l'espace 3D et la transformation s'applique, si flat est cochée, l'image appartient au cadre et la translation ne s'applique plus (sauf si l'on définit une valeur de perspective pour le cadre).

|
Extrait du code de l'exemple
Sélectionnez
#conteneur{ /* Le conteneur (bordure pointillée)
    perspective: 200px;
}
#element{ /* L'élément recevant la transformation (fond doré) */
    transform-style: preserve-3d|flat; /* Case preserve-3d|flat cochée */
    transform: rotateY(45deg);
}
#image{ /* L'élément image interne (image developpez.com) */
    transform: translateZ(50px); /* Permet de déplacer en arrière sur l'axe z */
}

VII-A-7. Exemple de transformation 3D

6
5
4
3
2
1
Voir le code de l'exemple
Cacher Sélectionnez
<style>
#cube{
    position: relative;
    margin: 20px auto 100px;
    width: 100px;
    height: 100px;
    -webkit-perspective: 300px;
    -ms-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin: -50% -50%;
    -ms-perspective-origin: -50% -50%;
    perspective-origin: -50% -50%;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
 }
.face{
    position: absolute;
    width: 100px;
    height: 100px;
    font-size: 75px;
    line-height: 100px;
    text-align: center;
}
#face1{
    -webkit-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
    transform: translateZ(100px);
    background-color: rgba(200,0,0,0.6);
}
#face2{
    -webkit-transform-origin: left 50%;
    -webkit-transform: rotateY(270deg);
    -ms-transform-origin: left 50%;
    -ms-transform: rotateY(270deg);
    transform-origin: left 50%;
    transform: rotateY(270deg);
    background-color: rgba(0,200,0,0.6);
}
#face3{
    -webkit-transform-origin: 50% top;
    -webkit-transform: rotateX(90deg);
    -ms-transform-origin: 50% top;
    -ms-transform: rotateX(90deg);
    transform-origin: 50% top;
    transform: rotateX(90deg);
    background-color: rgba(0,0,200,0.6);
}
#face4{
    -webkit-transform-origin: 50% bottom;
    -webkit-transform: rotateX(90deg) translateY(100px);
    -ms-transform-origin: 50% bottom;
    -ms-transform: rotateX(90deg) translateY(100px);
    transform-origin: 50% bottom;
    transform: rotateX(90deg) translateY(100px);
    background-color: rgba(200,200,0,0.6);
}
#face5{
    -webkit-transform-origin: right 50%;
    -webkit-transform: rotateY(90deg);
    -ms-transform-origin: right 50%;
    -ms-transform: rotateY(90deg);
    transform-origin: right 50%;
    transform: rotateY(90deg);
    background-color: rgba(200,0,200,0.6);
}
#face6{
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    background-color: rgba(0,200,200,0.6);
}
</style>
<div id="cube">
    <div class="face" id="face6">6</div>
    <div class="face" id="face5">5</div>
    <div class="face" id="face4">4</div>
    <div class="face" id="face3">3</div>
    <div class="face" id="face2">2</div>
    <div class="face" id="face1">1</div>
</div>

Dans le code HTML, l'ordre des faces est inversé pour éviter que les navigateurs ne prenant pas en compte la valeur preserve-3d n'affichent les faces cachées au-dessus des faces visibles.

VII-B. Propriétés de transition

Il est de plus en plus fréquent qu'une page Web modifie l'apparence de certains éléments en fonction des interactions avec l'utilisateur, que ce soit en CSS (avec notamment la pseudoclasse :hover) ou en JavaScript.
Les transitions CSS permettent de fluidifier ces changements d'aspect visuel en animant les propriétés CSS impliquées d'un état à un autre.
Complément d'information : Les transitions en CSS3.

S'il est possible d'animer un grand nombre de propriétés CSS, certaines ne le permettent toutefois pas. Voir une liste des propriétés qui peuvent être animées.

Les principaux navigateurs ont intégré la version non préfixée des propriétés liées aux transitions depuis plusieurs versions. Quant à IE, si l'implémentation est récente (IE 10+), il n'y a pas eu de version préfixée de ces propriétés.

Il ne semble donc pas utile d'utiliser les versions préfixées si ce n'est pour les utilisateurs ne mettant pas à jour leur navigateur (ce qui est rare, car ceux-ci ont un système de mise à jour automatique activé par défaut).

VII-B-1. Nom de propriété(s) | transition-property

transition-property : permet de définir quelle(s) propriété(s) sera (seront) animée(s).

Syntaxe : none | all | <propriete>[, <propriete>]*

Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+

Version CSS : 3

Exemples :

Sélectionnez
transition-property: none;
transition-property: all;
transition-property: width, color, transform, -webkit-transform, -ms-transform, -o-transform;

VII-B-2. Durée de transition | transition-duration

transition-duration : permet de définir la durée de la transition.

Syntaxe : inherit | <duree>[, <duree>]*

Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.

Exemples :

Sélectionnez
transition-duration: 2s;
transition-duration: 250ms;
transition-duration: 2s, 250ms, 120ms;
transition-duration: inherit;

VII-B-3. Effet de transition | transition-timing-function

transition-timing-function : permet d'assouplir l'effet de transition selon une fonction dite d'easing.

Syntaxe : <effet>[, <effet>]*

Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(x1, y1, x2, y2), steps(nb_pas, start|end).

Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+

Version CSS : 3

Complément d'information : Easing Functions - Guide de référence.

Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre 0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers, start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.

Exemples :

Sélectionnez
transition-timing-function: linear;
transition-timing-function: step(4, end);
transition-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
transition-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);

VII-B-4. Délai de démarrage | transition-delay

transition-delay : permet d'indiquer un délai avant de démarrer une transition.

Syntaxe : initial | <duree>[, <duree>]*

Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Il est possible d'indiquer une valeur négative, dans ce cas, la transition débutera aussitôt, mais au point où elle aurait dû être si elle avait commencé au moment indiqué par le délai négatif.

Exemples :

Sélectionnez
transition-delay: 2s;
transition-delay: -250ms;
transition-delay: 2s, 250ms, 120ms;
transition-delay: initial;

VII-B-5. La transition tout-en-un | transition

transition : regroupe toutes les propriétés de transition.

Syntaxe : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+

Version CSS : 3

Note : il est possible d'indiquer plusieurs transitions séparées par des virgules.

Exemples :

Sélectionnez
transition: all 2s;
transition: width 250ms, height 100ms 250ms;
transition: all 2s steps(5, end) 250ms, 120ms;

VII-B-6. Exemple récapitulatif

L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités de transition.

Dans cet exemple, on affiche le dos doré d'une carte. Au survol du cadre pointillé, la carte se retourne et se déplace sur la droite en laissant apparaitre la figure.
Vous pouvez constater dans le code HTML qu'il s'agit en fait de deux éléments distincts animés de façon synchronisée : il n'est pas possible (du moins pas encore) de donner des styles à la face arrière d'un élément.
Une fois la carte retournée, un troisième élément, initialement transparent (opacity: 0) apparait pour afficher un message (voir le code de l'exemple).

Les navigateurs ne reconnaissant pas les transformations 3D ne verront pas le dos doré ni l'effet de retournement, mais juste un glissement de la carte vers la droite. Les autres animations seront visibles.

Voici ma carte !
Voir le code de l'exemple
Cacher Sélectionnez
<style>
#transition{
    position: relative;
    margin: 20px auto;
    width: 336px;
    height: 250px;
    border: 1px dotted;
    -webkit-perspective-origin: 50% 50% 84px;
    -webkit-perspective: 500px;
    -ms-perspective-origin: 50% 50% 84px;
    -ms-perspective: 500px;
    perspective-origin: 50% 50% 84px;
    perspective: 500px;
}
#transition div{
    transition: all 1s;
    position: absolute;
    width: 168px;
    height: 250px;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
#transition .dos{
    border-radius: 20px;
    background-color: gold;
    left: 0;
}
#transition .carte{
    background-image: url(carte.png);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    left: 0;
 }
#transition .delayed{
    transition: all 1s;
    border-radius: 0;
    background-color: #F5F2F0;
    line-height: 250px;
    text-align: center;
    font-weight: bold;
    opacity: 0;
    overflow: hidden;
}
#transition:hover .dos{
    transition: all 1s;
    left: 168px;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#transition:hover .carte{
    transition: all 1s;
    left: 168px;
    -webkit-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
#transition:hover .delayed{
    transition: opacity 1s 1s, border-radius 500ms 2s, box-shadow 500ms cubic-bezier(0.75, 0.25, 0.75, 0.5) 1.5s, text-shadow 500ms linear 2s, color 500ms linear 2s;
    opacity: 1;
    border-radius: 50%;
    box-shadow: inset 0 0 5px 2px black;
    text-shadow: 1px 1px 2px black, 0 0 1em gold, 0 0 0.2em gold;
    color: white;
}
</style>
<div id="transition">
    <div class="delayed">Voici ma carte !</div>
    <div class="dos"></div>
    <div class="carte"></div>
</div>

VII-C. Propriétés d'animation

Les animations CSS permettent de modifier certaines propriétés CSS d'un ou plusieurs éléments dans le temps. Elles se composent de deux éléments : une description de l'animation sous forme d'expression CSS (at-rule) et des propriétés applicables à un (ou plusieurs) élément sur lequel doit s'effectuer l'animation.
Si les propriétés sont appliquées à des sélecteurs (donc à des éléments), la description est, elle, indépendante dans le code CSS.

Il existe plusieurs différences notables entre une transition et une animation CSS.

Une transition est déclenchée lorsqu'une propriété CSS est modifiée alors qu'une animation va modifier elle-même une propriété selon des règles déterminées.

En dehors des fonctionEffet de transition | transition-timing-functione transition, une transition n'est pas paramétrable alors qu'une animation permet de définir des étapes-clés.

Une transition nécessite une action (soit de la part de l'utilisateur, soit avec un script JavaScript) pour être déclenchée, ce qui n'est pas forcément le cas d'une animation.

Une transition ne s'exécute qu'une fois par changement d'état alors qu'une animation peut être répétée.

VII-C-1. Étapes de l'animation | @keyframes

@keyframes : indique les différentes étapes de l'animation et la valeur de chaque propriété pour cette étape.

Syntaxe :

Sélectionnez
@keyframes <identifiant>{
    [[ from | to | <pourcentage> ] [, from | to | <pourcentage> ]* bloc ]*
}

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.

La syntaxe de l'expression CSS @keyframes est un peu particulière.
On commence avec le mot-clé @keyframes (éventuellement préfixé, voir les exemples) suivi du nom souhaité pour l'animation (<identifiant>), il servira à appeler cette animation pour un sélecteur. On ouvre ensuite un bloc (à l'aide d'accolades {}) pour définir les différentes étapes de l'animation.
Chaque étape débute par une valeur (from, to ou pourcentage) suivie d'un nouveau bloc.
Ces blocs contiendront les différentes propriétés à animer et leur valeur à cette étape de l'animation.
Les déclarations @keyframes ne sont pas liées à un sélecteur et se trouvent donc en dehors des déclarations de styles liées à ceux-ci.

Notes.

Pour être valide, l'animation doit au moins comprendre les étapes from (ou 0%, la valeur 0 n'est pas valide) et to ( ou 100%), si l'une (ou les deux) manque, le navigateur devra la créer en utilisant les valeurs calculées des propriétés devant être animées.
Les propriétés non animables ou les étapes hors de la plage [0% 100%] sont ignorées.
Si une propriété n'est pas déclarée à une étape (ou si sa déclaration n'est pas valide), l'animation pour cette propriété se fera comme si cette étape n'existait pas.
Si une animation est déclarée plusieurs fois, seule la dernière déclaration est prise en compte, il n'y a pas de notion de cascade pour @keyframes.
Si une étape est déclarée plusieurs fois, seule la dernière déclaration est utilisée, cependant, certains navigateurs ont mis en place un système de cascade non prévu par la spécification.
Il n'y a pas d'obligation à déclarer les étapes dans l'ordre chronologique.
Il est possible de grouper plusieurs étapes dont les valeurs seraient identiques en les séparant par des virgules.

Exemples :

Sélectionnez
@keyframes clignote{
    from, 100%{
        color: red;
    }
    50%{
        color: blue;
    }
}
@-moz-keyframes bouge{
    from{
        left: 0%;
    }
    75%{
        left: 90%;
    }
    50%{
        left: 80%;
    }
    to{
        left: 100%;
    }
}
@-webkit-keyframes bordure{
    50%{
        border-width: 10px;
    }
}
@keyframes erreur{
    from{
        border-radius: 0;
    }
    100%{
        border-radius: 25px;
    }
    to{
        /* Cette déclaration vide est supposée écraser la précédente
        qui correspond à la même étape : aucune animation ne sera visible.
        Firefox contourne la spécification et
        utilise la cascade, rendant l'animation visible. */
    }
}

VII-C-2. Nom de l'animation | animation-name

animation-name : indique le nom de l'animation à utiliser.

Syntaxe : none | <nom>#

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Note : un nom valide doit commencer par une lettre ou un tiret (mais pas deux) suivi d'une lettre puis les caractères de la classe [-_0-9a-zA-Z].

Exemples :

Sélectionnez
animation-name: foo;
animation-name: foo1_bar;
animation-name: -Foo-Bar2;
animation-name: foo, bar;

VII-C-3. Durée de l'animation | animation-duration

animation-duration : permet de définir la durée de l'animation.

Syntaxe : <duree>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans animation-name.

Exemples :

Sélectionnez
animation-duration: 2s;
animation-duration: 250ms;
animation-duration: 2s, 250ms, 120ms;

VII-C-4. Effet de l'animation | animation-timing-function

animation-timing-function : permet d'assouplir l'animation selon une fonction dite d'easing.

Syntaxe : <effet>[, <effet>]*

Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(x1, y1, x2, y2), steps(nb_pas, start|end).

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Complément d'information : Easing Functions - Guide de référence.

Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre 0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers, start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes animations listées dans animation-name dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.

La fonction définie s'applique à chaque intervalle de l'animation et non à l'ensemble de l'animation.

Toutefois, il est possible d'indiquer une valeur de animation-timing-function dans un intervalle de @keyframes, dans ce cas, c'est cette fonction qui sera utilisée pour cet intervalle.

Exemples :

Sélectionnez
animation-timing-function: linear;
animation-timing-function: step(4, end);
animation-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
animation-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);
@keyframes{
    ...
    50%{
        ...
        animation-timing-function: linear;
    }
    ...
}

VII-C-5. Délai de l'animation | animation-delay

animation-delay : permet d'indiquer un délai avant de démarrer une animation.

Syntaxe : initial | <duree>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Il est possible d'indiquer une valeur négative, dans ce cas, l'animation débutera aussitôt, mais au point où elle aurait dû être si elle avait commencé au moment indiqué par le délai négatif.

Exemples :

Sélectionnez
animation-delay: 2s;
animation-delay: -250ms;
animation-delay: 2s, 250ms, 120ms;
animation-delay: initial;

VII-C-6. Itérations de l'animation | animation-iteration-count

animation-iteration-count : détermine le nombre de répétitions de l'animation.

Syntaxe : infinite | <nombre>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Notes.
La valeur infinite indique que l'animation sera répétée indéfiniment.
Les valeurs négatives ne sont pas valides.
Il est possible d'indiquer un nombre non entier. Dans ce cas, la dernière répétition sera incomplète en proportion de la partie décimale (par exemple, la valeur 0.5 montrera la moitié de l'animation.

Exemples :

Sélectionnez
animation-iteration-count: infinite;
animation-iteration-count: 5;
animation-iteration-count: 2.5;

VII-C-7. Sens de l'animation | animation-direction

animation-direction : permet de définir le sens de l'animation suivant les répétitions.

Syntaxe : normal | reverse | alternate | alternate-reverse

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.
normal : l'animation sera jouée selon le sens prévu. reverse : l'animation sera jouée à l'envers (à partir de la fin). alternate : l'animation se fera de façon alternée à chaque itération. alternate-reverse : l'animation se fera de façon alternée à chaque itération, mais en commençant à l'envers.

Exemples :

Sélectionnez
animation-direction: alternate;
animation-direction: alternate, alternate-reverse;

VII-C-8. État de l'animation | animation-play-state

animation-play-state : détermine si l'animation est en pause ou non.

Syntaxe : running | paused

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.
Cette propriété permet de savoir ou d'indiquer si une animation est en cours d'exécution (running) ou en pause (paused).
Il est possible d'interroger cet état (par exemple en JavaScript : AnimatedElement.animationPlayState) pour connaitre son état actuel.
Lorsqu'une animation en pause redémarre, elle le fait au point où elle s'était arrêtée.

Exemples :

Sélectionnez
animation-play-state: running;
animation-play-state: paused;

VII-C-9. Style de l'élément hors animation | animation-fill-mode

animation-fill-mode : indique quelles propriétés CSS sont applicables avant et après l'animation.

Syntaxe : none | backwards | forwards | both

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Explications.
Par défaut, une animation ne modifie pas les propriétés de l'élément auquel elle s'applique entre le moment où elle est définie et le moment où elle démarre (donc pendant la période de animation-delay), ni après son exécution.
Il est possible de modifier ce comportement avec la propriété animation-fill-mode.
Si la valeur backwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du premier pas de l'animation durant la période animation-delay. Ce premier pas est déterminé en fonction de la propriété animation-direction : si l'animation commence à l'endroit (valeurs normal ou alternate), il s'agit des valeurs CSS de from (ou 0%), si l'animation commence à l'envers (valeurs reverse ou alternate-reverse), il s'agit des valeurs CSS de to (ou 100%).
Si la valeur forwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du dernier pas de l'animation après l'exécution de celle-ci selon les mêmes règles concernant animation-direction.
Si la valeur both est indiquée, les règles concernant backwards et forwards seront appliquées avant et après l'animation.

Exemple :

Sélectionnez
animation-play-state: both;

VII-C-10. L'animation tout-en-un | animation

animation : regroupe toutes les propriétés d'animation.

Syntaxe : <animation-name>
|| <animation-duration> || <animation-timing-function>
|| <animation-delay> || <animation-iteration-count>
|| <animation-direction> || <animation-fill-mode>
|| <animation-play-state>

Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+

Version CSS : 3

Note : en dehors du nom, toutes les valeurs sont optionnelles et l'ordre n'importe pas sauf pour les durées : la première durée sera toujours interprétée comme animation-duration et la seconde comme animation-delay.

Exemple :

Sélectionnez
animation: aller_retour 2s ease-in-out infinite alternate;

VII-C-11. Exemple récapitulatif

L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités d'animation.

Pour activer l'animation, il faut survoler le cadre pointillé (activation de la propriété animation-play-state). Une fois l'animation lancée (et tant que la souris survole le cadre pointillé), un carré se déplace de gauche à droite puis de droite à gauche en effectuant une rotation et en diminuant son opacité.
Au milieu de l'animation (50%), on modifie la fonction d'easing (step-start) pour les propriété concernées par cette étape (opacity et transform) et leur modification se fera en une seule fois au début de cet intervalle (non visible pour transform).
Vous pouvez modifier avec les listes déroulantes les valeurs de animation-duration et animation-direction.

Tous les navigateurs ne permettent pas la modification individuelle des propriétés de l'animation, les listes déroulantes seront sans effet avec ces navigateurs.

L'exemple est susceptible de boguer avec Internet Explorer qui implémente encore mal l'utilisation de animation-timing-function dans @keyframes.

L'utilisation de la propriété -webkit-transform dans la version non préfixée de @keyframes pourra sembler inutile. Elle est due au fait que Chrome reconnait @keyframes (mais étonnamment pas encore animation-*) alors qu'Opera, qui utilise le moteur webkit depuis la version 15, demande la version préfixée @-webkit-keyframes.

Survoler ce cadre pour démarrer l'animation
Voir le code de l'exemple initial
Cacher Sélectionnez
<style>
#animation-controles{
    position: relative;
    margin: 20px auto;
    text-align: center;
    width: 90%;
    max-width: 600px;
}
#animation{
    position: relative;
    margin: 20px auto;
    text-align: center;
    width: 90%;
    max-width: 600px;
    height: 70px;
    line-height: 70px;
    border: 1px dotted;
    overflow: hidden;
}
#animated{
    width: 50px;
    height: 50px;
    background-color: #FF0000;
    position: absolute;
    top: 10px;
    -webkit-animation: aller_retour 2s ease-in-out infinite alternate;
    animation: aller_retour 2s ease-in-out infinite alternate;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
#animation:hover #animated{
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes aller_retour{
    from{
        margin-left: -50px;
    }
    50%{
        opacity: 0.2;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: step-start;
    }
    to{
        margin-left: 100%;
    }
}
@keyframes aller_retour{
    from{
        margin-left: -50px;
    }
    50%{
        opacity: 0.2;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        animation-timing-function: step-start;
    }
    to{
        margin-left: 100%;
    }
}
</style>
<div id="animation">Survoler ce cadre pour démarrer l'animation
    <div id="animated"></div>
</div>


Tutoriel CSS3

Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?

Table des matières

  • Qu'est-ce que c'est ?
  • Les modules
  • Le développement
  • Comment le CSS3 m'affecte-t-il?
  • Remerciements
  • Articles de cette série

Cet article marque le début d'une série qui fournit une introduction au nouveau standard CSS3, qui est conçu pour remplacer le CSS2. Nous commencerons par le tout début, comme si vous n'aviez jamais entendu parler du CSS3, pour vous amener à vous sentir prêt à le mettre en œuvre.

Cet article a été publié à l'origine, le 6 Mai 2008, en version anglaise et est visible à l'adresse suivante : Introduction to CSS3 - Part 1: What is it ?

Qu'est-ce que c'est ?

Le CSS3 offre une immense variété de nouvelles façons de modifier le design de vos sites web, sans pour autant impliquer de grandes modifications. Ce premier tutoriel vous donnera une introduction très basique aux nouvelles possibilités créées par le standard.

Les modules

Le développement de CSS3 va être divisé en 'modules'. La vieille spécification était simplement trop longue et complexe pour être mise à jour d'un seul tenant, alors elle a été séparée en morceaux plus petits - avec quelques nouveaux ajouts. Certains de ces modules incluent :

  • Le modèle de boîtes ;
  • Le module de listes ;
  • La présentation des hyperliens ;
  • Le module vocal ;
  • Les arrières plan et les Bords ;
  • Les effets de texte ;
  • La mise en page multi-colonnes.

Voir la liste complète des modules"

Le développement

Beaucoup de nouveaux modules sont maintenant terminés, dont le SVG (Scalable Vector Graphics : pour le dessin vectoriel), Media Queries (recherche dans les médias) et les Namespaces (espaces de nommage). Les autres sont toujours en écriture.

Il est difficile de donner une date à partir de laquelle les navigateurs web adopteront les nouvelles fonctionnalités du CSS3 - quelques nouvelles versions de Safari ont déjà commencé à le faire.

Les nouvelles fonctionnalités seront implémentées progressivement dans les différents navigateurs et il peut se passer un à deux ans avant que tous les modules soient entièrement adoptés.

Comment le CSS3 m'affecte-t-il?

Heureusement, d'une façon globalement positive, le CSS3 bénéficiera d'une rétro-compatibilité complète, si bien qu'il ne sera pas nécessaire de changer les designs existants pour s'assurer qu'ils marchent - les navigateurs web continueront toujours à supporter le CSS2.

Le principal impact sera la possibilité d'utiliser les nouveaux sélecteurs et propriétés qui sont disponibles. Ceux-ci vous permettront à la fois d'utiliser les nouvelles fonctions de design (animations ou dégradés par exemple), et d'utiliser les fonctions actuelles de design de manière bien plus aisée (par exemple en utilisant les colonnes).

Les futurs articles de cette série se focaliseront chacun sur un module différent de la spécification CSS3, et les nouvelles fonctionnalités qu'ils apporteront. Le prochain parle des bordures CSS3.

Remerciements

Tous mes remerciements à romaintaz pour sa relecture.

Articles de cette série

  • Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?
  • Introduction au CSS3 - Partie 2 : Les bordures
  • Introduction au CSS3 - Partie 3 : Les effets de texte
  • Introduction au CSS3 - Partie 4: L'interface utilisateur
  • Introduction au CSS3 - Partie 5: Les multiples colonnes
  • Introduction au CSS3 - Partie 6 : Les arrière-plans


Tutoriel CSS3

Introduction au CSS3 - Partie 2 : Les bordures

Table des matières

  • Introduction
  • Les bordures arrondies
  • Les dégradés
  • Les boîtes à ombre portée
  • Les bordures en images
  • En conclusion
  • Remerciements
  • Articles de cette série

Pour la deuxième partie de cette série d'articles sur le CSS3, nous allons nous pencher sur les bordures. Toute personne ayant utilisé le CSS connait les propriétés de bordure. C'est un excellent moyen de structurer le contenu, créer des effets autour des images et d'améliorer la mise en page.

Cet article a été publié à l'origine, le 7 Mai 2008, en version anglaise et est visible à l'adresse suivante : Introduction to CSS3 - Part 2: Borders

Introduction

Les bordures, avec le CSS3, atteignent un niveau supérieur offrant la possibilité d'utiliser des dégradés, des coins arrondis, des ombres et des bordures d'images. Nous allons chercher à en apprendre plus sur le sujet en utilisant des exemples dans la mesure du possible.

Tous les exemples montrés ci-dessous peuvent être vus sur notre page d'exemples. Cependant, beaucoup d'entre eux ne sont pas compatibles avec les dernières versions de certains navigateurs.

Voir la page d'exemples

Les bordures arrondies

Réaliser des bordures arrondies en utilisant l'actuel CSS n'est pas chose facile. Toutefois, il existe de nombreuses méthodes disponibles, mais aucune n'est vraiment simple. De plus, la création d'images pour chaque bordure est souvent nécessaire. En utilisant le CSS3, la création d'une bordure arrondie devient incroyablement facile. Elle peut être appliquée à tous les coins ou individuellement et sa largeur/couleur est facilement modifiable. Le code CSS est :

Sélectionnez

.border_rounded
{
    background-color: #ddccb5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid #897048;
    padding: 10px;
    width: 310px;
}
Image non disponible
Exemple de bordures arrondies avec le CSS3

Les dégradés

Les bordures dégradées peuvent s'avérer efficaces si elles sont correctement utilisées. Ce code est un peu plus complexe, vous obligeant à définir chaque couleur du dégradé. Le code CSS est:

Sélectionnez

.border_gradient
{
    border: 8px solid #000;
    -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    padding: 5px 5px 5px 15px;
    width: 300px;
}
Image non disponible
Exemple de bordures dégradées avec le CSS3

Les boîtes à ombre portée

A l'heure actuelle, il est difficile d'ajouter une ombre à un élément. C'est un bon moyen pour mettre une certaine zone en évidence, mais comme n'importe quel effet il doit être utilisé avec parcimonie. Le code CSS est :

Sélectionnez

.border_shadow
{
    -webkit-box-shadow: 10px 10px 5px #888;
    padding: 5px 5px 5px 15px;
    width: 300px;
}
Image non disponible
Exemple de boîtes avec effet d'ombre avec le CSS3

Les bordures en images

La bordure en images est un des ajouts les plus utiles. Je suis vraiment impatient de découvrir comment les gens choisiront de les utiliser. Le CSS a la capacité de répéter, ou étirer une bordure d'image de votre choix. Le code CSS est similaire à ce qui suit (il varie selon les différents navigateurs) :

Sélectionnez

.border_image
{
    -webkit-border-image: url(border.png) 27 27 27 27 round round;
}
Image non disponible
Exemple de bordures avec image avec le CSS3

En conclusion

Les bordures sont révolutionnées ! Ces ajouts dans le CSS3 ont été faits pour vous faire gagner énormément de temps en tant que designer. C'est un grand pas vers la simplification des mises en pages et ils vous permettront de créer des boites attrayantes sans même utiliser Photoshop.

Le prochain article de cette série parlera d'un nouveau domaine dans le CSS3 : les effets de texte.

Remerciements

Tous mes remerciements à RideKick pour sa relecture.

Articles de cette série

  • Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?
  • Introduction au CSS3 - Partie 2 : Les bordures
  • Introduction au CSS3 - Partie 3 : Les effets de texte
  • Introduction au CSS3 - Partie 4: L'interface utilisateur
  • Introduction au CSS3 - Partie 5: Les multiples colonnes
  • Introduction au CSS3 - Partie 6 : Les arrière-plans


Tutoriel CSS3

Introduction au CSS3 - Partie 3 : Les effets de texte

Table des matières

  • Introduction
  • L'ombre portée du texte (Text Shadow)
  • Le retour à la ligne
  • Les polices du web (Web Fonts)
  • En conclusion
  • Remerciements
  • Articles de cette série

La troisième partie de cette série d'articles sur le CSS3 traitera des nouveaux effets de texte. La typographie, est sans aucun doute, l'un des plus importants aspects pour obtenir une bonne mise en page lors de sa conception. La typographie peut, grâce à la page, attirer le lecteur, donner une certaine impression, offrir un impact, être subtile, ou aider à la séparation du contenu.

Cet article a été publié à l'origine, le 9 Mai 2008, en version anglaise et est visible à l'adresse suivante : Introduction to CSS3 - Part 3: Text Effects

Introduction

Le CSS est déjà assez souple dans la manière dont le texte peut être affiché, mais peut toujours restreindre la conception dans quelques domaines. Le CSS3 va, dans certains cas, éliminer ces limitations.

Tous les exemples ci-dessous peuvent être vu sur notre page d'exemples. Cependant, beaucoup d'entre eux ne sont pas compatibles avec les dernières versions des différents navigateurs.

Voir la page d'exemples

L'ombre portée du texte (Text Shadow)

Les ombres portées donnent un petit effet verni, mais tout dépend de la manière dont elles sont utilisées. Lorsque je l'ai expérimenté pour cet article, j'ai trouvé quelques combinaisons qui paraissent affreuses, et quelques unes donnant un effet attrayant et subtil. Les ombres pourraient certainement être mises à profit dans les entêtes et les titres. Plusieurs bons exemples de leur utilisation sont disponibles sur le blog de Mathias Kretschamann.

Sélectionnez

.text_shadow
{
    color: #897048;
    background-color: #fff;
    text-shadow: 2px 2px 2px #ddccb5;
    font-size: 15px;
}
Image non disponible

Le retour à la ligne

À l'heure actuelle, si un mot est trop long pour tenir sur une ligne d'un bloc, il va déborder. Ce n'est pas très fréquent, mais cela se produit de temps en temps. Les nouvelles possibilités de retour à la ligne vous permettent de forcer le texte sur une nouvelle ligne et ce même si cela veut dire qu'il faille couper un mot. Le code est extrêmement simple :

Sélectionnez

.text_wrap
{
    word-wrap: break-word;
}
Image non disponible

Les polices du web (Web Fonts)

Bien qu'elles ne soient pas classées comme un effet de texte, nous allons en parler brièvement. Une police Web est tout simplement une façon d'utiliser n'importe quelle police, automatiquement téléchargée par le navigateur, dans vos pages. Ce sera une révolution dans le web design, qui était auparavant limité à 10-15 polices de caractères. Toutefois, cette nouvelle fonctionnalité introduit les droits d'auteur dans un débat sur l'utilisation des polices de caractères autorisées et correctement utilisées.

Actuellement, la dernière version de Safari (3.1) est le seul navigateur supportant les polices web. Opéra est certainement celui qui activera prochainement le support, quand aux autres ils suivront sans aucun doute. Un exemple d'utilisation :

Sélectionnez

font-face
{
    font-family: 'Nom de la nouvelle police';
    src: url('http://designshack.co.uk/fonts/font.ttf');
}

Quelques exemples de pages utilisant cette technique ont été repérés et les suivants sont issus de CSS Zen Garden, créés par A List Apart. Les versions jointes fonctionneront seulement sur certains navigateurs :

Image non disponible Image non disponible

En conclusion

Bon nombre de fonctionnalités oubliées par le CSS2 ont été introduites dans cette mise à jour. Cet article ne couvre pas tous les ajouts en termes de texte. Si cela vous dit, vous pouvez en savoir plus sur les modules de texte. Tous ces ajouts sont intéressants quand ils sont utilisés de manière subtile, modifiant l'amélioration de la mise en forme typographique de la page.

Le prochain article de cette série parlera de l'interface utilisateur apporté par le CSS3. N'oubliez pas que, pour visualiser des exemples en ligne, vous pouvez aller sur notre page d'exemples.

Remerciements

Tous mes remerciements à jbarreau-mainson pour sa relecture.

Articles de cette série

  • Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?
  • Introduction au CSS3 - Partie 2 : Les bordures
  • Introduction au CSS3 - Partie 3 : Les effets de texte
  • Introduction au CSS3 - Partie 4: L'interface utilisateur
  • Introduction au CSS3 - Partie 5: Les multiples colonnes
  • Introduction au CSS3 - Partie 6 : Les arrière-plans


Tutoriel CSS3

Introduction au CSS3 - Partie 4: L'interface utilisateur

Table des matières

  • Introduction
  • Le redimensionnement
  • Le dimensionnement des boîtes
  • Le contour
  • En conclusion
  • Remerciements
  • Articles de cette série

Ce tutoriel va traiter de certaines des nouvelles possibilités de manipuler l'interface utilisateur avec le CSS3. Mais qu'entendons-nous par interface utilisateur ?

Cet article a été publié à l'origine, le 13 Mai 2008, en version anglaise et est visible à l'adresse suivante : Introduction to CSS3 - Part 4: User Interface

Article lu fois.

Introduction

Le CSS3 apporte de nouvelles propriétés intéressantes relatives aux éléments de redimensionnement, curseurs, contours, boîtes d'affichage et plus encore. Nous nous concentrons sur trois des plus importantes améliorations de l'interface utilisateur dans ce tutoriel.

Les exemples ci-dessous peuvent être vus sur la page d'exemples CSS3. Cependant, beaucoup d'entre eux ne sont pas forcément compatibles avec les dernières versions des différents navigateurs :

Le redimensionnement

La dernière version de Safari est dotée d'une fonction qui permet de redimensionner les zones de textes. C'est un gros plus je trouve, en l'utilisant tous les jours. Le CSS3 vous permet de l'appliquer facilement à tous les éléments, ce qui le rend finalement compatible avec tous les navigateurs (cross-browser). Le code est la ligne resize:both

Sélectionnez

.ui_resizable
{
    padding: 20px;
    border: 1px solid;
    resize: both;
    overflow: auto;
}
Image non disponible

Le dimensionnement des boîtes

Le module CSS3 de "modèle de boîte" est l'une des techniques les plus vastes et beaucoup d'informations peuvent être trouvées dans la spécification officielle. Le dimensionnement des boîtes vous permet de définir quelques éléments propres à un domaine d'une certaine manière. Par exemple, si vous voulez deux boîtes bordées l'une à côté de l'autre, cela peut être réalisé en mettant la propriété box-sizing à border-box. Cela force le navigateur à afficher la boîte avec la largeur et la hauteur spécifiées et de positionner la bordure et la marge intérieure (padding) de la boîte.

À l'heure actuelle, d'autres préfixes sont nécessaires pour que ce soit compatible avec tous les navigateurs. Vous pouvez voir la liste complète sur la page d'exemples. Voici une base possible :

Sélectionnez

.area
{
    width: 300px;
    border: 10px solid #ddccb5;
    height: 60px;
}

.boxes
{
    box-sizing: border-box;
    width:50%;
    height: 60px;
    text-align: center;
    border: 5px solid #897048;
    padding: 2px;
    float:left;
}
Image non disponible

Le contour

Le paramétrage du contour d'un élément est déjà disponible avec le CSS2, mais dans le CSS3 il inclut la possibilité de décaler le contour autour de l'élément en définissant une nouvelle valeur.

Elle diffère du contour de deux façons :
  • Les contours ne prennent pas d'espace
  • Les contours peuvent être non rectangulaires

Elles peuvent être créées comme suit:

Sélectionnez

.ui_outline
{
    width: 150px;
    padding: 10px;
    height: 70px;
    border: 2px solid black;
    outline: 2px solid #897048;
    outline-offset: 15px;
}
Image non disponible

En conclusion

Ces fonctionnalités ne sont pas révolutionnaires et ne sont pas susceptibles de provoquer quelques remous dans la communauté des designers. On ne peut pas nier qu'elles sont utiles, en particulier en donnant aux lecteurs la possibilité de redimensionner les éléments.

Le prochain article de cette série se penchera plus en détail sur une caractéristique bien plus révolutionnaire du CSS3 : la disposition du texte en plusieurs colonnes. Gardez à l'esprit que pour voir les exemples en ligne vous pouvez aller sur notre page d'exemples.

Remerciements

Tous mes remerciements à Bovino pour sa relecture.

Articles de cette série

  • Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?
  • Introduction au CSS3 - Partie 2 : Les bordures
  • Introduction au CSS3 - Partie 3 : Les effets de texte
  • Introduction au CSS3 - Partie 4: L'interface utilisateur
  • Introduction au CSS3 - Partie 5: Les multiples colonnes
  • Introduction au CSS3 - Partie 6 : Les arrière-plans


Tutoriel CSS3

Introduction au CSS3 - Partie 5: Les multiples colonnes

  • Introduction
  • Multiples colonnes en utilisant le CSS3
  • Enjamber une colonne
  • En attendant
  • En conclusion
  • Remerciements
  • Articles de cette série

Les multiples colonnes sont une façon importante de présenter le texte, les journaux les ont employées pendant des décennies. Cette mise en page est si courante qu'il est étonnant qu'actuellement ce genre de méthode soit l'une des techniques les plus complexes à comprendre pour un nouveau designer.

Cet article a été publié à l'origine, le 19 Mai 2008, en version anglaise et est visible à l'adresse suivante : Introduction to CSS3 - Part 5: Multiple Columns

Introduction

Le CSS3 présente un nouveau module connu, à juste titre, en tant que mise en page en multi-colonnes. Il permet de spécifier en combien de colonnes le texte doit être divisé et comment celles-ci doivent apparaître. Comme d'habitude, des exemples peuvent être trouvés ci-dessous :

Voir la page d'exemples

Multiples colonnes en utilisant le CSS3

Actuellement, cette propriété est disponible sur Firefox et Safari 3. Quand le module sera finalisé dans les spécifications du CSS3, il sera adopté par d'autres navigateurs et inclus dans leurs mises à jour.

Il y a quatre propriétés qui se rapportent à la mise en page de multiples colonnes en CSS3, permettant de définir le nombre de colonnes, la largeur, l'espace entre chaque colonne et une bordure entre chacune d'elles :

  • column-count
  • column-width
  • column-gap
  • column-rule

Actuellement, un préfixe propre au navigateur est également nécessaire pour définir comment Safari et Firefox doivent afficher la propriété. Le code à employer pour créer une mise en page de deux colonnes espacées de 1px serait :

Sélectionnez

.multiplecolumns
{
    -moz-column-width: 130px;
    -webkit-column-width: 130px;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-rule: 1px solid #ddccb5;
    -webkit-column-rule: 1px solid #ddccb5;
}
Image non disponible

Enjamber une colonne

Dans certain cas, vous voudriez peut-être qu'un élément enjambe plus d'une colonne (un titre, une table ou une image par exemple). Ceci est facilité par l'utilisation de :

Sélectionnez

h2
{
    column-span: all
}

Vous pouvez également utiliser des chiffres pour permettre à l'élément d'enjamber un certain nombre de colonnes. Actuellement cette propriété n'est utilisée sur aucun navigateur connu, mais devrait fournir une flexibilité appréciable pendant la conception d'un site. Il permettra de réaliser des effets comme :

Image non disponible

En attendant

Il pourrait y avoir encore un moment avant que tout ça ne soit supporté sur assez de navigateurs pour que leur utilisation se généralise. A List Apart a publié en 2005 une implémentation JavaScript de cette fonctionnalité qui permet d'utiliser les différentes propriétés de la même manière sur tous les principaux navigateurs. Ces propriétés JavaScript pourront être abandonnées progressivement lorsque les propriétés CSS3 seront implémentées et utilisées plus largement. C'est une excellente solution temporaire si vous ne savez pas comment créer de multiples colonnes sur votre site.

En conclusion

La mise en page de multiples colonnes évitera un énorme mal de tête à beaucoup de designers, permettant un plus grand contrôle sur la façon dont le contenu sera affiché. Vous pouvez lire les spécifications complètes du W3 sur la mise en page avec une ou plusieurs colonnes au cas où vous voudriez en savoir plus.

Le prochain et dernier article de cette série montrera de nouvelles propriétés de fond disponibles dans le CSS3, incluant l'utilisation de plus d'un arrière-plan pour un élément et la possibilité de définir sa taille. Rappelez-vous, pour voir des exemples de ces nouveautés, jetez un coup d'oeil à notre page d'exemples CSS3.

Remerciements

Tous mes remerciements à Bovino pour sa relecture.

Articles de cette série

  • Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?
  • Introduction au CSS3 - Partie 2 : Les bordures
  • Introduction au CSS3 - Partie 3 : Les effets de texte
  • Introduction au CSS3 - Partie 4: L'interface utilisateur
  • Introduction au CSS3 - Partie 5: Les multiples colonnes
  • Introduction au CSS3 - Partie 6 : Les arrière-plans


Tutoriel CCS3

Introduction au CSS3 - Partie 6 : Les arrière-plans

Table des matières

  • Introduction
  • Taille du fond
  • Fonds multiples
  • L'origine du fond
  • En conclusion
  • Remerciements
  • Articles de cette série

Pour la dernière partie de notre série d'introduction à CSS3, nous allons regarder de plus près les nouvelles propriétés de fond. Cela inclus la taille du fond, la possibilité d'utiliser plus d'un fond par élément et de définir l'origine du fond (qui affecte la position d'un fond).

Cet article a été publié à l'origine, le 27 Mai 2008, en version anglaise et est visible à l'adresse suivante : Introduction to CSS3 - Part 6: Backgrounds

Introduction

Les nouvelles propriétés permettent un plus grand contrôle de l'élément de fond et fourniront aux designers de nombreuses nouvelles possibilités. Comme d'habitude, des exemples peuvent être trouvés ci-dessous :

Voir la page d'exemples.

Taille du fond

Avant le CSS3, la taille de fond était déterminée par la taille de l'image utilisée. Il sera possible avec la prochaine version de CSS de spécifier en pourcentages ou en pixels la taille que doit avoir une image de fond. Ceci permettra de réutiliser des images dans plusieurs contextes et aussi d'agrandir un fond pour remplir une zone de façon plus précise.

Ce qui suit est un exemple simple de redimentionnement du logo de "Design Shack" dans le coin supérieur gauche d'un élément div :

Sélectionnez

.backgroundsize
{
    background: url(logo.gif);
    -webkit-background-size: 137px 50px;
    -khtml-background-size: 137px 50px;
    -o-background-size: 137px 50px;
    background-size: 137px 50px;
    background-repeat: no-repeat;
    padding: 60px 5px 5px 10px;
    border: 3px solid #ddccb5;
}
Image non disponible

Fonds multiples

La nouvelle possibilité d'utiliser des fonds multiples est un énorme gain de temps, permettant de réaliser des effets qui précédemment exigeaient plus d'une div. S'il est possible de combiner ça avec la propriété background-size, ce sera un point intéressant.

L'exemple ci-dessous utilise un fond pour la bordure supérieure, un qui se répète verticalement pour les bordures gauches et droites et un troisième pour le bas.

Sélectionnez

.multiplebackgrounds
{
    height: 150px;
    width: 270px;
    padding: 40px 20px 20px 20px;
    background:
                url(top.gif) top left no-repeat,
                url(bottom.gif) bottom left no-repeat,
                url(middle.gif) left repeat-y;
}
Image non disponible

L'origine du fond

Le CSS3 permet de spécifier comment la position du fond est calculée. La propriété background-origin peut être utilisée pour positionner soit le border, soit le padding, ou encore le content. Ceci permet une plus grande flexibilité en termes de placement d'une image de fond.

En conclusion

Il y a tout un ensemble de nouvelles options relatives au fond disponibles avec CSS3. Comme avec toutes les autres propriétés présentées dans cette série introductive, cela amène à une plus grande flexibilité et facilite beaucoup le développement d'effets auparavant complexes. Bien que ces propriétés ne soient pas encore supportées par la plupart des navigateurs, ça ne devrait plus être trop long avant que vous puissiez créer de renversantes interfaces utilisateurs avec ces nouvelles possibilités.

Nous espérons vraiment que vous avez apprécié cette série et nous vous tiendrons au courant de tous les derniers développements CSS3 qui sortiront dans les mois à venir. C'est avec impatience que nous attendons la prochaine génération des feuilles de style !

Remerciements

Tous mes remerciements à 12monkeys et à Bovino pour leur relecture.

Articles de cette série

  • Introduction au CSS3 - Partie 1 : Qu'est-ce que c'est ?
  • Introduction au CSS3 - Partie 2 : Les bordures
  • Introduction au CSS3 - Partie 3 : Les effets de texte
  • Introduction au CSS3 - Partie 4: L'interface utilisateur
  • Introduction au CSS3 - Partie 5: Les multiples colonnes
  • Introduction au CSS3 - Partie 6 : Les arrière-plans


Reference CSS eng

CSS Attributes

This section defines the cascading style sheet (CSS) attributes that are supported in Microsoft® Internet Explorer 4.0.
Font and Text Properties | font-family
 | font-style
 | font-variant
 | font-weight
 | font-size
 | @font-face
 | font
 | letter-spacing
 | line-height
 | text-decoration
 | text-transform
 | text-align
 | text-indent
 | vertical-align
Color and Background Properties | color
 | background-color
 | background-image
 | background-repeat
 | background-attachment
 | background-position
 | background
Layout Properties | margin-top
 | margin-right
 | margin-bottom
 | margin-left
 | margin
 | padding-top
 | padding-right
 | padding-bottom
 | padding-left
 | padding
 | border-top-width
 | border-right-width
 | border-bottom-width
 | border-left-width
 | border-width
 | border-top-color
 | border-right-color
 | border-bottom-color
 | border-left-color
 | border-color
 | border-top-style
 | border-right-style
 | border-bottom-style
 | border-left-style
 | border-style
 | border-top
 | border-right
 | border-bottom
 | border-left
 | border
 | float
 | clear
Classification Properties | display
 | list-style-type
 | list-style-image
 | list-style-position
 | list-style
Positioning Properties | clip
 | height
 | left
 | overflow
 | position
 | top
 | visibility
 | width
 | z-index
Printing Properties | page-break-before
 | page-break-after
Filter Properties | filter
Pseudo-Classes and Other Properties | active
 | hover
 | @import
 | !important
 | cursor
 | link
 | visited
Unsupported CSS Attributes | word-spacing
 | first-letter pseudo
 | first-line pseudo
 | white-space


Reference CSS eng

active

Description

Sets the style of anchor (A) elements when the link is engaged or "active".

Remarks

Active means that the user is currently navigating the link. Setting the active pseudo-class is often used in conjunction with setting specific styles for the other states of a link: link, visited, hover. Using pseudo-classes on elements other than the A element has no effect.

Example

Note that the syntax in the following example uses a colon (:) to specify a pseudo-class.

A:active {text-decoration:overline;color:purple}

Applies To

A

See Also

hover, link, visited


Reference CSS eng

background

Description

Sets all background attributes (image, attachment, color, repeat, position) for an element at once.

Syntax

{ background: background-color || background-image || background-repeat || background-attachment || background-position}

Remarks

While separate attributes can be used to specify the individual background properties, it is often more convenient to set them in one place using this composite property.

Individual background properties not set by the composite background property will be set to their default values. For example, the default value for "background-image" is none. Setting "background: white" is identical to saying "background: white none repeat scroll 0% 0%". So, in addition to setting the background color to white, it will clear any background-image, background-repeat, background-attachment, or background-position that has been previously set.

For more information on supported colors, see Color Table.

This property does not inherit, but the parent element's background will display through by default due to the default transparent value.

Examples

The first example below sets the background-color for DIV elements to red and sets all other background properties to their default values. The second example sets the background for the BODY element to show an image. This image will stay fixed as if it were a watermark on a page. Assuming the image is transparent, the color blue will bleed through.

DIV {background: red}

BODY {background: blue url(sample.gif) fixed}

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, IMG, INPUT, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, TEXTAREA, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Scripting Property

background


Reference CSS eng

background-attachment

Description

Determines if the background image is fixed with regard to the content or if it scrolls with the content.

Syntax

{ background-attachment: scroll | fixed}

Remarks

This attribute is not inherited.

Applies To

BODY, HTML

Scripting Property

backgroundAttachment


Reference CSS eng

background-color

Description

Sets the background color of an element.

Syntax

{ background-color: color | transparent}

Remarks

This attribute is not inherited.

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, IMG, INPUT, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, TEXTAREA, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Scripting Property

backgroundColor


Reference CSS eng

background-image

Description

Sets the background image of an element.

Syntax

{ background-image: url | none}

Remarks

This attribute is not inherited.

When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.

Example

BODY { background-image: url(marble.gif) }
P { background-image: none }

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=image, INPUT type=checkbox, INPUT type=radio, INPUT type=password

Scripting Property

backgroundImage


Reference CSS eng

background-position

Description

Specifies the initial position of the background image for the element.

Syntax

{ background-position: [percentage | length]{1,2} | [top | center | bottom] || [left | center | right]}

Remarks

The attribute has no effect if no background image has been specified for the element.

This attribute is not inherited.

Examples

Sets the background image at these x,y coordinates of the object.

{background-position: 20px 40px}

Positions the background image at the top vertical position and the center horizontal position.

{background-position: top center}

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=image, INPUT type=checkbox, INPUT type=radio, INPUT type=password

Scripting Property

backgroundPosition, backgroundPositionX, backgroundPositionY


Reference CSS eng

background-repeat

Description

Determines how the background image of an element is repeated.

Syntax

{ background-repeat: repeat | repeat-x | repeat-y | no-repeat}

Remarks

The attribute only has an effect if a background image has been specified.

A value of repeat means that the image is repeated both horizontally and vertically. The repeat-x (repeat-y) value makes the image repeat horizontally (vertically), to create a single band of images from one side to the other. With a value of no-repeat, the image is not repeated.

This attribute is not inherited.

Example

In the following example, the image will only be repeated vertically.

BODY {background: red url(pendant.gif);
      background-repeat: repeat-y;}

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=image, INPUT type=checkbox, INPUT type=radio, INPUT type=password

Scripting Property

backgroundRepeat


Reference CSS eng

border

Description

Specifies the border to display around the element. The border property is a shorthand (composite) property for setting border width, color, and style for all four sides of an object. If a border-color is not specified, the text color is used. Supported on block and replaced elements only.

All individual border properties not set by the composite border property will be set to their initial values. For example, the initial value for border-width is medium. Setting border: thin is identical to saying border: thin none; the initial value for color picks up the text color if one isn't initially set. So, in addition to setting the border width to thin, it will clear any border-style or border-color that has been previously set.

Syntax

{ border: border-width || border-style || color}

Remarks

This attribute is not inherited.

Example

Creates a border for all four sides of the object, where all four sides show a 20 pixel blue border with an inset style. Use the individual properties to control the border for individual sides of the object.

{border: 20px inset blue}

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

border

See Also

border-width, border-style, border-color border-right, border-left, border-top, border-bottom


Reference CSS eng

border-bottom

Description

Specifies the bottom border. Values that are not present are set to their initial values. Supported on block and replaced elements only.

For more information on supported colors, see Color Table.

Syntax

{ border-bottom: border-bottom-width || border-style || color}

Remarks

This attribute is not inherited.

Example

In this example, the border will be a solid green line.

{border-bottom: 20px outset green}

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderBottom

See Also

border-bottom-width, border-bottom-style, border-bottom-color, border, border-top


Reference CSS eng

border-bottom-color

Description

Sets the color of an element's bottom border. Supported on block and replaced elements only. See the Color Table for a list of supported color values.

Syntax

{ border-bottom-color: border-color}

Remarks

For more information on supported colors, see Color Table.

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderBottomColor

See Also

border-top-color, border-left-color, border-right-color, border-color


Reference CSS eng

border-bottom-style

Description

Sets the style of an element's bottom border. Supported on block and replaced elements only. Dotted and dashed are treated as solid.

The border styles are defined as follows:
none | No border is drawn (regardless of any border-width).
solid | Border is a solid line.
double | Border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the border-width value. Border width must be at least 3 pixels wide to draw a double border.
groove | 3-D groove is drawn in colors based on the value.
ridge | 3-D ridge is drawn in colors based on the value.
inset | 3-D inset is drawn in colors based on the value.
outset | 3-D outset is drawn in colors based on the value.

Syntax

{ border-bottom-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset }

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderBottomStyle

See Also

border-top-style, border-left-style, border-right-style, border-style


Reference CSS eng

border-bottom-width

Description

Sets the width of an element's bottom border. Supported on block and replaced elements only.

Syntax

{ border-bottom-width: thin | medium | thick | length}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderBottomWidth

See Also

border-top-width, border-left-width, border-right-width, border-width


Reference CSS eng

border-color

Description

Sets the color of the four borders. "{1,4}" indicates that up to four different colors can be specified. If one color is supplied, it is used for all four sides. If two colors are supplied, the first is used for the top and bottom, and the second is used for left and right. If three colors are supplied, they are used for top, right and left, and bottom, respectively. Supported on block and replaced elements only. See Color Table for a list of supported color values.

Syntax

{ border-color:border-color{1,4}}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderColor

See Also

border-top-color, border-left-color, border-right-color, border-bottom-color


Reference CSS eng

border-left

Description

Sets the left border. Values that are not present are set to their initial values. Supported on block and replaced elements only.

For more information on supported colors, see Color Table.

Syntax

{ border-left: border-left-width || border-left-style || border-left-color}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderLeft

See Also

border-left-width, border-left-color, border-left-style, border-right, border-top, border-bottom


Reference CSS eng

border-left-color

Description

Sets the color of an element's left border. Supported on block and replaced elements only. See Color Table for a list of supported color values.

Syntax

{ border-left-color: border-color}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderLeftColor

See Also

border-right-color, border-top-color, border-bottom-color, border-color


Reference CSS eng

border-left-style

Description

Sets the style of an element's left border. Dotted and dashed are treated as solid. Supported on block and replaced elements only.

The border styles are defined as follows:
none | No border is drawn (regardless of any border-width).
solid | Border is a solid line.
double | Border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the border-width value. Border width must be at least 3 pixels wide to draw a double border.
groove | 3-D groove is drawn in colors based on the value.
ridge | 3-D ridge is drawn in colors based on the value.
inset | 3-D inset is drawn in colors based on the value.
outset | 3-D outset is drawn in colors based on the value.

Syntax

{ border-left-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset }

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderLeftStyle

See Also

border-right-style, border-top-style, border-bottom-style, border-style


Reference CSS eng

border-left-width

Description

Sets the width of an element's left border. Supported on block and replaced elements only.

Syntax

{ border-left-width: thin | medium | thick | length}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderLeftWidth

See Also

border-right-width, border-top-width, border-bottom-width, border-width


Reference CSS eng

border-right

Description

Sets the right border. Values that are not present are set to their initial values. Supported on block and replaced elements only.

For more information on supported colors, see Color Table.

Syntax

{ border-right: border-right-width || border-right-style || border-right-color}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderRight

See Also

border-left, border-top, border-bottom, border


Reference CSS eng

border-right-color

Description

Sets the color of an element's right border. Supported on block and replaced elements only. See Color Table for a list of supported color values.

Syntax

{ border-right-color: border-color}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderRightColor

See Also

border-top-color, border-bottom-color, border-left-color, border-color


Reference CSS eng

border-right-style

Description

Sets the style of an element's right border. Dotted and dashed are treated as solid. Supported on block and replaced elements only.

The border styles are defined as follows:
none | No border is drawn (regardless of any border-width).
solid | Border is a solid line.
double | Border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the border-width value. Border width must be at least 3 pixels wide to draw a double border.
groove | 3-D groove is drawn in colors based on the value.
ridge | 3-D ridge is drawn in colors based on the value.
inset | 3-D inset is drawn in colors based on the value.
outset | 3-D outset is drawn in colors based on the value.

Syntax

{ border-right-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset }

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderRightStyle

See Also

border-left-style, border-top-style, border-bottom-style, border-style


Reference CSS eng

border-right-width

Description

Sets the width of an element's right border. Supported on block and replaced elements only.

Syntax

{ border-right-width: thin | medium | thick | length}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderRightWidth

See Also

border-top-width, border-bottom-width, border-left-width, border-width


Reference CSS eng

border-style

Description

Sets the style of the borders. Dotted and dashed are treated as solid. Supported on block and replaced elements only.

The border styles are defined as follows:
none | No border is drawn (regardless of any border-width).
solid | Border is a solid line.
double | Border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the border-width value. Border width must be at least 3 pixels wide to draw a double border.
groove | 3-D groove is drawn in colors based on the value.
ridge | 3-D ridge is drawn in colors based on the value.
inset | 3-D inset is drawn in colors based on the value.
outset | 3-D outset is drawn in colors based on the value.

Syntax

{ border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT, TEXTAREA

Scripting Property

borderStyle

See Also

border-width, border-color, border


Reference CSS eng

border-top

Description

Describes the top border. Values that are not present are set to their initial values. Supported on block and replaced elements only.

Syntax

{ border-top: border-top-width || border-top-style || border-top-color}

Remarks

For more information on supported colors, see Color Table.

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderTop

See Also

border-bottom, border-left, border-right


Reference CSS eng

border-top-color

Description

Sets the color of an element's top border. Supported on block and replaced elements only. See Color Table for a list of supported color values.

Syntax

{ border-top-color: border-color}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderTopColor

See Also

border-bottom-color, border-left-color, border-right-color, border-color


Reference CSS eng

border-top-style

Description

Sets the style of an element's top border. Dotted and dashed are treated as solid. Supported on block and replaced elements only.

The border styles are defined as follows:
none | No border is drawn (regardless of any border-width).
solid | Border is a solid line.
double | Border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the border-width value. Border width must be at least 3 pixels wide to draw a double border.
groove | 3-D groove is drawn in colors based on the value.
ridge | 3-D ridge is drawn in colors based on the value.
inset | 3-D inset is drawn in colors based on the value.
outset | 3-D outset is drawn in colors based on the value.

Syntax

{ border-top-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset }

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderTopStyle

See Also

border-bottom-style, border-left-style, border-right-style, border-style


Reference CSS eng

border-top-width

Description

Sets the width of an element's top border. Supported on block and replaced elements only.

Syntax

{ border-top-width: thin | medium | thick | length}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderTopWidth

See Also

border-bottom-width, border-left-width, border-right-width, border-width


Reference CSS eng

border-width

Description

Sets the width of the four borders at the same place in the style sheet. "{1,4}" indicates that up to four different widths can be specified. If one width is supplied, it is used for all four sides. If two widths are supplied, the first is used for the top and bottom, and the second is used for left and right. If three widths are supplied, they are used for top, right and left, and bottom, respectively. Supported on block and replaced elements only.

Syntax

{ border-width: [thin | medium | thick | length]{1,4}}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

borderWidth

See Also

border-color, border-style, border


Reference CSS eng

clear

Description

Specifies if elements allow floating elements (normally images) to the left or right.

Syntax

{ clear: none | left | right | both}

Remarks

The value of this property lists the sides where floating elements are not accepted. With clear set to left, an element will be moved below any floating element on the left side. With clear set to none, floating elements are allowed on all sides.

This attribute is not inherited.

Example

H1 { clear: left }

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

clear


Reference CSS eng

clip

Description

Defines a clipping region shape and size for a positioned element.

The clipping region defines the part of the element that is visible. Any part of the element that is outside the clipping region is transparent. Any coordinate can be replaced by the value auto, which causes the clipping rectangle to match the element's opposite side. The default value is to clip to expose the entire element. Note the order of the values: clip:rect(0,0,50,50) would render the element invisible, as it would set both the top and the right positions of the clipping region to 0. To achieve a 50-by-50 view port, the syntax should be clip:rect(0, 50, 50, 0).

Syntax

{ clip: shape | auto }

Syntax

shape:rect (top | right | bottom | left)

Remarks

<top>, <right>, <bottom>, and <left> specify either auto or a length value.

Remarks

This attribute is not inherited.

Applies To

DIV, TEXTAREA, SPAN, INPUT type=button, FIELDSET, IMG, MARQUEE, INPUT, TABLE

Scripting Property

clip


Reference CSS eng

color

Description

Describes the text color of an element, that is, the foreground color.

Syntax

{ color: color}

Remarks

This attribute is inherited.

For more information on supported colors, see Color Table.

Examples

The following examples are different ways to specify red.

EM { color: red }              /* natural language / CNS */
EM { color: #F00 }             /* #RGB */
EM { color: #FF0000 }          /* #RRGGBB */
EM { color: rgb 1.0 0.0 0.0 }  /* float range: 0.0 - 1.0 */

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

color


Reference CSS eng

cursor

Description

Specifies the type of cursor to be displayed for the mouse pointer.

Syntax

{ cursor: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help}

Remarks

The following types are defined:

auto
Browser determines the cursor to display based on the current context.
crosshair
Simple cross hair.
default
Platform-dependent default cursor. Usually an arrow.
hand
Hand.
move
Something is to be moved.
*-resize
Edge is to be moved.
text
Editable text. Usually an I-bar.
wait
Cursor to indicate that the program is busy and the user should wait. Usually a watch or hourglass.

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, HTML, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

cursor


Reference CSS eng

display

Description

Indicates whether an element is rendered. If set to none, the element is not rendered. If set to one of the other values, the element is rendered. The default is to render the element. Note Values for block, inline and list-item are not supported explicitly, but are useful in setting the display property to be on. In contrast to the visibility attribute, display:none reserves no space for the element on the screen.

Syntax

{ display: none | block | inline | list-item}

Remarks

For values other than none, the element will display with its normal display type.

This attribute is not inherited.

Applies To

TABLE, INPUT, TEXTAREA, INPUT type=button, DIV, SPAN, IFRAME, IMG, BODY, MARQUEE, SELECT

Scripting Property

display


Reference CSS eng

filter

Description

Specifies one or more filters applied to an element.

Internet Explorer supports the following built-in filter types: Visual Filter, Reveal Transition Filter, or Blend Transition Filter. For detailed information, see Creating Multimedia Effects with Visual Filters and Transitions. The filter mechanism is extensible and allows additional filters to be developed and added later.

Syntax

{ filter: filtertype1(parameter1, parameter2,...) [filtertype2([parameter1, parameter2)]...}

Remarks

An asterisk in the following applies to list indicates that a defined height, width, or absolute position is required.

Remarks

This attribute is not inherited.

Applies To

BODY, BUTTON, DIV*, IMG, INPUT, MARQUEE, SPAN*, TABLE, TD, TEXTAREA, TFOOT, TH, THEAD, TR


Reference CSS eng

float

Description

Specifies whether the object floats, causing text to flow around it.

Syntax

{ float: left | right | none}

Remarks

With the value none, the element will be displayed where it appears in the text. With a value of left (right), the margin properties will decide the horizontal positioning of the image and the text will flow on the right (left) side of the image. With a value of left or right, the element is treated as block-level (that is, the display property is ignored).

This attribute is not inherited.

Example

The following example demonstrates the float attribute.

<html>
<head>
<title>case for float</title>
</head>
<body>
<p>This is an example of float. "image1" should float to the left and "image2" should float to the right.
<img src=" http://www.microsoft.com/image1.gif" style="float:left">
<img src="http://www.microsoft.com/image2.gif" style="float:right">
<p>
</body>
</html>

Applies To

TABLE, INPUT, TEXTAREA, INPUT type=button, DIV, SPAN, OBJECT, APPLET, EMBED, IFRAMES, MARQUEE, SELECT

Scripting Property

styleFloat


Reference CSS eng

font

Description

Defines the separate font attributes (font-style, font-variant, font-weight, font-size, line-height, and font-family).

Syntax

{ font: [ font-style || font-variant || font-weight ] font-size [ line-height ] font-family}

Remarks

Values that are not present are set to their default values. Font-size and font-family are required.

This attribute is inherited.

Example

The following example sets the font-family to Comic Sans MS and the font-size to 24 point for all SPAN elements within the document.

SPAN {font: 24 'Comic Sans MS'}

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

font


Reference CSS eng

@font-face

Description

Specifies a font to embed into your HTML document.

This feature allows you to use specific fonts that might not be available on your local system. The URL should point to an embedded OpenType file (.eot or .ote format). The file contains compressed font data that is converted to a TrueType font. For more information on the font embedding feature and pointers to a tool for creating .eot files, see Font Embedding.

Syntax

@font-face {font-family: font-family, src url(URL);}

Example

The following example shows how to embed a font in an HTML document by referencing its source from another site.

<html>
<head>
<style>
@font-face {font-family:comic; src:url(http://valid_url/some_font_file.eot);}
</style>
<title>Font embedding using @font-face</title>
</head>
<body>
<p style="font-family:comic;font-size:18pt">This line uses @font-face defined in the above style element section using comic sans ms bold in 18pt.</p>
</body>
</html>


Reference CSS eng

font-family

Description

Specifies the typeface name of the font used for text in the element.

Syntax

{ font-family: [[ family-name | generic-family ] , ]* [ family-name | generic-family ]}

Remarks

The value associated with this attribute is a prioritized list of font family names and/or generic family names. List items are separated by commas to minimize confusion between multiple-word font family names. If the font family name contains white space, it is recommended that it is quoted with single or double quotation marks.

This attribute is inherited.

Example

The following generic families are defined, with an example name in parentheses.

'serif' (Times)
'sans-serif' (Helvetica)
'cursive' (Zapf-Chancery)
'fantasy' (Western)
'monospace' (Courier)

Not knowing which fonts users will have installed on their computers, authors should provide a list of alternatives with a generic font-family at the end of the list. This list can include embedded fonts. See @font-face for more information on embedding fonts.

BODY { font-family: univers, helvetica, sans-serif }
BODY { font-family: 'new century schoolbook', serif }

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontFamily


Reference CSS eng

font-size

Description

Specifies the size of the font to be used when rendering the text displayed by an element.

Syntax

{ font-size: absolute-size | relative-size | length | percentage |}

Remarks

Initial value is medium. Negative values are not allowed.

Font sizes are computed based on the font size of the parent element. Therefore, a font size of "10em" means that the size of the "em" is based on the font used by the parent element.

The values for font size are shown below:
absolute-size | A set of keywords that indicate predefined font sizes. Possible keywords include [xx-small | x-small | small | medium | large | x-large | xx-large]. Named font sizes scale according to the user's font setting preferences.
relative-size | A set of keywords that are interpreted as relative to the font size of the parent element. Possible values include [ larger | smaller].
length | An absolute value for the font size.
percentage | A percentage value of the parent element's font size.

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontSize
 Exemple :

 { font-size:  0.9em; }     mise en page flexible     em  cadratin  le carré dela lettre M    1em egal 16px      1em  entre  12px et 16px
 { font-size:  1.6em; }     1.6 em  n'est pas valide  (pas d'espace entre le nombre et em)
 { font-size:   18px; }     mise en page fixe


Reference CSS eng

font-style

Description

Sets the font style. Internet Explorer 4.0 implements italic and oblique identically.

Syntax

{ font-style: normal | italic | oblique}

Remarks

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontStyle


Reference CSS eng

font-variant

Description

Sets the font variation to small-caps in the current font family.

Syntax

{ font-variant: normal | small-caps}

Remarks

Internet Explorer 4.0 renders small-caps as uppercase letters in a smaller size.

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontVariant


Reference CSS eng

font-weight

Description

Sets the weight (boldness) of the text.

Syntax

{ font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}

Remarks

The key words for font-weight values are mapped to specific font variations depending on the fonts that are installed on the user's computer. In many cases, the user will not see the difference between different font-weight settings because the system will choose the closest match, which may be the same as the next relative font-weight setting that was previously set on the page. In any case, Internet Explorer 4.0 will always render a bolder font at least the same if not darker than a lighter font.

Setting the font-weight to 400 is equivalent to normal. Setting the font-weight to 700 is the equivalent to bold.

A font-weight of bolder or lighter is interpreted relative to the parent element's weight. A value of bolder for text whose parent is normal would set the text to bold.

Internet Explorer currently supports only normal | bold.

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontWeight


Reference CSS eng

height

Description

Specifies the height of a positioned element. Percentage values are based on the width of the parent element.

The height attribute, like all other CSS attributes, specifies a string value. When scripting the height property, use either the pixelHeight or posHeight property for numeric manipulation of a height value.

Syntax

{ height: length | percentage | auto}

Remarks

This attribute is not inherited.

Applies To

TABLE, INPUT, TEXTAREA, INPUT type=button, DIV, SPAN, OBJECT, APPLET, EMBED, IFRAME, IMG, HR, MARQUEE, FIELDSET

Scripting Property

height

See Also

width, top, left, posHeight, pixelHeight


Reference CSS eng

hover

Description

Sets the style of the anchor (A) elements when the user's mouse hovers over the link.

Remarks

Hover means that the user has the mouse positioned over the link and has hesitated. The style will not change if the mouse is simply passed over the link. Setting the hover pseudo-class is often used in conjunction with setting specific styles for the other states of a link: active, link, visited. Note the syntax in the example below uses a colon (:) to specify a pseudo-class.

Example

When a user hovers over a hyperlink contained within a document to which the following style sheet has been applied, the text is displayed in red, is converted to uppercase, and is spaced one centimeter apart.

<style>
a:hover {color:red;text-transform:uppercase;letter-spacing:1cm}
</style>

Applies To

A

See Also

active, link, visited


Reference CSS eng

@import

Description

Specifies a style sheet to import.

Syntax

@import url (URL);

Remarks

This differs from using the LINK element in that the @import statement is used as part of a style sheet definition inside a LINK or a STYLE tag. In the scripting model, this means that the owningElement property of the styleSheet object that represents a style sheet defined through @import will be either a STYLE or a LINK element. The statement should occur at the start of a style sheet, before any declarations. While Internet Explorer 4.0 allows @import statements to be anywhere within the style sheet definition, the rules contained within the @import style sheet will be applied to the document before any other rules defined for the containing style sheet. This can affect expected cascading affects.

Rules in the style sheet override rules in the imported style sheet.

Example

<STYLE type="css/text">
@import url(http://anotherStyleSheet.css)
P {color:blue}
</STYLE>

See Also

link, style, styleSheet, imports


Reference CSS eng

!important

Description

Increases the weight or importance of a particular rule.

Example

The following example illustrates this feature.

<style>
p {color:red!important}
</style>
<p style="color:green">This will be red </p>

In this example, normally the color of the <p> will be green (because inline overrules the rule set in a style tag). But, because of the !important in the style rule, the <p> tag will be red.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text


Reference CSS eng

left

Description

Specifies the position of the element relative to the left of the document.

Syntax

{ left: length | percentage | auto}

Remarks

left is used with the position attribute. This value corresponds to the offsetLeft property of the element, and does not include the border of the parent element (noteworthy for the BODY that draws the border inside the client region). auto is the default position of the element according to the regular HTML layout of the page. Percentage values are based on the parent's position.

This attribute, like all other CSS attributes, specifies a string value. When scripting the left property, use either the pixelLeft or posLeft property for numeric manipulation of a top value.

This attribute is not inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

left

See Also

top, height, width, posLeft, pixelLeft


Reference CSS eng

letter-spacing

Description

Specifies additional space between letters.

Syntax

{ letter-spacing: normal | length}

Remarks

This attribute will add the appropriate letter spacing after each character. If you do not want the end of a word to be affected by the spacing, you need to place the last character outside the closing element tag. Letter spacing can be influenced by justification . The length value indicates an addition to the default space between characters. Negative values are permitted.

This attribute is inherited.

Example

In the following example, the word-spacing between each character in BLOCKQUOTE elements would be increased with '1.0em'.

BLOCKQUOTE { letter-spacing: 1.0em }

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

letterSpacing


Reference CSS eng

line-height

Description

Specifies how far apart the lines in a paragraph are. Line height measures the distance between the descender of the font to the top of the internal leading of the font.

Syntax

{ line-height: normal | number | length | percentage}

Remarks

If there is more than one element on a formatted line, the maximum line height applies. Negative values are not allowed.

This attribute is inherited.

Example

The three rules in this example are identical. If the value is set to normal, the line height is set to the default line height for the element's font.

DIV { line-height: 1.2%; font-size: 10pt }   /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

lineHeight


Reference CSS eng

link

Description

Sets the style of the anchor (A) elements for the link's default (unvisited) state.

Remarks

The link attribute takes effect when the link has not been visited and it is not actively being navigated or has a mouse positioned over it. Setting the hover pseudo-class is often used in conjunction with setting specific styles for the other states of a link: active, visited, and hover. Note the syntax in the example below uses a colon (:) to specify a pseudo-class.

Example

The following example sets unvisited links to red and visited links to blue.

A:link   { color: red }           /* unvisited link */
A:visited  { color: blue }       /* visited links */

Applies To

A

See Also

active, hover, visited


Reference CSS eng

list-style

Description

Sets three properties (list-style-type, list-style-image, and list-style-position) at once.

Syntax

{ list-style: keyword || position || url}

Remarks

A URL can be combined with a list-style-type; if available, the image will replace the marker type.

This attribute is inherited.

Example

In the following example, the "disc" image will be used if the image cannot be found.

UL {list-style: url(http://some_image.gif) disc}

Applies To

LI, OL, UL

Scripting Property

listStyle


Reference CSS eng

list-style-image

Description

Specifies an image to use as a list item marker.

Syntax

{ list-style-image: url | none}

Remarks

When the image is available, it will replace the marker set with the list-style-type marker. The default value is none.

This attribute is inherited.

Applies To

LI, OL, UL

Scripting Property

listStyleImage


Reference CSS eng

list-style-position

Description

Determines how the list item marker is drawn with regard to the content.

Syntax

{ list-style-position: inside | outside}

Remarks

This attribute is applicable only on elements with a display value of list-item. If the value is set to inside, any wrapping text in the list item will wrap directly under the marker. If the value is set to outside, the wrapping text maintains the same left indent as the first line of the list item's text.

This attribute is inherited.

Applies To

LI, OL, UL

Scripting Property

listStylePosition


Reference CSS eng

list-style-type

Description

Specifies a predefined list item marker.

Syntax

{ list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none}

Remarks

Determines the appearance of the list item marker if list-style-image is none or if the image pointed to by the URL cannot be displayed. The default value is disc.

This attribute is inherited.

Applies To

LI, OL, UL

Scripting Property

listStyleType


Reference CSS eng

margin

Description

Sets the margin on all four sides of an object with a single style sheet rule.

Syntax

{ margin: [ length | percentage | auto] {1,4}}

Remarks

This is a composite property. The "{1,4}" means that up to four values can be specified. Specifying one value applies that value to all four sides; specifying two values applies the first value to the top and bottom, and the second value to the left and right. Specifying three values applies the first to the top, the second to the right and left, and the third to the bottom. Negative margins are supported except for top and bottom margins on inline elements. Percentage values refer to the parent element's width.

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, IFRAME, IMG, INPUT, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PLAINTEXT, PRE, SPAN, TABLE, TEXTAREA, TD, TH, TR, UL, XMP

Scripting Property

margin

See Also

margin-bottom, margin-left, margin-right, margin-top


Reference CSS eng

margin-bottom

Description

Specifies the bottom margin for the element. Negative margins are supported except for top and bottom margins on inline elements.

Syntax

{ margin-bottom: [ length | percentage | auto]}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

marginBottom

See Also

margin, margin-left, margin-right, margin-top


Reference CSS eng

margin-left

Description

Specifies the left margin for the element. Negative margins are supported except for top and bottom margins on inline elements.

Syntax

{ margin-left: [ length | percentage | auto]}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

marginLeft

See Also

margin, margin-bottom, margin-right, margin-top


Reference CSS eng

margin-right

Description

Specifies the right margin for the element. Negative margins are supported except for top and bottom margins on inline elements.

Syntax

{ margin-right: [ length | percentage | auto]}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, CAPTION, TEXTAREA, IFRAME, SPAN, IMG, EMBED, OBJECT, INPUT

Scripting Property

marginRight

See Also

margin, margin-bottom, margin-left, margin-top


Reference CSS eng

margin-top

Description

Specifies the top margin for the element. Negative margins are supported except for top and bottom margins on inline elements.

Syntax

{ margin-top: [ length | percentage | auto]}

Remarks

This attribute is not inherited.

Applies To

BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, INPUT, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP, TEXTAREA, IFRAME, SPAN, IMG, OBJECT

Scripting Property

marginTop

See Also

margin, margin-bottom, margin-left, margin-right


Reference CSS eng

overflow

Description

Determines what to do when the element's content exceeds the height and width of the element.

By default, overflowing content is visible. This means the element does not observe its specified height and width. If the attribute is set to scroll, the content is clipped to the height and width specified on the element, and the overflowing content is accessible through scroll bars. If the attribute is set to hidden, the content of the element is clipped to the height and width of the element, and no scroll bars appear to access the hidden content. Applies to positioned elements.

Syntax

{ overflow: scroll | hidden | visible | auto }

Remarks

This attribute is not inherited.

For the TEXTAREA element, only the hidden value is valid. Setting the overflow to hidden on a TEXTAREA element hides its scrollbars.

Example

The following example illustrates this attribute.

<DIV STYLE="position:relative;height:100;width:100;
      top:0;left:0;background-color:green;overflow:scroll">
put enough text in here that will take up more than 100 x 100
pixels worth of space. View this, and you will see that you
will need to use the scroll bars to see the content that won't
fit within a 100 x 100 window.
</DIV>

Applies To

DIV, TEXTAREA, SPAN, FIELDSET

Scripting Property

overflow


Reference CSS eng

padding

Description

Specifies the padding-top, padding-bottom, padding-left, and padding-right in one style sheet rule. Padding describes how much space to insert between the element and its margin, or if there is a border, between the element and its border.

Syntax

{ padding: [ length | percentage ] {1,4}}

Remarks

This is a composite property. The "{1,4}" means that up to four values can be specified. The order is top, right, bottom, left. If there is only one value specified, it applies to all sides; if there are two or three, the missing values are taken from the opposite side. Negative values are not allowed. This property is supported on block and replaced elements only.

This attribute is not inherited.

Applies To

BODY, CAPTION, DIV, FIELDSET, IFRAME, LEGEND, MARQUEE, TABLE, TD, TEXTAREA, TR

Scripting Property

padding


Reference CSS eng

padding-bottom

Description

Sets the bottom padding of an element. Padding values cannot be negative.

Supported on block and replaced elements only.

Syntax

{ padding-bottom: length | percentage}

Remarks

This attribute is not inherited.

Applies To

TABLE, TD, TR, CAPTION, TEXTAREA, IFRAME, BODY, MARQUEE, DIV

Scripting Property

paddingBottom

See Also

padding-top, padding-left, padding-right, padding


Reference CSS eng

padding-left

Description

Sets the left padding of an element. Padding values cannot be negative.

Supported on block and replaced elements only.

Syntax

{ padding-left: length | percentage}

Remarks

This attribute is not inherited.

Applies To

TABLE, TD, TR, CAPTION, TEXTAREA, IFRAME, BODY, MARQUEE, DIV

Scripting Property

paddingLeft

See Also

padding-top, padding-bottom, padding-right, padding


Reference CSS eng

padding-right

Description

Sets the right padding of an element. Padding values cannot be negative.

Supported on block and replaced elements only.

Syntax

{ padding-right: length | percentage}

Remarks

This attribute is not inherited.

Applies To

TABLE, TD, TR, CAPTION, TEXTAREA, IFRAME, BODY, MARQUEE, DIV

Scripting Property

paddingRight

See Also

padding-top, padding-left, padding-bottom, padding


Reference CSS eng

padding-top

Description

Sets the top padding of an element. Padding values cannot be negative.

Supported on block and replaced elements only.

Syntax

{ padding-top: length | percentage}

Remarks

This attribute is not inherited.

Applies To

TABLE, TD, TR, CAPTION, TEXTAREA, IFRAME, BODY, MARQUEE, DIV

Scripting Property

paddingTop

See Also

padding-bottom, padding-left, padding-right, padding


Reference CSS eng

page-break-after

Description

Indicates where to set a page break and on which page (left or right) the subsequent content should resume.

Syntax

{ page-break-after: auto | always | left | right}

Remarks

The values are defined as follows:

auto
Insert a page break after the element only if necessary.
always
Always insert a page break after the element.
left
Insert one or two page breaks after the element until a blank left page is reached.
right
Insert one or two page breaks after the element until a blank right page is reached.

If there are conflicts between page-break-after and the page-break-before value on the previous element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

This attribute is not inherited.

Example

In the following example, a hard page break is inserted in the document with the BR tag.

<STYLE>
    BR.page { page-break-after: always }
</STYLE>
  ...
<BR CLASS=page>
  ...

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, UL, XMP

Scripting Property

pageBreakAfter


Reference CSS eng

page-break-before

Description

Indicates where to set a page break and on which page (left or right) the subsequent content should resume.

Syntax

{ page-break-before: auto | always | left | right}

Remarks

The values are defined as follows:

auto
Insert a page break before the element only if necessary.
always
Always insert a page break before the element.
left
Insert one or two page breaks before the element until a blank left page is reached.
right
Insert one or two page breaks before the element until a blank right page is reached.

If there are conflicts between this property and the page-break-after value on the next element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

This attribute is not inherited.

Example

In the following example, a page break is inserted in the document before all H1 elements.

<STYLE>
    H1 { page-break-before: always }
</STYLE>
  ...
<H1 CLASS=chapter>
  ...

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, UL, XMP

Scripting Property

pageBreakBefore


Reference CSS eng

position

Description

Specifies the type of positioning for an element. The initial state is static, which means no special positioning and simply obeys the layout rules of HTML.

Syntax

{ position: absolute | relative | static}

Remarks

An absolutely positioned element is always relative to either the next positioned parent or, if there isn't one, the BODY by default. Values for left and top are relative to the upper-left corner of the next positioned element in the hierarchy.

This attribute is not inherited.

Examples

To place an image at the top left corner of the document, set the attributes to 0.

<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">

Setting an absolute position pulls the element out of the "flow" of the document and positions it irrespective of the layout of surrounding elements. If other elements already occupy the given position, they do not affect the positioned element, nor does the positioned element affect them. Instead, all elements are drawn at the same place, causing the objects to overlap. You can control this overlap by using the z-index attribute.

Setting the CSS position attribute to relative places the element in the natural HTML flow of the document but offsets the position of the element based on the preceding content. For example, placing a piece of text within a paragraph with relative positioning will render the text relative to the text in the paragraph that precedes it.

<p>The superscript in this name<SPAN STYLE="position: relative; top:-3px">xyz</SPAN> is "xyz".

Text and elements that follow a relatively positioned element occupy their own space and do not overlap the natural space for the positioned element. Contrast this with an absolutely positioned element, where subsequent text and elements occupy what would have been the natural space for the positioned element before the positioned element was pulled out of the flow.

See Positioning for an overview on how to use dynamic positioning.

Be sure to note the Applies To listings for elements that can be relatively and absolutely positioned.

Applies To

For position:absolute TABLE, INPUT, SELECT, TEXTAREA, INPUT type=button, DIV, SPAN, OBJECT, APPLET, EMBED, IFRAME, IMG, HR, MARQUEE, FIELDSET

For position:relative A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

position

See Also

top, left, height, width, z-index


Reference CSS eng

text-align

Description

Describes how text is aligned within the element.

Since this property is inherited, all block-level elements inside the DIV element with CLASS=center will be centered.

Syntax

{ text-align: left | right | center | justify}

Remarks

This attribute is inherited.

Example

The following example centers the text.

DIV.center { text-align: center }

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP

Scripting Property

textAlign


Reference CSS eng

text-decoration

Description

Describes decorations that are added to the text of an element.

Syntax

{ text-decoration: none | [ underline || overline || line-through || blink]}

Remarks

Internet Explorer 4.0 supports the keyword blink, but does not render the blink effect.

If the element has no text (for example, the IMG element in HTML) or is an empty element (for example, <EM> </EM>"), this property has no effect.

This attribute is not inherited.

Example

This example would underline the text of all links in all states of navigation.

A:link, A:visited, A:active, A:hover { text-decoration: underline }

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

textDecoration, textDecorationLineThrough, textDecorationOverline, textDecorationUnderline


Reference CSS eng

text-indent

Description

Specifies the indent that appears before the first formatted line. This property can be negative. An indent is not inserted in the middle of an element that was broken by another (such as BR in HTML).

Syntax

{ text-indent: length | percentage}

Remarks

This attribute is inherited.

Example

This example indents text by 3 ems.

P { text-indent: 3em }

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP

Scripting Property

textIndent


Reference CSS eng

text-transform

Description

Changes the rendering of text.

Syntax

{ text-transform: capitalize | uppercase | lowercase | none}

Remarks

The values are defined as follows:
capitalize | Transforms the first character of each word to uppercase.
uppercase | Transforms all the characters to uppercase characters.
lowercase | Transforms all the characters to lowercase characters.

This attribute is inherited.

Example

This example puts H1 elements in uppercase text.

H1 { text-transform: uppercase }

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

textTransform


Reference CSS eng

top

Description

Specifies the position of the element relative to the top of the document.

Syntax

{ top: length | percentage | auto}

Remarks

Used with the position attribute.

This value corresponds to the offsetTop property of the element, and does not include the border of the parent element (noteworthy for the BODY that draws the border inside the client region). auto is the default position of the element according to the regular HTML layout of the page. Percentage values are based on the parent's position.

This attribute, like all other CSS attributes, specifies a string value. When scripting the top property, use either the pixelTop or posTop property for numeric manipulation of a top value.

This attribute is not inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

top

See Also

width, height, left, posTop, pixelTop


Reference CSS eng

vertical-align

Description

Affects the vertical positioning of the element. The sub value vertically aligns as subscript. The super value vertically aligns as superscript.

Syntax

{ vertical-align: sub | super }

Example

This example aligns the text as subscript.

SPAN.subscript { vertical-align: sub }

Applies To

CAPTION, COL, IMG, SPAN,TBODY, TABLE, TD, TH, THEAD, TFOOT, TR

This attribute is not inherited.

Scripting Property

verticalAlign
s


Reference CSS eng

visibility

Description

Indicates whether the content of a positioned element is displayed.

Syntax

{ visibility: visible | hidden | inherit}

Remarks

Unlike display:none, elements that are not visible still reserve the same physical space in the content layout as they would if they were visible. Changing the visibility through scripting is useful for showing and hiding content based on a user interaction. Note that for a child element to be visible, the parent element must also be visible. See Dynamic Styles for document style scripting information.

This attribute is not inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, HTML, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

visibility

See Also

display


Reference CSS eng

visited

Description

Sets the style of anchor (A) elements for previously visited links.

Remarks

The visited pseudo-class is often used in conjunction with others to define the various states of a link: active, link, and hover.

When the mouse is over a hyperlink to which the visited style has been applied, the hover pseudo-class takes precendence.

Using pseudo-classes on elements other than the A element has no effect.

Example

The following code sets unvisited links to red and visited links to blue. The example below uses a colon (:) to specify a pseudo-class.

A:link   { color: red }           /* unvisited link */
A:visited  { color: blue }       /* visited links */

Applies To

A

See Also

active, hover, link


Referenc CSS eng

width

Description

Specifies the width of the element. DIV and SPAN cannot be positioned unless a width is provided. Percentage values are based on the width of the parent element.

Syntax

{ width: length | percentage | auto}

Remarks

The width attribute, like all other CSS attributes, specifies a string value. When scripting the width property, use either the pixelWidth or posWidth property for numeric manipulation of a width value.

This attribute is not inherited.

Applies To

APPLET, DIV, EMBED, FIELDSET, HR, IFRAME, IMG, INPUT, INPUT type=button, MARQUEE, OBJECT, SELECT, SPAN, TABLE, TEXTAREA

Scripting Property

width

See Also

height, left, position, top


Reference CSS eng

z-index

Description

Specifies the stacking order of positioned elements.

Syntax

{ z-index: integer | auto }

Remarks

By default (auto), the stacking order is bottom-to-top in the order that they appear in the HTML source. Positive z-index values are positioned above a negative (or lesser value) z-index. Two elements with the same z-index are stacked according to source order.

This attribute is not inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, TEXTAREA, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Scripting Property

zIndex

See Also

position


Reference CSS eng

All properties

  • Syntax Used in Property Definitions
  • Font Properties
  • Color and Background Properties
  • Text Properties
  • Box Properties
  • Classification Properties
  • Units

Syntax Used in Property Definitions

<Foo>
Value of type Foo. Common types are discussed in the Units section.
Foo
A keyword that must appear literally (though without case sensitivity). Commas and slashes must also appear literally.
A B C
A must occur, then B, then C, in that order.
A | B
A or B must occur.
A || B
A or B or both must occur, in any order.
[ Foo ]
Brackets are used to group items together.
Foo*
Foo is repeated zero or more times.
Foo+
Foo is repeated one or more times.
Foo?
Foo is optional.
Foo{A,B}
Foo must occur at least A times and at most B times.

Font Properties

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Font Family

Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values: <family-name>
  • Any font family name may be used
<generic-family>
  • serif (e.g., Times)
  • sans-serif (e.g., Arial or Helvetica)
  • cursive (e.g., Zapf-Chancery)
  • fantasy (e.g., Western)
  • monospace (e.g., Courier)
Initial Value: Determined by browser
Applies to: All elements
Inherited: Yes

Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.

A sample font-family declaration might look like this:

P { font-family: "New Century Schoolbook", Times, serif }

Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. However, since both of them are serif fonts, the generic font family is listed as a backup in case the system does not have either of these but has another serif font which meets the qualifications.

Any font name containing whitespace must be quoted, with either single or double quotes.

The font family may also be given with the font property.

Font Style

Syntax: | font-style: <value>
Possible Values: | normal | italic | oblique
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this:

H1 { font-style: oblique }
P  { font-style: normal }

Font Variant

Syntax: | font-variant: <value>
Possible Values: | normal | small-caps
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be:

SPAN { font-variant: small-caps }

Font Weight

Syntax: | font-weight: <value>
Possible Values: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate will be chosen on the following basis:

  • 500 may be switched with 400, and vice versa
  • 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise
  • 600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise

Some example font-weight assignments would be:

H1 { font-weight: 800 }
P  { font-weight: normal }

Font Size

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)

Initial Value: medium
Applies to: All elements
Inherited: Yes

The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

Some example size assignments would be:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IE would probably be considered xx-large.

Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.

Font

Syntax: | font: <value>
Possible Values: | [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | Yes

The font property may be used as a shorthand for the various font properties, as well as the line height. For example,

P { font: italic bold 12pt/14pt Times, serif }

specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

Color and Background Properties

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Color

Syntax: | color: <color>
Initial Value: | Determined by browser
Applies to: | All elements
Inherited: | Yes

The color property allows authors to specify the color of an element. See the Units section for color value descriptions. Some example color rules include:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Background Color

Syntax: | background-color: <value>
Possible Values: | <color> | transparent
Initial Value: | transparent
Applies to: | All elements
Inherited: | No

The background-color property sets the background color of an element. For example:

BODY { background-color: white }
H1   { background-color: #000080 }

To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.

Authors may also use the shorthand background property, which is currently better supported than the background-color property.

Background Image

Syntax: | background-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The background-image property sets the background image of an element. For example:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

When a background image is defined, a similar background color should also be defined for those not loading images.

Authors may also use the shorthand background property, which is currently better supported than the background-image property.

Background Repeat

Syntax: | background-repeat: <value>
Possible Values: | repeat | repeat-x | repeat-y | no-repeat
Initial Value: | repeat
Applies to: | All elements
Inherited: | No

The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally.

Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.

Background Attachment

Syntax: | background-attachment: <value>
Possible Values: | scroll | fixed
Initial Value: | scroll
Applies to: | All elements
Inherited: | No

The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Authors may also use the shorthand background property, which is currently better supported than the background-attachment property.

Background Position

Syntax: | background-position: <value>
Possible Values: | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial Value: | 0% 0%
Applies to: | Block-level and replaced elements
Inherited: | No

The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)

The easiest way to assign a background position is with keywords:

  • Horizontal keywords (left, center, right)
  • Vertical keywords (top, center, bottom)

Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.

If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

The keywords are interpreted as follows:

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.

Authors may also use the shorthand background property, which is currently better supported than the background-position property.

Background

Syntax: | background: <value>
Possible Values: | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%.

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Text Properties

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Word Spacing

Syntax: | word-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The word-spacing property defines an additional amount of space between words. The value must be in the length format; negative values are permitted.

Examples:

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

Letter Spacing

Syntax: | letter-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The letter-spacing property defines an additional amount of space between characters. The value must be in the length format; negative values are permitted. A setting of 0 will prevent justification.

Examples:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

Text Decoration

Syntax: | text-decoration: <value>
Possible Values: | none | [ underline || overline || line-through || blink ]
Initial Value: | none
Applies to: | All elements
Inherited: | No

The text-decoration property allows text to be decorated through one of five properties: underline, overline, line-through, blink, or the default, none.

For example, one can suggest that links not be underlined with

A:link, A:visited, A:active { text-decoration: none }

Vertical Alignment

Syntax: | vertical-align: <value>
Possible Values: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial Value: | baseline
Applies to: | Inline elements
Inherited: | No

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

  • baseline (align baselines of element and parent)
  • middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
  • sub (subscript)
  • super (superscript)
  • text-top (align tops of element and parent's font)
  • text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

  • top (align top of element with tallest element on the line)
  • bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

Text Transformation

Syntax: | text-transform: <value>
Possible Values: | none | capitalize | uppercase | lowercase
Initial Value: | none
Applies to: | All elements
Inherited: | Yes

The text-transform property allows text to be transformed by one of four properties:

  • capitalize (capitalizes first character of each word)
  • uppercase (capitalizes all characters of each word)
  • lowercase (uses small letters for all characters of each word)
  • none (the initial value)

Examples:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

The text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.

Text Alignment

Syntax: | text-align: <value>
Possible Values: | left | right | center | justify
Initial Value: | Determined by browser
Applies to: | Block-level elements
Inherited: | Yes

The text-align property can be applied to block-level elements (P, H1, etc.) to give the alignment of the element's text. This property is similar in function to HTML's ALIGN attribute on paragraphs, headings, and divisions.

Some examples follow:

H1          { text-align: center }
P.newspaper { text-align: justify }

Text Indentation

Syntax: | text-indent: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | Block-level elements
Inherited: | Yes

The text-indent property can be applied to block-level elements (P, H1, etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph:

P { text-indent: 5em }

Line Height

Syntax: | line-height: <value>
Possible Values: | normal | <number> | <length> | <percentage>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The line-height property will accept a value to control the spacing between baselines of text. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Line height may also be given in the font property along with a font size.

The line-height property could be used to double space text:

P { line-height: 200% }

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.

Box Properties

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear

Top Margin

Syntax: | margin-top: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-top property sets the top margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

For example, the following rule would eliminate the top margin of a document:

BODY { margin-top: 0 }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Right Margin

Syntax: | margin-right: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-right property sets the right margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

P.narrow { margin-right: 50% }

Note that adjoining horizontal margins are not collapsed.

Bottom Margin

Syntax: | margin-bottom: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-bottom property sets the bottom margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Left Margin

Syntax: | margin-left: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-left property sets the left margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

ADDRESS { margin-left: 50% }

Note that adjoining horizontal margins are not collapsed.

Margin

Syntax: | margin: <value>
Possible Values: | [ <length> | <percentage> | auto ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The margin property sets the margins of an element by specifying between one and four values, where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Examples of margin declarations include:

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Horizontal margins are not collapsed.

Using the margin property allows one to set all margins; alternatively, the properties margin-top, margin-bottom, margin-left, and margin-right may be used.

Top Padding

Syntax: | padding-top: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-top property describes how much space to put between the top border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Right Padding

Syntax: | padding-right: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-right property describes how much space to put between the right border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Bottom Padding

Syntax: | padding-bottom: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Left Padding

Syntax: | padding-left: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Padding

Syntax: | padding: <value>
Possible Values: | [ <length> | <percentage> ]{1,4}
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.

An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width

Syntax: | border-top-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-top-width property is used to specify the width of an element's top border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-top, border-width, or border shorthand properties.

Right Border Width

Syntax: | border-right-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-right-width property is used to specify the width of an element's right border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-right, border-width, or border shorthand properties.

Bottom Border Width

Syntax: | border-bottom-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-bottom-width property is used to specify the width of an element's bottom border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-bottom, border-width, or border shorthand properties.

Left Border Width

Syntax: | border-left-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-left-width property is used to specify the width of an element's left border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-left, border-width, or border shorthand properties.

Border Width

Syntax: | border-width: <value>
Possible Values: | [ thin | medium | thick | <length> ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.

If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

One may also use the border shorthand property.

Border Color

Syntax: | border-color: <value>
Possible Values: | <color>{1,4}
Initial Value: | The value of the color property
Applies to: | All elements
Inherited: | No

The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Border Style

Syntax: | border-style: <value>
Possible Values: | [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial Value: | none
Applies to: | All elements
Inherited: | No

The border-style property sets the style of an element's border. This property must be specified for the border to be visible.

Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Top Border

Syntax: | border-top: <value>
Possible Values: | <border-top-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-top property is a shorthand for setting the width, style, and color of an element's top border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Right Border

Syntax: | border-right: <value>
Possible Values: | <border-right-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-right property is a shorthand for setting the width, style, and color of an element's right border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Bottom Border

Syntax: | border-bottom: <value>
Possible Values: | <border-bottom-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Left Border

Syntax: | border-left: <value>
Possible Values: | <border-left-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-left property is a shorthand for setting the width, style, and color of an element's left border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Border

Syntax: | border: <value>
Possible Values: | <border-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border property is a shorthand for setting the width, style, and color of an element's border.

Examples of border declarations include:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

Width

Syntax: | width: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.

This property could be used to give common widths to some INPUT elements, such as submit and reset buttons:

INPUT.button { width: 10em }

Height

Syntax: | height: <value>
Possible Values: | <length> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.

As with the width property, height can be used to scale an image:

IMG.foo { width: 40px; height: 40px }

In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file. However, scaling through the width and height properties is a useful option for user-defined style sheets in order to overcome vision problems.

Float

Syntax: | float: <value>
Possible Values: | left | right | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The float property allows authors to wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the images and tables that HTML 3.2 allows.

Clear

Syntax: | clear: <value>
Possible Values: | none | left | right | both
Initial Value: | none
Applies to: | All elements
Inherited: | No

The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. This property is similar in function to HTML 3.2's <BR CLEAR=left|right|all|none>, but it can be applied to all elements.

Classification Properties

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style

Display

Syntax: | display: <value>
Possible Values: | block | inline | list-item | none
Initial Value: | block
Applies to: | All elements
Inherited: | No

The display property is used to define an element with one of four values:

  • block (a line break before and after the element)
  • inline (no line break before and after the element)
  • list-item (same as block except a list-item marker is added)
  • none (no display)

Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification.

The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements!

Whitespace

Syntax: | white-space: <value>
Possible Values: | normal | pre | nowrap
Initial Value: | normal
Applies to: | Block-level elements
Inherited: | Yes

The white-space property will determine how spaces within the element are treated. This property takes one of three values:

  • normal (collapses multiple spaces into one)
  • pre (does not collapse multiple spaces)
  • nowrap (does not allow line wrapping without a <BR> tag)

List Style Type

Syntax: | list-style-type: <value>
Possible Values: | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial Value: | disc
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off.

Examples:

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

List Style Image

Syntax: | list-style-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property.

Examples:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

List Style Position

Syntax: | list-style-position: <value>
Possible Values: | inside | outside
Initial Value: | outside
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented. An example rendering is:

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

List Style

Syntax: | list-style: <value>
Possible Values: | <list-style-type> || <list-style-position> || <url>
Initial Value: | Not defined
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.

Examples:

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

Units

  • Length Units
  • Percentage Units
  • Color Units
  • URLs

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

  • em (ems, the height of the element's font)
  • ex (x-height, the height of the letter "x")
  • px (pixels, relative to the canvas resolution)

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

Percentage Units

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Color Units

A color value is a keyword or a numerical RGB specification.

The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB colors are given in one of four ways:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

The examples above all specify the same color.

Douglas R. Jacobson has also developed a handy quick reference RGB Color Chart (61 kB).

URLs

A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

Examples:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */


Reference CSS eng

Basic Syntax and rules

Selectors

Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=svp94O>Text indented 3em</P>
Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

  1. ! important

    Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement:

    BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important }
  2. Origin of Rules (Author's vs. Reader's)

    As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.

    Authors should be wary of using ! important rules since they will override any of the user's ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.

  3. Selector Rules: Calculating Specificity

    Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

    1. Count the number of ID attributes in the selector.
    2. Count the number of CLASS attributes in the selector.
    3. Count the number of HTML tag names in the selector.

    Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

    #id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
  4. Order of Specification

    To make it easy, when two rules have the same weight, the last rule specified wins.


Reference CSS eng

The style

  • Linking to an External Style Sheet
  • Embedding a Style Sheet
  • Importing a Style Sheet
  • Inlining Style
  • The CLASS Attribute
  • The ID Attribute
  • The SPAN Element
  • The DIV Element
  • A Note about Validation

Linking to an External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element:

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css"
 TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css"
 TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

The <LINK> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.

External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements. A file consisting solely of

P { margin: 2em }

could be used as an external style sheet.

The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

  • screen (the default value), for presentation on non-paged computer screens;
  • print, for output to a printer;
  • projection, for projected presentations;
  • aural, for speech synthesizers;
  • braille, for presentation on braille tactile feedback devices;
  • tty, for character cell displays (using a fixed-pitch font);
  • tv, for televisions;
  • all, for all output devices.

Multiple media are specified through a comma-separated list or the value all.

Netscape Navigator 4.x incorrectly ignores any linked or embedded style sheets declared with MEDIA values other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all.

The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute, as in the first <LINK> tag in the example, defines a persistent style.

A preferred style is one that is automatically applied, such as in the second <LINK> tag in the example. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet". The third <LINK> tag in the example defines an alternate style, which the user could choose to replace the preferred style sheet.

Note that current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, one must use the same TITLE with each style sheet.

An external style sheet is ideal when the style is applied to numerous pages. With an external style sheet, an author could change the look of an entire site by simply changing one file. As well, most browsers will cache an external style sheet, thus avoiding a delay in page presentation once the style sheet is cached.

Microsoft Internet Explorer 3 for Windows 95/NT4 does not support BODY background images or colors from linked style sheets. Given this bug, authors may wish to provide another mechanism for including a background image or color, such as embedding or inlining the style, or by using the BACKGROUND attribute of the BODY element.

Embedding a Style Sheet

A style sheet may be embedded in a document with the STYLE element:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>

The STYLE element is placed in the document HEAD. The required TYPE attribute is used to specify a media type, as is its function with the LINK element. Similarly, the TITLE and MEDIA attributes may also be specified with STYLE.

Older browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, the contents of the STYLE element are contained within an SGML comment (<!-- comment -->), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

Importing a Style Sheet

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.htmlhelp.com/style.css);
  @import url(/stylesheets/punk.css);
  DT { background: yellow; color: black }
-->
</STYLE>

Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT { background: aqua }, definition terms would still have a yellow background.

The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow.

Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element.

Inlining Style

Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. An example follows:

<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> This paragraph is styled in red with the New Century Schoolbook font, if available.</P>

Note that New Century Schoolbook is contained within single quotes in the STYLE attribute since double quotes are used to contain the style declarations.

Inlining style is far more inflexible than the other methods. To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Inlining style loses many of the advantages of style sheets by mixing content with presentation. As well, inlined styles implicitly apply to all media, since there is no mechanism for specifying the intended medium for an inlined style. This method should be used sparingly, such as when a style is to be applied on all media to a single occurrence of an element. If the style should be applied to a single element instance but only with certain media, use the ID attribute instead of the STYLE attribute.

The CLASS Attribute

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

These classes could be referenced in HTML with the CLASS attribute:

<H1 CLASS=punk>Proprietary Extensions</H1>
<P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...

In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.

A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.

Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page uses classes to give a different style to CSS code and HTML code.

The ID Attribute

The ID attribute is used to define a unique style for an element. A CSS rule such as

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

<P ID=wdg97>Welcome to the Web Design Group!</P>

Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.

Note that HTML 4.0 allows periods in ID attribute values, but CSS1 does not allow periods in ID selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a numeric code, but HTML 4.0 does not allow these characters in an ID attribute value.

The use of ID is appropriate when a style only needs to be applied once in any document. ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).

The SPAN Element

The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. SPAN may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes.

SPAN is an inline element, so it may be used just as elements such as EM and STRONG in HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled.

Some examples of SPAN follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
  .firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN> of a
paragraph could be in small-caps. Style may also be inlined, such as
to change the style of a word like <SPAN STYLE="font-family: Arial">
Arial</SPAN>.</P>

The DIV Element

The DIV element is similar to the SPAN element in function, with the main difference being that DIV (short for "division") is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different classes of containers, such as a chapter, abstract, or note. For example:

<DIV CLASS=note>
<H1>Divisions</H1>
<P>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</P>
<P>Since DIV may contain other block-level containers, it is useful for marking large sections of a document, such as this note.</P>
<P>The closing tag is required.</P>
</DIV>


Reference CSS eng

The units

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

  • em (ems, the height of the element's font)
  • ex (x-height, the height of the letter "x")
  • px (pixels, relative to the canvas resolution)

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

Percentage Units

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Color Units

A color value is a keyword or a numerical RGB specification.

The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB colors are given in one of four ways:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

The examples above all specify the same color.

Douglas R. Jacobson has also developed a handy quick reference RGB Color Chart (61 kB).

URLs

A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

Examples:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */


Reference CSS eng

Classification Properties

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style

Display

Syntax: | display: <value>
Possible Values: | block | inline | list-item | none
Initial Value: | block
Applies to: | All elements
Inherited: | No

The display property is used to define an element with one of four values:

  • block (a line break before and after the element)
  • inline (no line break before and after the element)
  • list-item (same as block except a list-item marker is added)
  • none (no display)

Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification.

The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements!

Whitespace

Syntax: | white-space: <value>
Possible Values: | normal | pre | nowrap
Initial Value: | normal
Applies to: | Block-level elements
Inherited: | Yes

The white-space property will determine how spaces within the element are treated. This property takes one of three values:

  • normal (collapses multiple spaces into one)
  • pre (does not collapse multiple spaces)
  • nowrap (does not allow line wrapping without a <BR> tag)

List Style Type

Syntax: | list-style-type: <value>
Possible Values: | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial Value: | disc
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off.

Examples:

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

List Style Image

Syntax: | list-style-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property.

Examples:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

List Style Position

Syntax: | list-style-position: <value>
Possible Values: | inside | outside
Initial Value: | outside
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented. An example rendering is:

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

List Style

Syntax: | list-style: <value>
Possible Values: | <list-style-type> || <list-style-position> || <url>
Initial Value: | Not defined
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.

Examples:

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }


Reference CSS eng

Font

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Font Family

Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values: <family-name>
  • Any font family name may be used
<generic-family>
  • serif (e.g., Times)
  • sans-serif (e.g., Arial or Helvetica)
  • cursive (e.g., Zapf-Chancery)
  • fantasy (e.g., Western)
  • monospace (e.g., Courier)
Initial Value: Determined by browser
Applies to: All elements
Inherited: Yes

Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.

A sample font-family declaration might look like this:

P { font-family: "New Century Schoolbook", Times, serif }

Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. However, since both of them are serif fonts, the generic font family is listed as a backup in case the system does not have either of these but has another serif font which meets the qualifications.

Any font name containing whitespace must be quoted, with either single or double quotes.

The font family may also be given with the font property.

Font Style

Syntax: | font-style: <value>
Possible Values: | normal | italic | oblique
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this:

H1 { font-style: oblique }
P  { font-style: normal }

Font Variant

Syntax: | font-variant: <value>
Possible Values: | normal | small-caps
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be:

SPAN { font-variant: small-caps }

Font Weight

Syntax: | font-weight: <value>
Possible Values: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate will be chosen on the following basis:

  • 500 may be switched with 400, and vice versa
  • 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise
  • 600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise

Some example font-weight assignments would be:

H1 { font-weight: 800 }
P  { font-weight: normal }

Font Size

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)

Initial Value: medium
Applies to: All elements
Inherited: Yes

The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

Some example size assignments would be:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IE would probably be considered xx-large.

Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.

Font

Syntax: | font: <value>
Possible Values: | [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | Yes

The font property may be used as a shorthand for the various font properties, as well as the line height. For example,

P { font: italic bold 12pt/14pt Times, serif }

specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.


Reference CSS eng

Background

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Color

Syntax: | color: <color>
Initial Value: | Determined by browser
Applies to: | All elements
Inherited: | Yes

The color property allows authors to specify the color of an element. See the Units section for color value descriptions. Some example color rules include:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Background Color

Syntax: | background-color: <value>
Possible Values: | <color> | transparent
Initial Value: | transparent
Applies to: | All elements
Inherited: | No

The background-color property sets the background color of an element. For example:

BODY { background-color: white }
H1   { background-color: #000080 }

To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.

Authors may also use the shorthand background property, which is currently better supported than the background-color property.

Background Image

Syntax: | background-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The background-image property sets the background image of an element. For example:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

When a background image is defined, a similar background color should also be defined for those not loading images.

Authors may also use the shorthand background property, which is currently better supported than the background-image property.

Background Repeat

Syntax: | background-repeat: <value>
Possible Values: | repeat | repeat-x | repeat-y | no-repeat
Initial Value: | repeat
Applies to: | All elements
Inherited: | No

The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally.

Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.

Background Attachment

Syntax: | background-attachment: <value>
Possible Values: | scroll | fixed
Initial Value: | scroll
Applies to: | All elements
Inherited: | No

The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Authors may also use the shorthand background property, which is currently better supported than the background-attachment property.

Background Position

Syntax: | background-position: <value>
Possible Values: | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial Value: | 0% 0%
Applies to: | Block-level and replaced elements
Inherited: | No

The background-position property gives the initial position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)

The easiest way to assign a background position is with keywords:

  • Horizontal keywords (left, center, right)
  • Vertical keywords (top, center, bottom)

Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.

If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

The keywords are interpreted as follows:

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.

Authors may also use the shorthand background property, which is currently better supported than the background-position property.

Background

Syntax: | background: <value>
Possible Values: | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%.

To help avoid conflicts with user style sheets, background and color properties should always be specified together.


Reference CSS eng

Text

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Word Spacing

Syntax: | word-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The word-spacing property defines an additional amount of space between words. The value must be in the length format; negative values are permitted.

Examples:

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

Letter Spacing

Syntax: | letter-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The letter-spacing property defines an additional amount of space between characters. The value must be in the length format; negative values are permitted. A setting of 0 will prevent justification.

Examples:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

Text Decoration

Syntax: | text-decoration: <value>
Possible Values: | none | [ underline || overline || line-through || blink ]
Initial Value: | none
Applies to: | All elements
Inherited: | No

The text-decoration property allows text to be decorated through one of five properties: underline, overline, line-through, blink, or the default, none.

For example, one can suggest that links not be underlined with

A:link, A:visited, A:active { text-decoration: none }

Vertical Alignment

Syntax: | vertical-align: <value>
Possible Values: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial Value: | baseline
Applies to: | Inline elements
Inherited: | No

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

  • baseline (align baselines of element and parent)
  • middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
  • sub (subscript)
  • super (superscript)
  • text-top (align tops of element and parent's font)
  • text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

  • top (align top of element with tallest element on the line)
  • bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

Text Transformation

Syntax: | text-transform: <value>
Possible Values: | none | capitalize | uppercase | lowercase
Initial Value: | none
Applies to: | All elements
Inherited: | Yes

The text-transform property allows text to be transformed by one of four properties:

  • capitalize (capitalizes first character of each word)
  • uppercase (capitalizes all characters of each word)
  • lowercase (uses small letters for all characters of each word)
  • none (the initial value)

Examples:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

The text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.

Text Alignment

Syntax: | text-align: <value>
Possible Values: | left | right | center | justify
Initial Value: | Determined by browser
Applies to: | Block-level elements
Inherited: | Yes

The text-align property can be applied to block-level elements (P, H1, etc.) to give the alignment of the element's text. This property is similar in function to HTML's ALIGN attribute on paragraphs, headings, and divisions.

Some examples follow:

H1          { text-align: center }
P.newspaper { text-align: justify }

Text Indentation

Syntax: | text-indent: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | Block-level elements
Inherited: | Yes

The text-indent property can be applied to block-level elements (P, H1, etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph:

P { text-indent: 5em }

Line Height

Syntax: | line-height: <value>
Possible Values: | normal | <number> | <length> | <percentage>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The line-height property will accept a value to control the spacing between baselines of text. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Line height may also be given in the font property along with a font size.

The line-height property could be used to double space text:

P { line-height: 200% }

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.


Reference CSS eng

BOX

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear

Top Margin

Syntax: | margin-top: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-top property sets the top margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

For example, the following rule would eliminate the top margin of a document:

BODY { margin-top: 0 }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Right Margin

Syntax: | margin-right: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-right property sets the right margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

P.narrow { margin-right: 50% }

Note that adjoining horizontal margins are not collapsed.

Bottom Margin

Syntax: | margin-bottom: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-bottom property sets the bottom margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Left Margin

Syntax: | margin-left: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-left property sets the left margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

ADDRESS { margin-left: 50% }

Note that adjoining horizontal margins are not collapsed.

Margin

Syntax: | margin: <value>
Possible Values: | [ <length> | <percentage> | auto ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The margin property sets the margins of an element by specifying between one and four values, where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Examples of margin declarations include:

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Horizontal margins are not collapsed.

Using the margin property allows one to set all margins; alternatively, the properties margin-top, margin-bottom, margin-left, and margin-right may be used.

Top Padding

Syntax: | padding-top: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-top property describes how much space to put between the top border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Right Padding

Syntax: | padding-right: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-right property describes how much space to put between the right border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Bottom Padding

Syntax: | padding-bottom: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Left Padding

Syntax: | padding-left: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Padding

Syntax: | padding: <value>
Possible Values: | [ <length> | <percentage> ]{1,4}
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.

An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width

Syntax: | border-top-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-top-width property is used to specify the width of an element's top border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-top, border-width, or border shorthand properties.

Right Border Width

Syntax: | border-right-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-right-width property is used to specify the width of an element's right border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-right, border-width, or border shorthand properties.

Bottom Border Width

Syntax: | border-bottom-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-bottom-width property is used to specify the width of an element's bottom border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-bottom, border-width, or border shorthand properties.

Left Border Width

Syntax: | border-left-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-left-width property is used to specify the width of an element's left border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-left, border-width, or border shorthand properties.

Border Width

Syntax: | border-width: <value>
Possible Values: | [ thin | medium | thick | <length> ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.

If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

One may also use the border shorthand property.

Border Color

Syntax: | border-color: <value>
Possible Values: | <color>{1,4}
Initial Value: | The value of the color property
Applies to: | All elements
Inherited: | No

The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Border Style

Syntax: | border-style: <value>
Possible Values: | [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial Value: | none
Applies to: | All elements
Inherited: | No

The border-style property sets the style of an element's border. This property must be specified for the border to be visible.

Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Top Border

Syntax: | border-top: <value>
Possible Values: | <border-top-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-top property is a shorthand for setting the width, style, and color of an element's top border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Right Border

Syntax: | border-right: <value>
Possible Values: | <border-right-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-right property is a shorthand for setting the width, style, and color of an element's right border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Bottom Border

Syntax: | border-bottom: <value>
Possible Values: | <border-bottom-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Left Border

Syntax: | border-left: <value>
Possible Values: | <border-left-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-left property is a shorthand for setting the width, style, and color of an element's left border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Border

Syntax: | border: <value>
Possible Values: | <border-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border property is a shorthand for setting the width, style, and color of an element's border.

Examples of border declarations include:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

Width

Syntax: | width: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.

This property could be used to give common widths to some INPUT elements, such as submit and reset buttons:

INPUT.button { width: 10em }

Height

Syntax: | height: <value>
Possible Values: | <length> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.

As with the width property, height can be used to scale an image:

IMG.foo { width: 40px; height: 40px }

In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file. However, scaling through the width and height properties is a useful option for user-defined style sheets in order to overcome vision problems.

Float

Syntax: | float: <value>
Possible Values: | left | right | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The float property allows authors to wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the images and tables that HTML 3.2 allows.

Clear

Syntax: | clear: <value>
Possible Values: | none | left | right | both
Initial Value: | none
Applies to: | All elements
Inherited: | No

The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. This property is similar in function to HTML 3.2's <BR CLEAR=left|right|all|none>, but it can be applied to all elements.


azimuth NN s.o. IE s.o. CSS 2
Hérité : oui

Si une personne se trouve au centre d'un espace sonore circulaire (tel qu'une salle équipée d'un système Surround Sound), l'attribut azimuth définit l'angle horizontal de la source du son (dans un navigateur à synthèse vocale, par exemple). Voir aussi l'attribut elevation.

Syntaxe CSS
azimuth: angle | angleConstant || direction
Valeur
Jusqu'à deux valeurs sont possibles. L'une représente l'angle, dans le sens des aiguilles d'une montre, en partant du point se trouvant exactement en face ; la seconde représente un mouvement incrémentiel de 20 degrés vers la gauche ou vers la droite. La valeur d'angle peut être n'importe quelle valeur comprise entre -360 et +360 (inclus), suivie des lettres « deg » (90deg, par exemple). La valeur 0deg représente le point situé directement en face de l'auditeur. Pour définir l'angle vers la gauche de l'auditeur, vous pouvez utiliser la valeur -90deg ou 270deg. Vous pouvez également choisir une valeur Constante_d'angle dans une vaste bibliothèque de descriptions correspondant à des points fixes autour du cercle. Si vous ajoutez le modificateur behind, les valeurs ne désignent plus les points situés en face de l'auditeur, mais derrière lui.
Valeur | Equivaut à | Valeur | Equivaut à
center | 0deg | center behind | 180deg
center-right | 20deg | center-right behind | 160deg
right | 40deg | right behind | 140deg
far-right | 60deg | far-right behind | 120deg
right-side | 90deg | right-side behind | 90deg
left-side | 270deg | left-side behind | 270deg
far-left | 300deg | far-left behind | 240deg
left | 320deg | left behind | 220deg
center-left | 340deg | center-left behind | 200deg
Pour la valeur de direction, vous avez le choix entre deux constantes : leftwards | rightwards. Ces valeurs déplacent le son de 20 degrés dans la direction indiquée.
Valeur initiale
center
Exemple
H1 {azimuth: 45deg}
P.aside {azimuth: center-right behind}
S'applique à
Tous les éléments.


!important | NN s.o. IE 4 CSS 1
 | Hérité : non
Augmente l'importance d'une valeur d'attribut dans l'ordre de cascade. Ce mot-clé est une déclaration pouvant être associée à n'importe quelle valeur d'attribut. La syntaxe exige un point d'exclamation entre la valeur de l'attribut et le mot-clé important. Le point d'exclamation peut être précédé et suivi d'espaces blancs supplémentaires. Voir .
Syntaxe CSS !important
Valeur Aucune valeur n'est affectée à cette déclaration.
Exemple P {font-size: 14pt ! important}
S'applique à Tous les éléments.


background-attachment NN s.o. IE 4 CSS 1
Hérité : non

L'attribut background-attachment permet, lorsque vous appliquez une image d'arrière-plan à un élément (à l'aide de l'attribut background-image), de définir la façon dont l'image se comportera par rapport au document. L'image peut soit rester fixe dans la zone visible de l'élément, soit défiler avec l'élément lorsque vous faites défiler le document. Lorsque l'image d'arrière-plan est fixe, le contenu défile sur cette image comme un générique de film défile sur un écran de cinéma ou de télévision.

Syntaxe CSS
background-attachment: fixed | scroll
Valeur
Si vous spécifiez la valeur fixed, l'image restera fixe dans la zone visible de l'élément ; si vous spécifiez la valeur scroll, l'image défilera en même temps que le contenu du document.
Valeur initiale
scroll
Exemple
BODY {background-attachment: fixed}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.backgroundAttachment


background-color NN 4 IE 4 CSS 1
Hérité : non

Définit la couleur d'arrière-plan de l'élément. Il peut sembler que l'attribut background-color d'un élément imbriqué est hérité ; en réalité la valeur initiale est « transparent », c'est-à-dire que la couleur de l'élément parent coloré immédiat est visible à travers l'espace blanc de l'élément actuel.

Syntaxe CSS
background-color: couleur
Équivalent JavaScript
backgroundColor
Valeur
Toute spécification de couleur valide (voir description en début de chapitre) ou transparent.
Valeur initiale
transparent
Exemple
.highlighter {background-color: yellow}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.backgroundColor


background-image NN 4 IE 4 CSS 1
Hérité : non

Définit l'image d'arrière-plan à associer (le cas échéant) à l'élément. Si vous définissez également une couleur d'arrière-plan (background-color) pour l'élément, celle-ci s'affiche en cas d'échec de chargement de l'image ; sinon, l'image se superpose à la couleur. Dans ce cas, la couleur est visible à travers les pixels transparents de l'image. Voir aussi l'attribut background-attachment.

Syntaxe CSS
background-image: uri | none
Equivalent JavaScript
backgroundImage
Valeur
Pour spécifier une adresse URL (Universal Resource Locator), utilisez l'instruction url(), en indiquant la valeur de l'attribut entre les parenthèses. Pour empêcher le chargement d'une image dans l'arrière-plan de l'élément, vous pouvez omettre l'attribut ou spécifier la valeur none.
Valeur initiale
none
Exemple
H1 {background-image: url(watermark.jpg)}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.backgroundImage


background-position NN s.o. IE 4 CSS 2
Hérité : non

Définit l'emplacement du bord gauche et du bord supérieur de l'image d'arrière-plan spécifiée à l'aide de l'attribut background-image. Cet attribut se comporte de façon irrégulière dans Internet Explorer 4 pour Macintosh.

Syntaxe CSS
background-position: [pourcentage | longueur] {1,2} | [top |center |bottom] ||[left | center | right]
Valeur
Vous pouvez spécifier un ou deux pourcentages, chacun représentant le pourcentage de la largeur et de la hauteur (respectivement) du cadre de l'élément de bloc au niveau duquel l'image (ou les images répétées) doivent commencer. Si vous n'indiquez qu'un seul pourcentage, celui-ci s'applique à la mesure horizontale et la mesure verticale est automatiquement fixée à 50 %. Au lieu d'un pourcentage, vous pouvez spécifier une longueur (exprimée dans l'unité de mesure la mieux adaptée au support). Vous pouvez aussi combiner un pourcentage et une longueur. Au lieu des valeurs numériques, vous pouvez créer des combinaisons de valeurs prises dans les deux jeux de valeurs constantes. Sélectionnez-en une dans chaque jeu, par exemple top left, top right ou bottom center. Lorsque vous spécifiez deux valeurs, vous devez les séparer par un espace.
Valeur initiale
0%
Exemple
DIV.marked {background-image: url(watermark.jpg);
background-position: center top}
S'applique à
Éléments de niveau bloc et éléments remplacés.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.backgroundPosition


background-repeat NN s.o. IE 4 CSS 1
Hérité : non

Détermine si une image d'arrière-plan (spécifiée à l'aide de l'attribut background-image) doit être répétée, et si oui, le long de quels axes. Vous pouvez utiliser la fonction de répétition d'images d'arrière-plan pour créer des bandes horizontales et verticales.

Syntaxe CSS
background-repeat: no-repeat | repeat | repeat-x | repeat-y
Valeur
Avec la valeur no-repeat, une instance de l'image apparaît dans l'élément à l'emplacement défini par l'attribut background-position (par défaut, dans l'angle supérieur gauche). L'image est normalement répétée sur les des deux axes, mais vous pouvez la faire répéter simplement le long d'une colonne (repeat-y) ou le long d'une ligne (repeat-x).
Valeur initiale
repeat
Exemple
BODY {background-image: url(icon.gif); background-repeat: repeat-y}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.backgroundRepeat


Exemple
background NN s.o. IE 4 CSS 1
Hérité : non

Forme courte d'attribut permettant de définir, à l'aide d'une seule instruction, cinq attributs de style d'arrière-plan distincts (mais apparentés). Les valeurs de cet attribut peuvent être spécifiées dans n'importe quel ordre et doivent être séparées par des espaces. Bien que cet attribut ne soit pas officiellement disponible dans Navigator 4, il peut fonctionner avec certaines combinaisons de valeurs. Il est très pratique ; n'hésitez donc pas à l'utiliser.

Syntaxe CSS
background: background-attachment || background-color || background-image || background-position || background-repeat
Valeur
Toute combinaison des cinq valeurs d'attribut de style possibles, dans n'importe quel ordre. Tout attribut qui n'est pas explicitement défini adopte sa valeur initiale. Pour plus de détails sur les valeurs possibles de chaque attribut, voir la section consacrée à ce dernier.
Valeur initiale
Aucune.
Exemple
BODY {background: url(watermark.jpg) repeat fixed}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.background


border-bottom-color, border-left-color, border-right-color, border-top-color NN s.o. IE 4 CSS 2
Hérité : non

Chacun de ces attributs permet de définir la couleur d'un côté individuel de la bordure d'un élément. Veillez à ne pas abuser de cette fonction en mélangeant des couleurs qui ne vont pas ensemble. Pour définir la couleur de plusieurs côtés d'une bordure à l'aide d'une seule instruction, voir l'attribut border-color.

Syntaxe CSS
border-bottom-color: couleur border-left-color: couleur border-right-color: couleur border-top-color: couleur
Valeur
Pour plus de détails sur la valeur de couleur, voir la section consacrée aux couleurs, au début du présent chapitre.
Valeur initiale
Aucune.
Exemple
P {border-bottom-color: gray}
DIV {border-left-color: #33c088}
P.special {border-right-color: rgb(150, 75, 0)}
H3 {border-top-color: rgb(100%, 50%, 21%)}
S'applique à
Tous les éléments (CSS) ; éléments de niveau bloc et éléments remplacés (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.borderBottomColor
[window.]document.all.IDélément.style.borderLeftColor
[window.]document.all.IDélément.style.borderRightColor
[window.]document.all.IDélément.style.borderTopColor


border-bottom-style, border-left-style, border-right-style, border-top-style NN s.o. IE 4 CSS 2
Hérité : non

Chacun de ces attributs définit le style de ligne à appliquer à un côté individuel de la bordure d'un élément. Un attribut de style définissant un côté spécifique d'une bordure a priorité sur un attribut global définissant les quatre côtés à la fois (tel que border ou border-style) ; il faut toutefois que l'attribut spécifique apparaisse après l'attribut dans la règle de style global (dans l'ordre du code source). Pour définir le style de plusieurs côtés d'une bordure à l'aide d'une seule instruction, voir l'attribut border-style.

Syntaxe CSS
border-bottom-style: style border-left-style: style border-right-style: style border-top-style: style
Valeur
Les valeurs de style sont des constantes associées à des méthodes spécifiques d'affichage des bordures. Les navigateurs ne reconnaissent pas tous la totalité des valeurs des recommandations CSS. Les valeurs de style prises en charge sont les suivantes :
Valeur | NN | IE | CSS
dashed | - | Bien que les bordures en pointillés ne soient pas officiellement prises en charge par Internet Explorer 4, la version Macintosh les reproduit fidèlement ; par contre, la version Windows les affiche sous la forme de bordures pleines. | 1
dotted | - |  | 1
double | 4 | 4 | 1
groove | 4 | 4 | 1
hidden | - | - | 2
inset | 4 | 4 | 1
none | 4 | 4 | 1
outset | 4 | 4 | 1
ridge | 4 | 4 | 1
solid | 4 | 4 | 1
La façon précise dont les navigateurs interprètent les définitions des valeurs de style est loin d'être universelle. récapitule les styles affichés dans les versions Windows et Macintosh de Navigator 4 et d'Internet Explorer 4. Ne vous attendez pas à une représentation identique dans tous les navigateurs.
Valeur initiale
none
Exemple
P {border-style: solid; border-bottom-style: none}
DIV {border-left-style: ridge}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.borderBottomStyle
[window.]document.all.IDélément.style.borderLeftStyle
[window.]document.all.IDélément.style.borderRightStyle
[window.]document.all.IDélément.style.borderTopStyle


border-bottom-width, border-left-width, border-right-width, border-top-width NN 4 IE 4 CSS 1
Hérité : non

Chacun de ces attributs définit la largeur à appliquer à un côté de la bordure d'un élément. Notez que dans Navigator, la valeur initiale de chaque attribut est zéro ; cela signifie que pour que la bordure entière soit visible dans Navigator, vous devez définir la largeur de chaque côté de la bordure. Voir l'attribut border-width pour définir la largeur de plusieurs côtés de la bordure à l'aide d'une seule instruction.

Syntaxe CSS
border-bottom-width: thin | medium | thick | length border-left-width: thin | medium | thick | length border-right-width: thin | medium | thick | length border-top-width: thin | medium | thick | length
Equivalent JavaScript
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
Valeur
Trois constantes, thin | medium | thick, permettent au navigateur de définir le nombre exact de pixels à utiliser pour afficher la bordure. Pour une plus grande précision, vous pouvez spécifier une longueur (pour en savoir plus sur les valeurs de longueur, reportez-vous au début du présent chapitre).
Valeur initiale
medium (IE) ; 0 (NN).
Exemple
H2 {border-bottom-width: 2px}
DIV {border-left-width: thin}
P.special {border-right-width: 0.5em}
S'applique à
Tous les éléments (CSS) ; éléments de niveau bloc et éléments remplacés (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.borderBottomWidth
[window.]document.all.IDélément.style.borderLeftWidth
[window.]document.all.IDélément.style.borderRightWidth
[window.]document.all.IDélément.style.borderTopWidth


border-bottom, border-left, border-right, border-top NN s.o. IE 4 CSS 1
Hérité : non

Ces quatre attributs permettent de définir, à l'aide d'une seule instruction, la largeur, le style et/ou la couleur d'un côté individuel de la bordure d'un élément. Tout attribut qui n'est pas explicitement défini adopte sa valeur initiale.

Syntaxe CSS
border-bottom: border-bottom-width || border-bottom-style || color border-left: border-left-width || border-left-style || color border-right: border-right-width || border-right-style || color border-top: border-top-width || border-top-style || color
Valeur
Pour en savoir plus sur les valeurs des attributs largeur et style, reportez-vous à la description des attributs border-bottom-width et border-bottom-style, dans le présent chapitre. Pour plus de détails sur l'attribut color, voir la section consacrée aux couleurs, au début du présent chapitre.
Valeur initiale
Aucune.
Exemple
P {border-bottom: solid lightgreen 3px}
P {border-left: solid lightgreen 6px}
P {border-right: solid lightgreen 3px}
P {border-top: solid lightgreen 6px}
S'applique à
Tous les éléments (CSS) ; éléments de niveau bloc et éléments remplacés (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.borderBottom
[window.]document.all.IDélément.style.borderLeft
[window.]document.all.IDélément.style.borderRight
[window.]document.all.IDélément.style.borderTop


border-collapse | NN s.o. IE s.o. CSS 2
 | Hérité : non
Détermine si les bordures des éléments de tableau adjacents (cellules, groupes de lignes, groupes de colonnes) doivent être affichées séparément ou fusionnées en ignorant les remplissages ou les marges éventuelles entre les bordures adjacentes.
Syntaxe CSS border-collapse: collapse | separate
Valeur Constantes : collapse | separate
Valeur initiale separate
S'applique à Éléments de tableau.


border-color NN 4 IE 4 CSS 1
Hérité : non

Forme courte d'attribut permettant d'appliquer à plusieurs côtés d'une bordure la même couleur ou une couleur différente. Navigator 4 n'autorise qu'une seule valeur, laquelle est appliquée aux quatre côtés de la bordure. Internet Explorer (et la spécification CSS) acceptent jusqu'à quatre valeurs séparées par des espaces. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ces valeurs doivent être appliquées.

Syntaxe CSS
border-color: color {1,4}
Equivalent JavaScript
borderColor
Valeur
Dans Navigator, une seule valeur de couleur est possible. Dans Internet Explorer, l'attribut accepte une, deux, trois ou quatre valeurs color, selon le nombre de côtés et les côtés spécifiques auxquelles vous souhaitez appliquer les couleurs. Les valeurs spécifiées sont interprétées de la façon suivante :
Nombre de valeurs | Effet
1 | La valeur spécifiée est appliquée aux quatre côtés de la bordure.
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale
La propriété color de l'élément.
Exemple
H2 {border-color: red blue red}
DIV {border-color: red rgb(0,0,255) red}
S'applique à
Tous les éléments (CSS) ; éléments de niveau bloc et éléments remplacés (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.borderColor


border-style NN 4 IE 4 CSS 1
Hérité : non

Forme courte d'attribut permettant d'appliquer à plusieurs côtés d'une bordure le même style ou un style différent. Navigator 4 n'autorise qu'une seule valeur, laquelle est appliquée aux quatre côtés de la bordure. Internet Explorer (et la spécification CSS) acceptent jusqu'à quatre valeurs séparées par des espaces. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ces valeurs doivent être appliquées.

Syntaxe CSS
border-style: borderStyle {1,4}
Equivalent JavaScript
borderStyle
Valeur
Les valeurs de style sont des constantes associées à des méthodes spécifiques d'affichage des bordures. Tous les navigateurs ne reconnaissent pas l'ensemble des valeurs de la recommandation CSS. Les valeurs de style de bordure prises en charge sont les suivantes :
Valeur | NN | IE | CSS
dashed | - | -* | 1
dotted | - | -* | 1
double | 4 | 4 | 1
groove | 4 | 4 | 1
hidden | - | - | 2
inset | 4 | 4 | 1
none | 4 | 4 | 1
outset | 4 | 4 | 1
ridge | 4 | 4 | 1
solid | 4 | 4 | 1
*Bien que les bordures en pointillés ne soient pas officiellement prises en charge par Internet Explorer 4, la version Macintosh les reproduit fidèlement ; par contre, la version Windows les affiche sous la forme de bordures pleines.

La façon précise dont les navigateurs interprètent les définitions des valeurs de style est loin d'être universelle. La Figure 10-1 offre un récapitulatif des styles affichés dans les versions Windows et Macintosh de Navigator 4 et d'Internet Explorer 4. Ne vous attendez pas à une représentation identique dans tous les navigateurs. Dans Navigator, vous ne pouvez appliquer qu'une seule valeur de style. Dans Internet Explorer, cet attribut accepte une, deux, trois ou quatre valeurs borderStyle, selon le nombre de bordures et les bordures spécifiques auxquelles vous souhaitez appliquer les styles. Les valeurs spécifiées sont interprétées de la façon suivante :

Nombre de valeurs | Effet
1 | La valeur spécifiée est appliquée aux quatre côtés de la bordure.
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale
none
Exemple
H1 {border-style: ridge; border-width: 3px}
DIV {border-style: solid double; border-width: 4px}
S'applique à
Tous les éléments (CSS) ; éléments de niveau bloc et éléments remplacés (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.borderStyle


border-width NN 4 IE 4 CSS 1
Hérité : non

Forme courte d'attribut permettant d'appliquer à plusieurs côtés d'une bordure la même largeur ou une largeur différente. Dans les deux navigateurs, vous pouvez spécifier entre une et quatre largeurs, séparées par des espaces. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ces valeurs doivent être appliquées.

Syntaxe CSS
border-width: thin | medium | thick | length {1,4}
Equivalent JavaScript
borderWidths()
Valeur
Trois constantes, thin | medium | thick, permettent au navigateur de définir le nombre exact de pixels à utiliser pour afficher la bordure. Pour une plus grande précision, vous pouvez spécifier une longueur (pour en savoir plus sur les valeurs de longueur, reportez-vous au début du présent chapitre). Cet attribut accepte une, deux, trois ou quatre valeurs de borderWidth, selon le nombre de côtés et les côtés spécifiques auxquels vous souhaitez appliquer les styles. Les valeurs spécifiées sont interprétées de la façon suivante :
Nombre de valeurs | Effet
1 | La valeur spécifiée est appliquée aux quatre côtés de la bordure.
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale
medium (IE); 0 (NN)
Exemple
H1 {border-style: ridge; border-width: 3px 5px 3px}
DIV {border-style: solid double; border-width: 4px}
S'applique à
Tous les éléments (CSS) ; éléments de niveau bloc et éléments remplacés (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.borderStyle


border NN s.o. IE 4 CSS 1
Hérité : non

Forme courte d'attribut permettant de définir, à l'aide d'une seule instruction, la largeur, le style et/ou la couleur des quatre côtés de la bordure d'un élément. Tout attribut qui n'est pas explicitement défini à l'aide de cet attribut adopte sa valeur initiale. Si vous ne voulez pas définir quatre côtés identiques, vous disposez de nombreux autres attributs permettant de définir individuellement la largeur, le style et la couleur d'un ou de plusieurs côtés.

Le comportement par défaut des navigateurs en matière de bordures étant différent, chaque règle de style relative à une bordure (border) doit inclure les paramètres de largeur et de style. Si l'un ou l'autre de ces paramètres n'est pas spécifié, la bordure risque de ne pas être visible dans l'un ou l'autre navigateur.

Syntaxe CSS
border: border-width (largeur_bordure) || border-style (style_bordure) || color (couleur)
Valeur
Pour en savoir plus sur les valeurs des attributs border-width et border-style, reportez-vous à la description de ces attributs dans le présent chapitre. Pour plus de détails sur la valeur de l'attribut color, voir la section consacrée aux couleurs, au début du présent chapitre.
Valeur initiale
Aucune.
Exemple
P {border: groove darkred 3px}
S'applique à
Tous les éléments (CSS) ; éléments de niveau bloc et éléments remplacés (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.border


bottom | NN s.o. IE s.o. CSS 2
 | Hérité : non
Pour les éléments positionnables, définit la position du bord inférieur du contenu d'un élément (sans compter les bordures et/ou les marges) par rapport au bord inférieur du conteneur parent immédiat. Dans le cas d'un élément à positionnement absolu, le décalage prend la place de la marge inférieure (notez qu'il est quand même possible d'appliquer un remplissage). Dans le cas d'un élément à positionnement relatif, le décalage est calculé par rapport au côté inférieur de l'emplacement où l'élément devrait normalement apparaître.
Syntaxe CSS bottom: length | percentage | auto
Valeur Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur. Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la hauteur du conteneur parent immédiat. Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage vertical inférieur de l'élément par rapport à sa position naturelle dans le cadre destiné à le recevoir.
Valeur initiale auto
S'applique à Tous les éléments.


caption-side | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Positionne l'élément CAPTION au dessus ou au dessus du contenu de tableau de l'élément TABLE qui l'englobe. Cet attribut remplace certaines valeurs dépréciées de l'attribut ALIGN de l'élément CAPTION.
Syntaxe CSS caption-side: top | bottom
Valeur L'une des deux constantes suivantes : top | bottom.
Valeur initiale top
S'applique à Éléments CAPTION.


cell-spacing | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Détermine l'espacement (le cas échéant) entre les bordures des cellules d'un tableau. Cet attribut exige que l'attribut d'affichage soit paramétré comme table. Si vous ne spécifiez qu'une seule valeur de longueur, celle-ci est appliquée à l'espacement horizontal et vertical entre les cellules ; si vous spécifiez deux valeurs, la première est appliquée à l'espacement horizontal et la seconde à l'espacement vertical. Voir pour un récapitulatif des définitions de dimensions de tableau.
Syntaxe CSS cell-spacing: length[length] | none
Valeur Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. La valeur none s'applique à l'espacement vertical et horizontal entre les cellules. Si vous ne voulez pas d'espacement le long d'un axe, spécifiez la valeur zéro.
Valeur initiale Aucune.
S'applique à Tous les éléments.


clear NN 4 IE 4 CSS 1
Hérité : non

Détermine si l'élément peut être affiché dans la même bande horizontale qu'un élément flottant, tel qu'une image. Généralement, l'attribut de style float d'un autre élément avoisinant est paramétré sur left ou right. Pour empêcher l'élément actuel d'être affiché dans la même bande que le bloc flottant, paramétrez l'attribut clear sur le même côté (left ou right). Si vous ne savez pas avec certitude à quel endroit le chevauchement potentiel risque de se produire, paramétrez l'attribut clear sur both. Un élément dont l'attribut clear est paramétré sur une valeur autre que none est affiché au début de la première ligne disponible sous l'élément flottant.

Syntaxe CSS
clear: both | left | none | right
Equivalent JavaScript
clear
Valeur
L'une des constantes suivantes : both | left | none | right
Valeur initiale
Aucune.
Exemple
<IMG SRC="logo.gif" HEIGHT=40 WIDTH=60 STYLE="float: right">
<H1 STYLE="clear: right">Giantco Corporation</H1>
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.clear


clip NN 4 IE 4 CSS 2
Hérité : non

Définit une zone de détourage d'un élément positionnable. La zone de détourage est la zone du calque de l'élément dans laquelle apparaît le contenu. Pour obtenir les meilleurs résultats possibles, placez l'élément destiné à recevoir le contenu dans un élément DIV dont l'attribut clip définit la zone de détourage souhaitée. Il peut arriver que le détourage ne fonctionne pas bien dans Internet Explorer 4 pour Macintosh. De même, lorsqu'un élément détouré est affiché tout en bas d'une page dans Navigator 4, il se peut que la fenêtre du navigateur ne vous permette pas de faire défiler la page jusqu'au bas de la zone de détourage.

Syntaxe CSS
clip: rect(lengthTop lengthRight lengthBottom lengthLeft) | auto
Equivalent JavaScript
clip.bottom
clip.left
clip.right
clip.top
Valeur
Pour CSS2, la seule forme reconnue de l'attribut clip est rect. Il se peut que d'autres formes soient admises à l'avenir. Lorsque vous spécifiez les longueurs des côtés de la zone de détourage, suivez toujours l'ordre suivant : top, right, bottom, left. Reportez-vous au début du présent chapitre pour en savoir plus sur les valeurs de longueur. La valeur auto aligne la zone de détourage sur le bloc qui contient le contenu. Dans Navigator, ce bloc s'aligne sur la largeur et la hauteur du contenu disponible ; dans Internet Explorer, la largeur peut s'aligner sur la largeur du conteneur parent immédiat (tel que l'élément BODY).
Valeur initiale
auto
Exemple
<SPAN STYLE="position: absolute; clip: rect(10px 110px 80px 10px)">
<IMG SRC="desk1.gif" HEIGHT=90 WIDTH=120>
</SPAN>
S'applique à
Tout élément à positionnement absolu (position:absolute).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.clip


color NN 4 IE 4 CSS 1
Hérité : oui

Définit la couleur du texte affiché au premier-plan de l'élément. Pour certains éléments de type graphique, tels que les contrôles de formulaire, l'attribut color peut également être appliqué aux bordures, ou autres parties, d'un élément. Ce type de comportement varie en fonction du navigateur.

Syntaxe CSS
color: color
Equivalent JavaScript
color
Valeur
Pour plus de détails sur les valeurs de l'attribut color, voir le début du présent chapitre.
Valeur initiale
black
Exemple
TH {color: darkred}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.color


column-span | NN s.o. IE s.o. CSS 2
 | Hérité : non
Définit le nombre de colonnes que doit occuper une cellule, une colonne ou un groupe de colonnes de tableau. Similaire à l'attribut COLSPAN d'un élément TD or TH et à l'attribut SPAN d'un élément COL ou COLGROUP.
Syntaxe CSS column-span: integer
Valeur N'importe quel entier positif représentant le nombre de colonnes souhaité.
Valeur initiale 1
Exemple #divider {column-span: 5}
S'applique à Éléments TD, TH, COL et COLGROUP et tout autre élément de type cellule, colonne ou groupe de colonnes.


content NN s.o. IE s.o. CSS 2
Hérité : non

Notez que nous ne disposons encore que d'informations préliminaires sur cet attribut. Celui-ci définit le contenu ou la source du contenu à afficher avant et/ou l'élément actuel. Cet attribut ne se définit que lorsque les pseudo-éléments :before et :after sont associés à un élément réel. Par exemple, dans la règle de style suivante :

BLOCKQUOTE:before, BLOCKQUOTE:after { content: "<HR STYLE=\"align: middle; width: 50%\">"}

un filet horizontal est tracé avant et après chaque élément BLOCKQUOTE. Dans cet exemple, le contenu est une chaîne de texte affichée sous forme d'HTML. Selon le cas, il est possible d'associer un document externe à l'attribut content.

Syntaxe CSS
content: string | uri | counter+
Valeur
Pour une chaîne (string), un texte quelconque entre guillemets. Les guillemets internes doivent être précédés d'une barre oblique inversée (\"). Pour un URI (Universal Resource Identifier), une adresse URL complète ou relative. (Aucune information sur la valeur counter et sur les futurs types de valeurs prévues n'est encore disponible.)
Valeur initiale
"" (chaîne vide)
Exemple
BODY:before {content: header.htm}
S'applique à
Tous les éléments accompagnés des pseudo-éléments :before et/ou :after.


cue-after, cue-before | NN s.o. IE s.o. CSS 2
 | Hérité : non
Pour les feuilles de style audio uniquement, un « cue » est un son (ou icône auditive) pouvant être utilisé pour délimiter la lecture du contenu d'un document. Les attributs cue-before et cue-after sont les adresses URI (Universal Resource Identifier) de fichiers son devant être joués avant et après la restititution du contenu (par synthèse vocale ou au moyen d'un support audio quelconque).
Syntaxe CSS cue-after: uri | none cue-before: uri | none
Valeur Adresse URL complète ou relative d'un fichier son dont le type MIME est prise en charge par le navigateur. Vous pouvez appliquer la même valeur aux deux attributs à l'intérieur du même sélecteur.
Valeur initiale Aucune
Exemple LI {cue-before: url(ding.wav); cue-after(dong.wav)}
S'applique à Tous les éléments.


cue | NN s.o. IE s.o. CSS 2
 | Hérité : non
Pour les feuilles de style audio uniquement, forme courte d'attribut permettant de définir les attributs cue-before et cue-after. Un « cue » est un son (ou icône auditive) pouvant être utilisé pour délimiter la lecture du contenu d'un document. Les valeurs de l'attribut cue sont des adresses URI (Univeral Resource Identifier) correspondant à des ressources sonores.
Syntaxe CSS cue: cue-before || cue-after
Valeur Si vous spécifiez deux valeurs, la première est appliquée à l'attribut cue-before et la seconde à l'attribut cue-after. Si vous spécifiez une seule valeur, la même icône auditive est appliquée à cue-before et à cue-after.
Valeur initiale Aucune.
S'applique à Tous les éléments.


cursor | NN s.o. IE 4 CSS 2
 | Hérité : oui
Définit la forme que doit avoir le curseur lorsque le pointeur de la souris pointe sur l'élément. L'apparence précise des curseurs dépend du système d'exploitation. Avant de modifier la forme d'un curseur, examinez les curseurs standard utilisés par le navigateur et le système d'exploitation. En effet, les utilisateurs s'attendent à ce qu'une forme de curseur ait la même signification dans toutes les applications.
Syntaxe CSS cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | s-resize | se-resize | sw-resize | text | w-resize || wait || uri
Valeur L'une des constantes de forme de curseur ci-dessus. Notez que le document de travail CSS définit la valeur pointer du curseur pointant vers une valeur de lien, alors qu'Internet Explorer 4 implémente cette valeur sous la forme hand (main). Bien qu'elle ne soit pas prise en charge dans Internet Explorer 4, la valeur URI (définie dans les spécifications CSS2) indique la possibilité d'une prise en charge future d'un curseur téléchargeable. Cela suppose que les navigateurs admettront un format de fichier uniforme sur l'ensemble des systèmes d'exploitation.
Valeur initiale auto
Exemple A.helpLink {cursor: help}
S'applique à Tous les éléments.


Bienvenue sur le panneau de référence. Ce panneau fournit des informations de référence sur HTML, JavaScript et CSS.

Pour obtenir des informations de référence sur la sélection actuelle en mode d'affichage Code, assurez-vous que la coloration de syntaxe est activée, puis sélectionnez l'un des éléments suivants :
  • bouton Référence de la barre d'outils
  • ? > Référence (MAJ+F1)
  • Fenêtre > Référence (MAJ+F10)


direction | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Définit le sens d'affichage des éléments de contenu incorporés (texte ou autre) et l'ordre de remplissage des cellules de tableau sur une ligne. Similaire à l'attribut DIR de la plupart des éléments, l'attribut de style direction permet d'annuler et de redéfinir le sens d'affichage par défaut pour d'autres langues ou des contenus spéciaux.
Syntaxe CSS direction: ltr | rtl | ltr-override | rtl-override
Valeur L'une des quatre constantes ci-dessus. La valeur ltr signifie left-to-right (de gauche à droite), la valeur rtl right-to-left (de droite à gauche). Les valeurs de l'attribut override vous permettent d'annuler le sens spécifié par le navigateur en conformité avec un algorithme bidirectionnel Unicode standard.
Valeur initiale rtl
S'applique à Tous les éléments.


display NN 4 IE 4 CSS 1
Hérité : Non

Attribut multi-usages qui détermine si l'élément doit être affiché dans le document (et si un espace doit lui être réservé dans le contenu). Si l'élément doit être affiché, l'attribut détermine de quel type d'élément (de bloc ou incorporé) il s'agit. La liste des valeurs reconnues par Navigator 4 et Internet Explorer 4 (et CSS1) est relativement courte : block | inline | list-style | none, pourtant, aucun des navigateurs ne modifie l'affichage de l'élément avec des valeurs autres que none. Dans CSS2, cette liste est sensiblement plus longue. Lorsque l'attribut a pour valeur none, l'élément est masqué et tous les contenus avoisinants sont redimensionnés pour remplir l'espace qu'occuperait normalement l'élément. Ceci est à distinguer de l'attribut visibility qui réserve un espace pour l'élément, même si ce dernier n'est pas affiché.

Syntaxe CSS
display TypeAffichage
Equivalent JavaScript
display
Valeur
L'une des constantes suivantes : block | compact | inline | inline-table | list-style | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group.
Valeur initiale
inline
Exemple
hidden {display: none}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.display


elevation NN s.o. IE s.o. CSS 2
Hérité : oui

Si une personne se trouve au centre d'un espace sonore circulaire (tel qu'une salle équipée d'un système Surround Sound), l'attribut elevation définit l'angle vertical de la source du son (sur un navigateur à synthèse vocale, par exemple). Voir aussi l'attribut azimuth.

Syntaxe CSS
elevation: angle | angleConstant
Valeur
Soit une valeur d'angle spécifique (exprimée en degrés), soit l'une des cinq constantes disponibles. La valeur d'angle peut être n'importe quelle valeur comprise entre -90 et +90 (inclus), suivie des lettres « deg » (90deg, par exemple). La valeur 0deg correspond à un point situé au niveau des oreilles de l'auditeur. Pour définir un angle au dessus de ce niveau, vous devez spécifier une valeur positive (45deg), pour un angle au dessous de ce niveau, une valeur négative (-45deg). Vous pouvez également choisir une valeur angleConstant dans une vaste bibliothèque de descriptions correspondant à des points fixes autour du cercle.
Valeur | Equivaut à
above | 90deg (directement au dessus)
below | -90deg (directement au dessous)
higher | +10 degrés du niveau actuel
level | 0deg (au niveau des oreilles de l'auditeur)
lower | -10 degrés du niveau actuel
En combinant cet attribut à l'attribut azimuth, vous pouvez placer un son à n'importe quel point d'une scène de Surround Sound sphérique.
Valeur initiale
level
Exemple
H1 {elevation: -45deg}
P.heavenly {elevation: above}
S'applique à
Tous les éléments.


filter NN s.o. IE 4 CSS s.o.
Hérité : non

Définit le filtre visuel, de transition ou de fondu à appliquer au contenu d'un élément. Un filtre visuel peut être appliqué à un élément pour produire des effets tels que retournement du contenu, néon, ombre portée et bien d'autres. Un filtre de transition agit sur la visibilité d'un élément. La valeur du filtre de transition détermine quel effet visuel doit être appliqué à la transition entre le masquage et l'affichage de l'élément (ou vice versa). Parmi les effets possibles, on peut citer l'effet de volet horizontal ou vertical. Un filtre de fondu détermine la vitesse de la transition entre deux états. Sachez qu'à dater du moment où ce document est écrit, l'attribut filter n'est plus disponible que dans Internet Explorer 4 , et ce uniquement dans la version Windows.

Syntaxe CSS
filter: filterType1(paramName1=value1, paramName2=value2,...) filterType2(paramName1=value1,...) ...
Valeur
Vous pouvez associer à chaque attribut filter plusieurs types de filtre, en les séparant par des espaces. Chaque type de filtre est suivi d'un couple de parenthèses permettant de définir les paramètres de comportement du filtre pour l'élément actuel. Un paramètre consiste généralement en un couple nom/valeur relié par le signe égale. Pour plus de détails sur les valeurs et les paramètres de l'attribut filterType, voir la section « Remarques ».
Valeur initiale
Aucune.
Exemple
fastStuff {filter: blur(add=true, direction=225)}
S'applique à
Éléments BODY, BUTTON, IMG, INPUT, MARQUEE, TABLE, TD, TEXTAREA, TFOOT, TH, THEAD, TR et éléments à positionnement absolu DIV and SPAN.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.filter


float NN 4 IE 4 CSS 1
Hérité : non

Précise de quel côté du conteneur l'élément doit s'aligner, déterminant ainsi le positionnement des autres contenus par rapport à l'élément. Si cet attribut a pour valeur none, l'élément apparaît dans le même ordre que dans le code source et une ligne de contenu textuel environnant, au plus, apparaît dans la même bande horizontale.

Il existe des incompatibilités dans la façon dont les navigateurs déploient l'attribut de style float, surtout pour les objets tels que les images. Si vous suivez le format CSS et que vous affectez l'attribut float à l'élément IMG, le positionnement du texte se fait généralement selon les règles Internet Explorer (surtout si le paramétrage est le suivant : float:left). Navigator 4, par contre, exige que l'élément IMG soit placé dans un élément DIV, ce dernier recevant l'attribut de style float (ainsi que les autres attributs de style, tels que ceux définissant les marges). Mais IE 4 réagit mal à cette combinaison. Pour l'instant, le meilleur moyen de contourner ce problème consiste à éviter les règles de style relatives aux éléments flottants et de s'en tenir à l'attribut ALIGN de la balise de l'élément IMG.

En raison de l'usage précédent du mot-clé float en JavaScript, la syntaxe JavaScript équivalente à l'attribut float est align. Les valeurs affectées sont toutefois identiques.

Syntaxe CSS
float: alignmentSide | none
Equivalent JavaScript
align
Valeur
La valeur alignmentSide peut être l'une des constantes suivantes : left | right | none.
Valeur initiale
none
Exemple
IMG.navButton {float: right}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.styleFloat


font-family NN 4 IE 4 CSS 1
Hérité : oui

Définit, sous forme de liste classée par ordre de préférence, la famille de polices à utiliser pour afficher le contenu. Vous pouvez inclure un ou plusieurs noms dans cette liste, en les séparant par des virgules. Si le nom d'une famille de polices est constitué de plusieurs mots, il doit être placé entre guillemets (pour obtenir un fonctionnement optimal de Navigator 4, il est d'ailleurs recommandé de placer tous les noms de police entre guillemets).

Une famille de polices peut comporter plusieurs variantes. Par exemple, une famille de polices Helvetica peut comporter une version Gras et une version Italique distinctes. Lorsque vous spécifiez une liste de noms de police, le navigateur vérifie si une police correspondant au premier nom de la liste est présente sur l'ordinateur client. Si ce n'est pas le cas, le navigateur passe au nom suivant de la liste. Par conséquent, il est conseillé de commencer la liste par le nom le plus spécialisé et de finir par le nom le plus générique. Le dernier nom de la liste doit être celui de la famille de polices générique (serif, sans-serif, cursive, fantasy ou monospace) la plus proche de la police souhaitée. En effet, de nombreuses polices disponibles sur un système d'exploitation peuvent ne pas l'être sur un autre système.

Les navigateurs conformes aux spécifications CSS2 doivent être en mesure de reconnaître les codes de caractères Unicode et d'y substituer des polices équivalentes prenant en charge des langues spécifiques. Cela permet à un navigateur de combiner, dans le même élément, des polices de langues et de systèmes d'écriture différents, du moment que chacune de ces polices est spécifiée dans la valeur de l'attribut.

Syntaxe CSS
font-family: fontFamilyName [, fontFamilyName [, ...]]
Equivalent JavaScript
fontFamily
Valeur
Nombre quelconque de noms de police, séparés par des virgules. Les noms constitués de plusieurs mots doivent être placés entre guillemets. Les noms de famille de polices génériques suivants sont reconnus : serif | sans-serif | cursive | fantasy | monospace.
Valeur initiale
Valeur par défaut du navigateur.
Exemple
BODY {font-family: "Century Schoolbook", Times, serif}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.fontFamily


font-size-adjust | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Permet à un élément de conserver, en cas de substitution de la police, la hauteur x (à savoir la hauteur mesurée en x) de la première police spécifiée dans la liste de polices à utiliser. Le facteur z est le rapport entre la hauteur du cadratin et la hauteur x d'une police. Des polices différentes, malgré une taille de caractères identique, peuvent paraître plus grandes ou plus petites que les polices avoisinantes, sur une page paramétrée sur la même taille ; le facteur z permet de calculer le rapport décrit plus haut et de l'appliquer aux autres polices afin d'en ajuster la taille. Même si la taille résultant de ce calcul est supérieure ou inférieure à celle de la première police spécifiée dans la liste, la taille perçue par l'oeil est nettement plus précise. Cela permet en outre d'égaliser les mesures horizontales des polices afin que les lignes soient coupées au même endroit, quelle que soit la police.
Syntaxe CSS font-size-adjust: z
Valeur L'une des constantes suivantes : z | none.
Valeur initiale none
S'applique à Tous les éléments.


font-size NN 4 IE 4 CSS 1
Hérité : Oui

Définit la taille de caractères de l'élément. Plusieurs méthodes sont disponibles. Un ensemble de constantes (xx-small, x-small, small, medium, large, x-large, xx-large) permet de définir des tailles dites absolues. En réalité, ces tailles ne sont absolues que pour un navigateur et un système d'exploitation donnés, car leur point de référence varie en fonction de ces derniers. Elles garantissent toutefois qu'un élément auquel est appliqué l'attribut large sera affiché en caractères plus grands qu'un élément auquel est appliqué l'attribut medium.

Un autre ensemble de constantes (larger, smaller) permet de définir des tailles dites relatives. Du fait que l'attribut font-size est hérité de l'élément parent, ces tailles relatives sont appliquées à l'élément parent pour déterminer la taille de caractères de l'élément actuel. C'est au navigateur de déterminer exactement de combien la taille de caractères doit être agrandie ou réduite et cela dépend en grande partie de la façon dont la taille de caractères de l'élément parent a été définie. Si elle a été définie à l'aide d'un attribut de taille absolue (large, par exemple) et que vous appliquez à l'élément enfant l'attribut larger, les caractères sont affichés dans la taille x-large du navigateur. Les incréments ne sont pas aussi nets lorsque la taille de caractères de l'élément parent est définie sous forme de longueur ou de pourcentage.

Si vous spécifiez une longueur pour l'attribut font-size, choisissez l'unité qui convient le mieux pour les polices, à savoir le point (pt) ou le cadratin (em). Ce dernier base ses calculs sur la taille de caractères de l'élément parent. Vous pouvez également définir l'attribut font-size sous forme de pourcentage, lequel sera calculé par rapport à la taille de caractères de l'élément parent.

Syntaxe CSS
font-size: absoluteSize | relativeSize | length | percentage
Equivalent JavaScript
fontSize
Valeur
Pour une taille de caractères absolue, l'un des constantes suivantes : xx-small | x-small | small | medium | large | x-large | xx-large. Pour une taille relative, l'une des constantes suivantes : larger | smaller. Reportez-vous au début du présent chapitre pour en savoir plus sur les valeurs de longueur (length). Pour un pourcentage, la valeur suivi du signe %.
Valeur initiale
medium (pour l'élément BODY) ; la valeur font-size de l'élément parent (pour tous les autres).
Exemple
BODY {font-size: 14pt}
P.teeny {font-size: x-small}
EM {font-size: larger}
SPAN.larger {font-size: 150%}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.fontSize


font-style NN 4 IE 4 CSS 1
Hérité : oui

Détermine si l'élément doit être affiché en caractères normaux (Roman), italiques ou obliques. Si, pour la famille de polices (font-family) spécifiée, des styles intitulés Italique et/ou Oblique sont présents dans le navigateur, l'attribut font-style utilise ces derniers pour afficher l'élément. Si ces styles de police spécialisés ne sont pas disponibles dans le système, la navigateur applique généralement un algorithme d'inclinaison à la police normale pour produire le style italique. La qualité des documents imprimés avec des styles de police générés électroniquement dépend de la qualité de l'interaction entre l'ordinateur client et l'imprimante. Bien que les logiciels pour PC offrent généralement différents styles de police, vous pouvez également jouer sur l'apparence des caractères à l'aide des attributs font-variant et font-weight.

Syntaxe CSS
font-style: fontStyle
Equivalent JavaScript
fontStyle
Valeur
Navigator 4 reconnaît les styles de police suivants : normal | italique. Internet Explorer 4 reconnaît les styles suivants : normal | italique | oblique mais interprète de la même façon italique et oblique, à savoir par « italique ».
Valeur initiale
Aucune.
Exemple
H2 EM {font-style: italic}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.fontStyle


font-variant NN s.o. IE 4 CSS 1
Hérité : oui

Détermine si l'élément doit être affiché tout en majuscules, les minuscules du code source étant affichées en majuscules plus petites. Si une famille de polices comprend une variante Petites capitales, le navigateur doit normalement utiliser cette dernière. Dans la plupart des cas, cependant, le navigateur affiche les minuscules du code source en majuscules de plus petite taille que les majuscules normales. En pratique, Internet Explorer 4 restitue le contenu intégral du code source sous forme de majuscules de même taille que la police de l'élément parent, quelle que soit la casse du code source.

Syntaxe CSS
font-variant: fontVariant
Valeur
L'une des constantes suivantes : normal | small-caps.
Valeur initiale
normal
Exemple
EM {font-variant: small-caps}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.fontVariant


font-weight NN 4 IE 4 CSS 1
Hérité : oui

Définit la graisse (épaisseur) de la police de caractères à appliquer à l'élément. Le système de classification des graisses CSS est extrêmement précis et si la plupart des navigateurs ne sont pas en mesure de reproduire à l'écran les graisses les plus subtiles, celles-ci se justifient lors de l'impression des contenus. Ce système utilise un échelle numérique allant de 100 à 900, par incréments de 100. Ainsi, 100 correspond à la graisse la plus fine pouvant être affichée et 900 à la plus épaisse. L'attribut normal (graisse par défaut de n'importe quelle police) équivaut à une valeur de graisse (font-weight) de 400 ; l'attribut standard bold (gras) équivaut à 700. Les autres attributs (bolder et lighter) vous permettent de spécifier une graisse relative à celle de l'élément parent.

La spécification CSS2 offre un guide des correspondances entre les graisses et les polices, ainsi que les caractéristiques internes de certains formats de définition de police. Par exemple, le format de la définition de police OpenType dispose de neuf emplacement pour les graisses. Dans ce cas, les valeurs numériques de l'attribut font-weight correspondent directement aux définitions de graisse de cette police. S'il existe, dans la famille de polices, une police dont le nom contient le mot Medium et une autre libellée Book, Regular, Roman ou Normal, une correspondance est automatiquement établie entre la police Medium et la graisse 500 (l'autre police correspondant à 400). Toutes les polices comportant le mot Bold se voient attribuer la valeur de graisse 700. Si une famille de polices ne dispose pas de la totalité des neuf graisses, le navigateur effectue la meilleure interpolation possible, mais il est fort probable que certaines valeurs de graisse génèrent des polices de même graisse.

Syntaxe CSS
font-weight: fontWeight
Equivalent JavaScript
fontWeight
Valeur
L'une des constantes suivantes : bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.
Valeur initiale
normal
Exemple
P EM {font-weight: bolder}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.fontWeight


font NN n/a IE 4 CSS 1
Hérité : oui

Forme courte d'attribut permettant de définir, à l'aide d'une seule instruction, un ou plusieurs attributs relatifs aux polices de caractères. Une liste de valeurs, séparées par des espaces (dans n'importe quel ordre), est appliquée à l'attribut de police spécifique pour lequel ce type de valeur est admis. Dans CSS2, des constantes supplémentaires permettent d'appliquer à chacun des attributs de police des polices système nommées dotées de valeurs fixes.

Syntaxe CSS
font: font-style || font-variant || font-weight || font-size || line-height || font-family | CSS2FontConstant
Valeur
Pour la syntaxe et des exemples de types de valeur applicables aux attributs de police et de ligne, voir la section consacrée à l'attribut en question. Les constantes de police CSS2 sont les suivantes : caption | icon | menu | messagebox | smallcaption | statusbar. Ces constantes désignent les polices du navigateur et du système d'exploitation utilisées par l'ordinateur client. Leur apparence précise varie par conséquent en fonction du système d'exploitation mais est conforme aux attentes de l'utilisateur pour un type particulier de police. Autrement dit, vous devez utiliser ces styles lorsque leur fonction reflète une fonction du système d'exploitation ou du navigateur.
Valeur initiale
Aucune.
Exemple
BODY {font: 12pt serif}
H2 {font: bolder small-caps 16pt}
.iconCaption {font: caption}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.font


height NN 4 IE 4 CSS 1
Hérité : non

Définit la hauteur d'un élément de niveau bloc (sans compter les bordures, le remplissage et les marges). Les navigateurs de la version 4 appliquent l'attribut height uniquement aux éléments sélectionnés (IE 4) et aux éléments à positionnement absolu (il faut donc placer les autres types d'éléments entre des balises DIV), mais CSS2 recommande également l'application de cet attribut à tous les éléments remplaçables.

Pour les éléments à positionnement absolu, Navigator 4 et Internet Explorer 4 réagissent différemment à l'attribut de style height. Ils s'accordent toutefois sur le point suivant : si le contenu exige une hauteur supérieure à celle qui est définie dans l'attribut height, les besoins du contenu ont priorité sur la valeur de l'attribut (au besoin, utilisez le rectangle de détourage pour réduire la hauteur de la zone d'affichage de l'élément). Mais si la valeur de l'attribut height génère un cadre dont la hauteur est supérieure aux besoins du contenu, les navigateurs réagissent différemment. Navigator adapte la hauteur du cadre au contenu (comme si l'attribut height était toujours paramétré sur auto), à moins que vous ne redimensionniez également le rectangle de détourage ; par contre, Internet Explorer conserve la valeur de l'attribut height. Cette différence de comportement peut avoir un effet sur l'apparence des bordures d'un élément à positionnement absolu généré à l'aide de la syntaxe CSS.

Syntaxe CSS
height: length | percentage | auto
Equivalent JavaScript
height
Valeur
Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la hauteur du conteneur parent immédiat. Si vous spécifiez la valeur auto, le navigateur détermine automatiquement la hauteur de l'élément en fonction de l'espace requis pour afficher son contenu.
Valeur initiale
auto
Exemple
DIV#announce {height: 240}
TEXTAREA {height: 90%}
S'applique à
Navigator 4 : tous les éléments à positionnement absolu Internet Explorer 4 : éléments APPLET, DIV, EMBED, FIELDSET, HR, IFRAME, IMG, INPUT, MARQUEE, OBJECT, SPAN, TABLE et TEXTAREA. CSS2 : tous les éléments sauf les éléments incorporés non remplacés, les éléments colonne de tableau et les éléments groupe de colonnes.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.height


left NN 4 IE 4 CSS 2
Hérité : non

Pour les éléments positionnables, définit la position du bord gauche du cadre d'un élément (contenu plus remplissage, bordure et/ou marge de gauche) par rapport au bord gauche du conteneur parent immédiat. Dans le cas d'un élément à positionnement relatif, le décalage est calculé par rapport au côté gauche de l'emplacement où l'élément devrait normalement apparaître.

Syntaxe CSS
left: length | percentage | auto
Equivalent JavaScript
left
Valeur
Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu dans chaque navigateur. Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la largeur du conteneur parent immédiat. Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage horizontal (à gauche) de l'élément par rapport à sa position naturelle dans le cadre destiné à le recevoir. Navigator a tendance à pousser le contenu tout contre le bord gauche du cadre, alors qu'Internet Explorer insère une petite marge.
Valeur initiale
auto
Exemple
H1 {position: relative; left: 2em}
#logo {position: absolute; left: 80px; top: 30px}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.offsetLeft


letter-spacing NN s.o. IE 4 CSS 1
Hérité : oui

Définit l'espacement entre les caractères à l'intérieur d'un élément. Les navigateurs définissent normalement l'interlettrage en fonction des définitions de police et de la méthode de restitution utilisée par le système d'exploitation. Pour annuler ces paramètres par défaut, il vous suffit d'affecter une valeur à l'attribut letter-spacing. Une valeur négative diminue l'interlettrage ; dans ce cas, n'oubliez pas de vérifier le résultat sur différents systèmes d'exploitation.

Syntaxe CSS
letter-spacing: normal | length | auto
Valeur
Pour en savoir plus sur les valeurs de longueur (length), voir le début du présent chapitre. Les meilleurs résultats sont obtenus avec des unités basées sur la taille de caractères affichée (em et ex). L'attribut normal correspond à l'interlettrage appliqué par le navigateur en l'absence d'intervention extérieure. L'attribut auto (CSS2) est prévu pour être utilisé avec les éléments d'une seule ligne (tels que H1). Il permet d'espacer les lettres de façon à ce que le contenu de l'élément apparaisse sur une seule ligne, quelle que soit la largeur du cadre destiné à le recevoir.
Valeur initiale
normal
Exemple
.tight {letter-spacing: -0.03em}
BLOCKQUOTE {letter-spacing: 1.1em}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.letterSpacing


line-height NN 4 IE 4 CSS 1
Hérité : oui

Définit la hauteur de la zone contenant une ligne physique du contenu. La hauteur de cette ligne est normalement déterminée par la hauteur de ligne (line-height) de la plus haute police d'une ligne de texte ou par la hauteur du plus haut objet. En théorie, vous pouvez définir la hauteur de ligne (line-height) d'un élément de niveau bloc et appliquer cette valeur à toutes les lignes du contenu, quelle que la police ou la taille de caractères spécifiée pour le contenu incorporé.

Dans la pratique, lorsque la taille de caractères (font-size) du texte incorporé est supérieure à celle du texte environnant, des problèmes d'interlignage peuvent survenir, dans Navigator 4 autant que dans Internet Explorer 4. En effet, toutes les lignes du bloc de texte environnant ne respectent pas la hauteur de ligne (line-height) spécifiée pour ce bloc (surtout les lignes apparaissant après le segment de texte en caractères plus grands). D'autre part, dans Navigator 4, l'attribut line-height ne traverse pas plus d'une génération si l'élément de seconde génération devient un élément de niveau bloc (tel qu'un élément positionné ou flottant). Il est recommandé de tester soigneusement ces paramètres jusqu'à l'obtention du résultat souhaité.

Syntaxe CSS
line-height: normal | number | length | percentage
Equivalent JavaScript
lineHeight
Valeur
Si vous spécifiez la valeur normal, le navigateur calcule automatiquement l'interlignage pour la totalité de l'élément, produisant une valeur dont peuvent hériter les éléments imbriqués. Si vous spécifiez un nombre (number) supérieur à zéro, celui-ci sert de multiplicateur et est appliqué à la taille de caractères de l'élément actuel. Par conséquent, si un élément imbriqué hérite du multiplicateur de hauteur de ligne (line-height) de ses parents, ce multiplicateur est appliqué à l'attribut font-size de l'élément actuel (c'est le multiplicateur qui est hérité, pas la valeur calculée du parent). Si vous spécifiez une longueur (length), celle-ci est appliquée à la hauteur de la zone de ligne. Si vous spécifiez un pourcentage (pourcetage), celui-ci sert de multiplicateur et est appliqué à la taille de caractères de l'élément actuel. Dans ce cas, les éléments imbriqués peuvent hériter de la valeur calculée.
Valeur initiale
normal
Exemple
P {line-height: normal} Browser default; actual value is inheritable

P {line-height: 1,1} Number value; the number value is inheritable

P {line-height: 1.1em} Length value; the actual value is inheritable

P {line-height: 110%} Percentage value; percentage times font size is inheritable
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.lineHeight


list-style-image NN s.o. IE 4 CSS 1
Hérité : oui

Spécifie l'adresse URL (Universal Resource Locator) d'une image à utiliser comme marqueur d'élément de liste. Cet attribut pouvant être hérité, sa valeur (y compris none) peut annuler et remplacer la valeur du même attribut dans le parent de l'élément de liste auquel il est appliqué.

Syntaxe CSS
list-style-image: none | uri
Valeur
La valeur none permet d'annuler une image associée à un élément parent. La valeur uri (Universal Resource Identifier) est l'adresse URL complète ou relative d'un fichier image dont le type MIME doit être lisible par le navigateur.
Valeur initiale
none
Exemple
UL {list-style-image: url(images/folder.gif)}
LI {list-style-image: none}
S'applique à
Éléments DD, DT, LI, OL et UL et tout autre élément doté de l'attribut de style display:list-item.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.listStyleImage


list-style-position NN s.o. IE 4 CSS 1
Hérité : oui

Détermine si le marqueur de liste doit être affiché à l'intérieur ou à l'extérieur (en retrait négatif) du bloc de contenu de l'élément de liste. Lorsque l'attribut list-style-position a pour valeur inside et que le contenu est un texte, le marqueur fait partie intégrante du bloc de texte. Dans ce cas, l'élément de liste est aligné normalement et le marqueur n'apparaît pas en retrait négatif. Notez que, dans Internet Explorer 4 pour Macintosh, le texte rejeté automatiquement à la ligne est affiché au niveau de la marge gauche de l'élément UL ou OL.

Syntaxe CSS
list-style-position: inside | outside
Valeur
L'une des constantes suivantes : inside | outside.
Valeur initiale
outside
Exemple
UL {list-style-position: inside}
S'applique à
Éléments DD, DT, LI, OL et UL et tout autre élément doté de l'attribut de style display:list-item.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.listStylePosition


list-style-type NN 4 IE 4 CSS 1
Hérité : oui

Définit le type de marqueur d'élément de liste à afficher pour chaque élément. Cet attribut s'applique uniquement si la valeur de list-style-image est none (ou que cet attribut n'est pas spécifié). Les valeurs constantes disponibles pour cet attribut se divisent en deux catégories. La première s'utilise avec les éléments UL et permet d'afficher des marqueurs en forme de disque plein, de cercle vide ou de carré (vide sur Macintosh, plein sous Windows) ; la seconde s'utilise avec les éléments OL et permet de produire des listes numérotées préfixées par des chiffres arabes, des chiffres romains (majuscules ou minuscules) ou des lettres de l'alphabet (majuscules ou minuscules), dans l'ordre ascendant.

Syntaxe CSS
list-style-type: listStyleType
Equivalent JavaScript
listStyleType
Valeur
L'une des constantes suivantes, en fonction du type d'éléments de liste. Pour les éléments UL : circle | disc | square. Pour les éléments OL : decimal | lower-alpha | lower-roman | upper-alpha | upper-roman. Les séquences d'éléments OL sont traitées comme suit :
Type | Exemple
decimal | 1, 2, 3, ...
lower-alpha | a, b, c, ...
lower-roman | i, ii, iii, ...
upper-alpha | A, B, C, ...
upper-roman | I, II, III, ...
Valeur initiale
disc (pour les éléments UL) ; decimal (pour les élémentsOL).
Exemple
UL {list-style-type: circle}
LI {list-style-type: upper-roman}
S'applique à
Éléments DD, DT, LI, OL et UL et tout autre élément doté de l'attribut de style display:list-item.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.listStyleType


list-style NN s.o. IE 4 CSS 1
Hérité : oui

Forme courte d'attribut permettant de définir, à l'aide d'une instruction unique, jusqu'à trois attributs de style de liste. Les attributs qui ne sont pas explicitement définis adoptent leur valeur initiale. Ces attributs définissent les caractéristiques d'affichage des marqueurs de liste des éléments OL et UL.

Syntaxe CSS
list-style: list-style-type || list-style-position || list-style-image
Valeur
Pour plus de détails sur les valeurs possibles des attributs list-style-type, list-style-position et list-style-image, voir la section consacrée à chacun de ces attributs. Vous pouvez spécifier dans la même instruction un, deux ou trois attributs de style de liste, dans n'importe quel ordre.
Valeur initiale
Aucune.
Exemple
UL {list-style: square outside none}
S'applique à
Éléments DD, DT, LI, OL et UL et tout autre élément doté de l'attribut de style display:list-item.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.listStyle


margin-bottom, margin-left, margin-right, margin-top NN 4 IE 4 CSS 1
Hérité : non

Ces attributs permettent de définir individuellement les quatre marges d'un élément. Une marge est un espace situé à l'extérieur de la bordure d'un élément et qui n'est pas compté dans la largeur ou la hauteur de ce dernier.

Syntaxe CSS
margin-bottom: marginThickness | auto margin-left: marginThickness | auto margin-right: marginThickness | auto margin-top: marginThickness | auto
Equivalent JavaScript
marginBottom
marginLeft
marginRight
marginTop
Valeur
L'attribut marginThickness peut avoir pour valeur une longueur, un pourcentage de la taille de l'élément parent immédiat ou la contante auto.
Valeur initiale
0
Exemple
BLOCKQUOTE {margin-left: 20; margin-top: 10}
#narrowCol {margin-left: 30%; margin-right: 30%}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.marginBottom
[window.]document.all.IDélément.style.marginLeft
[window.]document.all.IDélément.style.marginRight
[window.]document.all.IDélément.style.marginTop


margin NN 4 IE 4 CSS 1
Hérité : non

Forme courte d'attribut permettant de définir, à l'aide d'une seule instruction, plusieurs marges (jusqu'à quatre) d'un élément. Une marge est un espace vide situé à l'extérieur de la bordure d'un élément et qui sépare ce dernier des éléments avoisinants ou imbriqués, surtout ceux dotés eux-mêmes de bordures. Vous pouvez spécifier entre une et quatre valeurs de marge, séparées par des espaces. Le nombre de valeurs spécifiées détermine à quelles marges ces valeurs doivent être appliquées.

Syntaxe CSS
margin: marginThickness | auto {1,4}
Equivalent JavaScript
margins()
Valeur
Cet attribut accepte une, deux, trois ou quatre valeurs, selon le nombre de marges et les marges spécifiques que vous souhaitez définir. L'attribut marginThickness peut avoir pour valeur une longueur, un pourcentage de la taille de l'élément parent immédiat ou la constante auto. Les valeurs spécifiées sont interprétées de la façon suivante :
Nombre de valeurs | Effet
1 | La valeur est appliquée aux quatre marges
2 | La première valeur est appliquée aux marges du haut et du bas, et la seconde valeur aux marges de droite et de gauche
3 | La première valeur est appliquée à la marge du haut, la seconde aux marges de droite et de gauche, et la troisième à la marge du bas
4 | Chaque valeur est appliquée, respectivement, à la marge du haut, de droite, du bas et de gauche
Valeur initiale
0
Exemple
P.highlight {margin: 10px 20px}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.margin


marks | NN s.o. IE s.o. CSS 2
 | Hérité : s.o.
Attribut de contexte de page qui détermine si la page doit être affichée avec des repères de rognage ou de cadrage. Cet attribut doit être défini dans une règle @page. Pour plus de détails sur le déploiement de ce type de règle de style, voir la section précédente, « Règles @ ».
Syntaxe CSS marks: markType | none
Valeur Les constantes suivantes sont disponibles pour l'attribut markType : crop | cross. crop marque l'endroit où les pages doivent être rognées, cross est utilisé pour l'alignement et le cadrage.
Valeur initiale none
Exemple @page {marks: crop}
S'applique à Contexte de page.


max-height, min-height | NN s.o IE s.o CSS 2
 | Hérité : non
Ces attributs vous permettent de définir la hauteur minimale et/ou maximale d'un élément. Vous pouvez définir ces limites quelle que soit la hauteur résultant du flux naturel du contenu.
Syntaxe CSS max-height: length | percentage min-height: length | percentage
Valeur Pour plus de détails sur les valeurs de longueur (length), voir le début du présent chapitre. La valeur peut également être un pourcentage, lequel sera calculé par rapport au conteneur de l'élément.
Valeur initiale 0 (min-height) ; 100% (max-height).
S'applique à Tous les éléments.


max-width, min-width | NN s.o IE s.o CSS 2
 | Hérité : non
Ces attributs vous permettent de définir la largeur minimale et/ou maximale d'un élément. Vous pouvez définir ces limites quelle que soit la largeur résultant du flux naturel du contenu.
Syntaxe CSS max-width: length | percentage min-width: length | percentage
Valeur Pour plus de détails sur les valeurs de longueur (length), voir le début du présent chapitre. La valeur peut également être un pourcentage, lequel sera calculé par rapport au conteneur de l'élément.
Valeur initiale 0 (min-width) ; 100% (max-width).
S'applique à Tous les éléments.


orphans | NN s.o IE s.o CSS 2
 | Hérité : oui
Définit le nombre minimum de lignes d'un paragraphe à afficher en bas d'une page avant un saut de page. Pour définir le nombre minimum de lignes à afficher en haut d'une page après un saut de page, voir l'attribut widows.
Syntaxe CSS orphans: lineCount
Valeur Nombre entier représentant le nombre minimum de lignes à afficher.
Valeur initiale 2
S'applique à Éléments de niveau bloc.


overflow NN s.o IE 4 CSS 2
Hérité : non

Définit la façon dont les éléments à positionnement absolu doivent traiter un contenu dont les dimensions dépassent la hauteur et/ou la largeur du conteneur. A l'exception de certains types de contenus qui exigent une largeur fixe (éléments PRE, par exemple), un élément respecte par défaut l'attribut width et règle tout problème de débordement en jouant sur la hauteur.

Si cet attribut a pour valeur visible, le conteneur est redimensionné en fonction de la largeur (si celle-ci est fixe) et de la hauteur du contenu. Si des bordures, des marges et un remplissage ont été définis pour l'élément, ils sont conservés dans le bloc de contenu redimensionné.

Si l'attribut a pour valeur hidden, le bloc de contenu doit respecter les paramètres de hauteur et de largeur du conteneur, ce qui peut se traduire, dans certains cas, par un détourage du contenu. Les bordures et le remplissage sont conservés, mais il se peut que les marges disparaissent le long des bords détourés.

Si l'attribut a pour valeur scroll, des barres de défilement horizontal et vertical s'affichent dans le rectangle du bloc de contenu. Ces barres ne sont activées que s'il est nécessaire de faire défiler le contenu dans un sens ou dans l'autre. Dans la pratique, cette valeur d'attribut fait apparaître des barres de défilement dans Internet Explorer 4 pour Windows, mais par dans la version Macintosh.

Si l'attribut a pour valeur auto, les barres de défilement sont affichées uniquement si le contenu du bloc l'exige. Ici encore, cette valeur fonctionne correctement dans IE 4 Windows, mais pas dans IE 4 Macintosh.

Notez que Navigator 4 ne permet pas un contrôle direct de l'attribut overflow. Il redimensionne toujours la hauteur d'un élément de niveau bloc en fonction de la hauteur du contenu de l'élément. Par conséquent, il n'est pas pratique de créer des blocs vides (avec des bordures, par exemple) dans Navigator 4, à moins de les remplir artificiellement, ce qui a un impact défavorable sur l'affichage dans Internet Explorer.

Syntaxe CSS
overflow: overFlowType
Valeur
L'une des constantes suivantes : auto | hidden | scroll | visible.
Valeur initiale
visible
Exemple
DIV.aside {position: absolute; top: 200px; left: 10px; height: 100px;
width: 150px; overflow: scroll}
S'applique à
Tous les éléments à positionnement absolu (position:absolute).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.overflow


padding-bottom, padding-left, padding-right, padding-top NN 4 IE 4 CSS 1
Hérité : non

Ces quatre attributs permettent de définir individuellement le remplissage à appliquer à chaque côté d'un élément. Le remplissage est l'espace vide qui entoure la zone de contenu d'un élément ; cet espace s'étend jusqu'aux bordures de l'élément, s'il en existe, mais n'inclut pas ces dernières. Le remplissage reprend la couleur ou l'image d'arrière-plan de l'élément. Lorsque vous insérez du remplissage dans un élément, vous augmentez la taille de son rectangle visible sans modifier pour autant la taille du bloc de contenu.

Syntaxe CSS
padding-bottom: paddingThickness padding-left: paddingThickness padding-right: paddingThickness padding-top: paddingThickness
Equivalent JavaScript
paddingBottom
paddingLeft
paddingRight
paddingTop
Valeur
L'attribut paddingThickness peut avoir pour valeur une longueur ou un pourcentage de la taille de l'élément parent immédiat.
Valeur initiale
0
Exemple
BLOCKQUOTE {padding-left: 20; padding-top: 10}
#narrowCol {padding-left: 30%; padding-right: 30%}
S'applique à
Tous les éléments (CSS et NN) ; éléments BODY, CAPTION, DIV, IFRAME, MARQUEE, TABLE, TD, TEXTAREA et TR (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.paddingBottom
[window.]document.all.IDélément.style.paddingLeft
[window.]document.all.IDélément.style.paddingRight
[window.]document.all.IDélément.style.paddingTop


padding NN 4 IE 4 CSS 1
Hérité : non

Forme courte d'attribut permettant de définir, à l'aide d'une seule instruction, le remplissage à appliquer à plusieurs côtés (jusqu'à quatre) d'un élément. Le remplissage est l'espace vide qui entoure la zone de contenu d'un élément ; cet espace s'étend jusqu'aux bordures de l'élément, s'il en existe, mais n'inclut pas ces dernières. Le remplissage reprend la couleur ou l'image d'arrière-plan de l'élément. Lorsque vous insérez du remplissage dans un élément, vous augmentez la taille de son rectangle visible sans modifier pour autant la taille du bloc de contenu. Vous pouvez spécifier entre une et quatre valeurs de remplissage, séparées par des espaces. Le nombre de valeurs spécifiées détermine à quels côtés doivent s'appliquer ces valeurs.

Syntaxe CSS
padding: paddingThickness {1,4}
Equivalent JavaScript
paddings()
Valeur
Cet attribut accepte une, deux, trois ou quatre valeurs, selon le nombre de côtés et les côtés spécifiques auxquels vous souhaitez appliquer le remplissage. L'attribut paddingThickness peut avoir pour valeur une longueur ou un pourcentage de la taille de l'élément parent immédiat. Les valeurs spécifiées sont interprétées de la façon suivante :
Nombre de valeurs | Effet
1 | La valeur de remplissage spécifiée est appliquée aux quatre côtés
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur spécifiée est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur spécifiée est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale
0
Exemple
P.highlight {padding: 10px 20px}
S'applique à
Tous les éléments (CSS et NN) ; éléments BODY, CAPTION, DIV, IFRAME, MARQUEE, TABLE, TD, TEXTAREA, TR (IE).
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.padding


page-break-after, page-break-before NN s.o. IE 4 CSS 2
Hérité : non

Définit l'endroit où doivent être placés les sauts de page lors de l'impression du document. Les sauts de page ne sont pas visibles dans un navigateur visuel comme ils le sont dans les applications de traitement de texte ; à l'écran, les contenus longs défilent sans interruption.

Les spécifications CSS2 relatives aux sauts de page (et aux attributs apparentés tels que widows et orphans) ne sont pas entièrement implémentées dans Internet Explorer 4. Dans ces spécifications, le traitement des pages par les imprimantes repose sur le concept de zone de page, à savoir une zone rectangulaire couvrant la totalité d'une page imprimée. Les attributs de style relatifs aux sauts de page permettent au navigateur de contrôler le contenu exact de chaque zone de page. Sans intervention extérieure (ou si cet attribut a pour valeur auto), le navigateur divise les pages pour l'impression en plaçant autant de contenu sur chaque page que celle-ci peut en contenir.

Pour insérer un saut de page forcé avant un élément, vous devez définir l'attribut page-break-before:always pour cet élément. De la même façon, pour insérer un saut de page forcé après un élément, vous définirez l'attribut page-break-after:always. Par exemple, si vous voulez placer un saut de page après une classe d'éléments BR particulière, vous pouvez définir la règle de style de sélecteur de classe suivante :

<STYLE TYPE="text/css"> BR.pageEnd {page-break-after: always} </STYLE>

Puis, aux endroits où vous voulez insérer un saut de page forcé, insérez la balise suivante :

<BR CLASS="pageEnd">

Les attributs left et right supposent que le navigateur est capable de différencier les pages de gauche des pages de droite pour l'impression recto verso (comme indiqué dans les spécifications CSS2). Comme vous définirez sans doute des marges différentes pour chaque côté de la gouttière, le paramétrage des sauts de page au début d'une nouvelle section nécessite l'insertion de sauts de page suffisants pour que chaque nouvelle section commence sur une nouvelle page. Par exemple, si vous voulez que chaque élément H1 commence sur une page de droite, vous définirez le style de saut de page suivant :

H1 {page-break-before: right}

Cet attribut force le navigateur à insérer au moins un saut de page et au plus deux avant l'élément H1 afin que cette section commence sur une page de droite. Lorsque le navigateur génère un second saut de page avant la valeur left ou right, il crée une zone de page vide

Syntaxe CSS
page-break-after: breakType page-break-before: breakType
Valeur
Internet Explorer 4 reconnaît quatre constantes : always | auto | left | right. Les spécifications CSS2 y ajoutent la valeur avoid, qui demande au navigateur d'éviter, dans la mesure du possible, de placer un saut de page dans un élément.
Valeur initiale
auto
Exemple
DIV.titlePage {page-break-before: always; page-break-after: always}
S'applique à
Tous les éléments, sauf les éléments de tableau incorporés TD et TH.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.pageBreakAfter
[window.]document.all.IDélément.style.pageBreakBefore


pause-after, pause-before | NN s.o IE s.o CSS 2
 | Hérité : non
Définit, pour les feuilles de style audio, la durée de la pause à marquer avant ou après l'élément actuel. Vous pouvez appliquer ces deux attributs au même élément pour marquer une pause avant et après ce dernier.
Syntaxe CSS pause-after: time | percentage pause-before: time | percentage
Valeur Les durées (time) sont des nombres à virgule flottante suivis de l'unité ms (millisecondes) ou s (secondes). Il s'agit donc de durées absolues. Les pourcentages (percentage) sont calculés par rapport au nombre de mots par minute défini par l'attribut speech-rate. L'attribut speech-rate contrôle la durée (moyenne) d'un mot ; de ce fait, si l'attribut pause a pour valeur 100%, la durée de la pause est identique à la durée d'un mot ; si l'attribut a pour valeur 50%, la durée de la pause représente la moitié de la durée du mot.
Valeur initiale Varie en fonction du navigateur.
S'applique à Tous les éléments.


pause | NN s.o IE s.o CSS 2
 | Hérité : non
Forme courte d'attribut permettant, pour les feuilles de style audio, de définir à l'aide d'une seule instruction les attributs pause-after et pause-before. Vous pouvez spécifier une ou deux valeurs pour cet attribut.
Syntaxe CSS pause: time | percentage {1,2}
Valeur Cet attribut accepte une ou deux valeurs, selon que vous voulez affecter une valeur identique ou différente à pause-before et à pause-after. Si vous spécifiez une seule valeur pour l'attribut pause, elle est appliquée à pause-before et à pause-after. Si vous spécifiez deux valeurs, la première est appliquée à pause-before et la seconde à pause-after. Les durées (time) sont des nombres à virgule flottante suivis de l'unité ms (millisecondes) ou s (secondes). Il s'agit donc de durées absolues. Les pourcentages (percentage) sont calculés par rapport au nombre de mots par minute défini par l'attribut speech-rate. L'attribut speech-rate contrôle la durée (moyenne) d'un mot ; de ce fait, si l'attribut pause a pour valeur 100%, la durée de la pause est identique à la durée d'un mot ; si l'attribut a pour valeur 50%, la durée de la pause représente la moitié de la durée du mot.
Valeur initiale Varie en fonction du navigateur.
S'applique à Tous les éléments.


pitch-range | NN s.o IE s.o CSS 2
 | Hérité : oui
Définit, pour les feuilles de style audio, la gamme dans laquelle doit être comprise la fréquence vocale moyenne d'une voix de synthèse.
Syntaxe CSS pitch-range: number
Valeur N'importe quel nombre positif, ou zéro. La valeur 0 correspond à une voix plate, la valeur 50 à une voix normale et les valeurs supérieures à 50 à des voix animées.
Valeur initiale 50
S'applique à Tous les éléments.


pitch | NN s.o IE s.o CSS 2
 | Hérité : non
Définit, pour les feuilles de style audio, la fréquence moyenne de la voix de synthèse utilisée pour la sortie vocale.
Syntaxe CSS pitch: frequency | frequencyConstant
Valeur Une fréquence peut être n'importe quel nombre positif à virgule flottante suivi de l'unité Hz (Hertz) ou kHz (kiloHertz), tel que 500Hz ou 5,5kHz, par exemple. Vous disposez également des constantes suivante : x-low | low | medium | high | x-high. Le document de travail CSS2 dont nous disposions au moment de la rédaction de ce guide n'avait encore affecté aucune fréquence à ces constantes.
Valeur initiale medium
S'applique à Tous les éléments.


play-during | NN n/o IE s.o CSS 2
 | Hérité : non
Précise, pour les feuilles de style audio, de quelle manière le fond sonore doit être combiné à la restitution vocale du contenu de l'élément.
Syntaxe CSS play-during: uri [mix | repeat] | auto | none
Valeur La valeur uri (Universal Resource Identifier) est un lien vers le fichier son à utiliser comme fond sonore (le cas échéant). Vous pouvez aussi, si vous le souhaitez, faire jouer le son d'arrière-plan de l'attribut play-during de l'élément parent en même temps que le son d'arrière-plan de l'élément actuel. Si le son d'arrière-plan est plus court que le texte de l'élément, la constante repeat indique au navigateur qu'il doit répéter le son jusqu'à la fin du texte. La valeur auto indique que le son de l'élément parent doit être joué en continu. La valeur none signifie qu'aucun fond sonore (que ce soit celui de l'élément actuel ou de l'élément parent) ne doit être joué pour cet élément.
Valeur initiale auto
S'applique à Tous les éléments.


position NN 4 IE 4 CSS 2
Hérité : non

Détermine si l'élément est positionnable, et si c'est le cas, de quel type de positionnement il s'agit. Les deux principaux types de positionnement sont définis à l'aide des valeurs relative et absolute. Voir pour obtenir des précisions et des exemples.

Syntaxe CSS
position: positionConstant
Valeur
Les navigateurs et la norme CSS reconnaissent différents jeux de constantes pour cet attribut.
Valeur | NN 4 | IE 4 | CSS2
absolute | * | * | *
fixed | - | - | *
normal | - | - | *
relative | * | * | *
static | - | * | -
La valeur static de IE 4 est identique à la valeur normal de CSS2 : l'élément est affiché, selon son comportement incorporé normal, sous forme d'élément HTML : cela signifie généralement que n'importe quel attribut lié au positionnement (tel que top ou left) est ignoré par le navigateur.
Valeur initiale
static (IE 4) ; normal (CSS2) ; none (NN 4).
S'applique à
La valeur absolute peut être appliquée aux éléments suivants : APPLET, DIV, EMBED, FIELDSET, HR, IFRAME, INPUT, MARQUEE, OBJECT, SPAN, TABLE et TABLE. La valeur relative peut être appliquée à la plupart des autres éléments de niveau bloc.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.position


richness | NN s.o IE s.o CSS 2
 | Hérité : oui
Définit, pour les feuilles de style audio, la portée de la voix de synthèse à utiliser pour la restitution vocale de l'élément.
Syntaxe CSS richness: number
Valeur Nombre positif à virgule flottante représentant la portée de la voix. La valeur 50 correspond à une voix portant normalement. Une valeur plus basse produit une voix moins portante, une valeur élevée une voix plus portante.
Valeur initiale 50
S'applique à Tous les éléments.


right | NN s.o IE s.o CSS 2
 | Hérité : non
Pour les éléments positionnables, définit la position du bord droit du cadre d'un élément (contenu plus remplissage, bordure et/ou marge de droite) par rapport au bord droit du conteneur parent immédiat. Dans le cas d'un élément à positionnement relatif, le décalage est défini par rapport au côté droit de l'emplacement où l'élément devrait normalement apparaître.
Syntaxe CSS right: length | percentage | auto
Valeur Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur. Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la largeur du conteneur parent immédiat. Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage horizontal (à droite) de l'élément par rapport à sa position naturelle à l'intérieur du cadre destiné à le recevoir.
Valeur initiale auto
S'applique à Tous les éléments.


row-span | NN s.o IE s.o CSS 2
 | Hérité : non
Définit le nombre de lignes que doit occuper une cellule, une colonne ou un groupe de colonnes de tableau. Similaire à l'attribut ROWSPAN d'un élément TD ou TH.
Syntaxe CSS row-span: integer
Valeur N'importe quel entier positif représentant le nombre de lignes souhaité.
Valeur initiale 1
Exemple #tallDrink {row-span: 3}
S'applique à Éléments TD et TH et tout autre élément de type cellule.


size | NN s.o IE s.o CSS 2
 | Hérité : s.o
Définit la taille et/ou l'orientation d'une zone de page. Destiné principalement au formatage des pages imprimées, cet attribut peut rester sans effet sur le détourage ou l'orientation du contenu à l'écran. Cet attribut doit être défini dans une déclaration @page.
Syntaxe CSS size: [length {1,2}] auto | portrait | landscape
Valeur Si vous spécifiez une ou deux valeurs de longueur (length), les dimensions de la zone de page deviennent « absolues » et ne changent donc pas quel soit le format de papier sélectionné ; si vous ne spécifiez pas de valeur précise, la zone de page est dimensionnée en fonction du format de papier sélectionné. Si vous spécifiez une seule valeur, celle-ci est appliquée à la largeur et à la hauteur de la zone de page ; si vous spécifiez deux valeurs, la première est appliquée à la largeur de la zone et la seconde à sa hauteur. N'oubliez pas que les imprimantes imposent souvent une marge minimale autour de la zone de page imprimée. Même lorsque l'attribut size a pour valeur auto, vous pouvez ajouter de l'espace autour de la zone de page en insérant un attribut margin dans la déclaration @page.
Valeur initiale auto
Exemple @page{size: landscape}
S'applique à Contexte de page.


speak-date | NN s.o IE s.o CSS 2
 | Hérité : oui
Notez que nous ne disposons encore que d'informations préliminaires sur cet attribut. Il définit, pour les feuilles de style audio, l'ordre de lecture des composants de la date (jour, mois et année).
Syntaxe CSS speak-date: dateType
Valeur Trois constantes sont possibles : mdy | dmy | ymd. La valeur mdy correspond à l'ordre de lecture suivant : mois, jour et année. La valeur dmy correspond à l'ordre de lecture suivant : jour, mois et année. La valeur ymd correspond à l'ordre de lecture suivant : année, mois et jour.
Valeur initiale Dépend des paramètres régionaux du navigateur.
S'applique à Tous les éléments.


speak-header | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Pour les navigateurs à synthèse vocale, précise si le navigateur doit lire le nom de l'en-tête de chaque cellule de tableau avant de lire la valeur de la cellule, ou s'il doit le lire une seule fois pour toutes les cellules adjacentes partageant le même en-tête (lorsqu'il lit une colonne de haut en bas, par exemple).
Syntaxe CSS speak-header: headerFrequency
Valeur Deux constantes sont possibles : once | always.
Valeur initiale once
S'applique à Tous les éléments.


speak-numeral | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Notez que nous ne disposons encore que d'informations préliminaires sur cet attribut. Il détermine, pour les feuilles de styles audio, si les nombres doivent être lus chiffre par chiffre (un quatre deux, par exemple) ou sous forme de nombres complets (cent quarante deux). La langue à utiliser est définie à l'aide de l'attribut LANG.
Syntaxe CSS speak-numeral: numeralType
Valeur Trois constantes sont possibles : digits | continuous | none.
Valeur initiale none
S'applique à Tous les éléments.


speak-punctuation | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Notez que nous ne disposons encore que d'informations préliminaires sur cet attribut. Il détermine, pour les feuilles de style audio, si les signes de ponctuation doivent être lus comme des mots (point, par exemple) ou restitués comme des pauses ou des intonations.
Syntaxe CSS speak-punctuation: punctuationType
Valeur Deux constantes sont possibles : code | none. La valeur code signifie que tout signe de pontuation rencontré dans le texte d'un élément doit être lu comme un mot.
Valeur initiale none
S'applique à Tous les éléments.


speak-time | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Notez que nous ne disposons encore que d'informations préliminaires sur cet attribut. Il détermine, pour les feuilles de style audio, si les heures doivent être lues selon un format de 12 heures ou de 24 heures.
Syntaxe CSS speak-time: TimeType
Valeur Trois constantes sont possibles : 12 | 24 | none.
Valeur initiale none
S'applique à Tous les éléments.


speak | NN s.o IE s.o CSS 2
 | Hérité : oui
Précise, pour les feuilles de style audio, si le contenu de l'élément doit être lu à voix haute par les navigateurs à synthèse vocale. Dans ce cas, il détermine également si le texte doit être lu mot par mot ou caractère par caractère.
Syntaxe CSS speak: speechType
Valeur Trois constantes sont possibles : none | normal | spell-out. La valeur none signifie que la restitution vocale est désactivée. Dans ce cas, le navigateur saute le texte parlé et les pauses (voir la valeur d'attribut volume:silent). La valeur normal active la restitution vocale et le texte est lu mot par mot. La valeur spell-out active la restitution vocale et le texte est lu lettre par lettre (ce qui est très utile pour les éléments ABBR et ACRONYM).
Valeur initiale normal
S'applique à Tous les éléments.


speech-rate | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Définit, pour les feuilles de style audio, le nombre de mots par minute que doit lire le navigateur.
Syntaxe CSS speech-rate: wordsPerSecond | speedConstant
Valeur La valeur de wordsPerSecond est un nombre à virgule flottante positif. Vous disposez également des constantes suivantes : x-slow | slow | medium | fast | x-fast | slower | faster. Au moment de la rédaction de ce document, les spécifications CSS2 n'avaient encore affecté aucune valeur à ces constantes et n'avait pas fixé l'incrément à appliquer à slower et faster.
Valeur initiale medium
S'applique à Tous les éléments.


stress | NN s.o IE s.o CSS 2
 | Hérité : oui
Il définit, pour les feuilles de style audio, l'accentuation (inflexion) de la voix.
Syntaxe CSS stress: stressLevel
Valeur La valeur stressLevel peut être n'importe quel nombre à virgule flottante positif. La valeur 50 correspond à une accentuation normale.
Valeur initiale 50
S'applique à Tous les éléments.


table-layout | NN s.o. IE s.o. CSS 2
 | Hérité : non
Détermine si le navigateur doit charger toutes les cellules d'un tableau et leur contenu avant de pouvoir afficher la première ligne de données ou s'il doit se baser sur les attributs de taille de l'élément TABLE et la largeur des cellules de la première ligne pour commencer à afficher le tableau. Si l'attribut a pour valeur auto, le navigateur doit charger toutes les cellules du tableau et leur contenu avant de pouvoir restituer la première ligne de données, ce qui entraîne un léger délai dans l'affichage du tableau. Si l'attribut a pour valeur fixed, l'affichage du tableau commence plus tôt, ce qui est pratique pour les tableaux de grande taille.
Syntaxe CSS table-layout: layoutType
Valeur Deux constantes sont possibles : auto | fixed.
Valeur initiale auto
S'applique à Éléments TABLE.


text-align NN 4 IE 4 CSS 1
Hérité : oui

Détermine l'alignement horizontal du texte à l'intérieur d'un élément. Cet attribut étant hérité, vous pouvez le définir pour un conteneur afin qu'il soit appliqué à tous les éléments imbriqués dans ce dernier (élément P imbriqué dans un élément DIV, par exemple). Les valeurs center, left et right sont prises en charge par Navigator 4 et Internet Explorer 4. La valeur justify n'est pas requise par les spécifications CSS, et son implémentation dans la version 4 des navigateurs n'est pas systématique (voir les Remarques).

Syntaxe CSS
text-align: alignment
Equivalent JavaScript
textAlign
Valeur
L'une des quatre constantes suivantes : center | justify | left | right.
Valeur initiale
Varie en fonction du navigateur (left dans Navigator 4 et Internet Explorer 4, mais cette valeur n'est pas requise par les spécifications CSS).
Exemple
P.rightHand {text-align: right}
BLOCKQUOTE {text-align: center}
S'applique à
Éléments de niveau bloc.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.textAlign


text-decoration NN 4 IE 4 CSS 1
Hérité : non

Définit les enrichissements à appliquer au contenu d'un élément (souligné, barré, barre supérieure et (dans Navigator et CSS) clignotement). Vous pouvez spécifier plusieurs styles d'enrichissement, en les séparant par des espaces. Bien que Internet Explorer 4 accepte la valeur blink, il ne l'applique pas ; tout texte doté de cet attribut ne clignotera donc pas dans ce navigateur. Navigator 4, quant à lui, ne reconnaît pas l'enrichissement overline (surlignement). Les enrichissements de texte ont une relation parent-enfant inhabituelle. Les valeurs ne sont pas héritées, mais un enrichissement appliqué à un élément est également appliqué à ses éléments imbriqués. Par conséquent, à moins d'annuler cette fonction par un autre moyen, si un élément P est souligné, par exemple, l'élément B imbriqué dans ce dernier l'est également.

Syntaxe CSS
text-decoration: decorationStyle | none
Equivalent JavaScript
textDecoration
Valeur
none et les quatre constantes suivantes : blink | line-through | overline | underline. Navigator 4 ne reconnaît pas la valeur overline.
Valeur initiale
none
Exemple
DIV.highlight {text-decoration: underline}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.textDecoration
[window.]document.all.IDélément.style.textDecorationBlink
[window.]document.all.IDélément.style.textDecorationLineThrough
[window.]document.all.IDélément.style.textDecorationNone
[window.]document.all.IDélément.style.textDecorationOverLine
[window.]document.all.IDélément.style.textDecorationUnderline


text-indent NN 4 IE 4 CSS 1
Hérité : oui

Définit le retrait à appliquer à la première ligne d'un bloc de texte (tel qu'un élément P). Cet attribut est uniquement appliqué à la première ligne de texte. Vous pouvez utiliser une valeur négative pour appliquer un retrait négatif à la première ligne, mais dans ce cas assurez-vous que le texte ne dépasse pas la limite gauche de la fenêtre ou du cadre du navigateur.

Syntaxe CSS
text-indent: length | percentage
Equivalent JavaScript
textIndent
Valeur
Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur. Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la largeur du conteneur parent immédiat.
Valeur initiale
0
Exemple
BODY {text-indent: 2em}
P.firstGraphs {text-indent: 0}
S'applique à
Éléments de niveau bloc.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.textIndent


text-shadow | NN s.o. IE s.o. CSS 2
 | Hérité : non
Définit les effets d'ombre à appliquer au texte de l'élément actuel. Un élément texte peut posséder plusieurs ombres, chacune ayant une couleur, un décalage vertical et horizontal et un rayon de fondu spécifiques. Les ombres définies sont superposées, chacune figurant dans son propre mini-calque et la première ombre spécifiée se trouvant tout en bas de la pile. Lorsque vous définissez ou que vous modifiez l'attribut z-index d'un élément texte doté d'une ombre, celle-ci est déplacée en même temps que l'élément. Lorsque vous définissez plusieurs ombres, vous devez les séparer par des virgules. Les valeurs associées à chaque ombre doivent, elles, être séparées par des espaces.
Syntaxe CSS text-shadow: [ color] horizLength vertLength blurRadiusLength, [[color] horizLength vertLength blurRadiusLength] | none
Valeur Si vous ne spécifiez pas de valeur pour l'attribut color, l'ombre utilise la valeur de la propriété color de l'élément (qui peut elle-même être héritée). Vous pouvez spécifier l'attribut color avant ou après les longueurs. Pour en savoir plus sur les valeurs de couleur, reportez-vous au début du présent chapitre. Les valeurs des attributs horizLength et vertLength sont des longueurs (voir le début de ce chapitre) et le signe qui les précède désigne le sens du décalage de l'ombre par rapport à l'élément texte. Pour l'attribut horizLength, une valeur positive fait apparaître l'ombre à droite de l'élément, une valeur négative la fait apparaître à gauche de l'élément. Pour l'attribut vertLength, une valeur positive fait apparaître l'ombre au dessous du texte, une valeur négative la fait apparaître au dessus du texte. Le rayon de fondu est une valeur définissant la longueur (voir le début de ce chapitre) de l'ombre à partir du bord des caractères de texte.
Valeur initiale none
S'applique à Tous les éléments.


text-transform NN 4 IE 4 CSS 1
Hérité : oui

Contrôle la capitalisation du texte d'un élément. Lorsque cet attribut a une valeur autre que none, la casse de toutes les lettres du texte source est déterminée par la feuille de style, annulant ainsi la casse d'origine du texte source.

Syntaxe CSS
text-transform: caseType | none
Equivalent JavaScript
textTransform
Valeur
Avec la valeur none, la casse du texte source est respectée. Les constantes suivantes sont également disponibles : capitalize | lowercase | uppercase. La valeur capitalize met le premier caractère de chaque mot en majuscules. Les valeurs lowercase et uppercase affichent tous les caractères dans leur casse respective.
Valeur initiale
none
Exemple
H2 {text-transform: capitalize}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.textTransform


top NN 4 IE 4 CSS 2
Hérité : non

Pour les éléments positionnables, définit la position du bord supérieur du cadre d'un élément (contenu plus remplissage, bordure et/ou marge du haut) par rapport au bord supérieur du conteneur parent immédiat.

Syntaxe CSS
top: length | percentage | auto
Equivalent JavaScript
top
Valeur
Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur. Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la hauteur du conteneur parent immédiat. Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage vertical supérieur de l'élément par rapport à sa position naturelle dans le cadre destiné à le recevoir.
Valeur initiale
auto
Exemple
H1 {position: relative; top: 2em}
#logo {position: absolute; left: 80px; top: 30px}
S'applique à
Tous les éléments.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.offsetTop


vertical-align NN s.o. IE 4 CSS 1
Hérité : non

Cet attribut possède deux jeux de valeurs agissant sur différentes caractéristiques de l'élément incorporé auxquelles elles sont appliquées. A chaque élément incorporé correspond un cadre destiné à recevoir son contenu. Deux valeurs, top et bottom, déterminent le positionnement du texte à l'intérieur de ce cadre. Ces valeurs alignent le texte sur le haut et sur le bas du cadre, respectivement.

L'utilisation de cet attribut ne se borne pas au texte incorporé. Il peut être appliqué aux images et aux tableaux. Toutes les autres valeurs de vertical-align agissent sur la façon dont le cadre occupé par l'élément est positionné sur l'axe vertical par rapport au contenu texte de l'élément parent. La valeur par défaut, baseline, signifie que la zone de ligne est positionnée de telle sorte que la ligne de base du texte qu'elle contient (ou le bas d'un élément IMG, par exemple) et la ligne de base du texte parent sont alignées. Ainsi, un élément EM, tout en ayant son propre cadre de destination, apparaîtra cependant sur la même ligne de base que l'élément P qui le contient. Le reste des valeurs possibles pour cet attribut (constantes, longueur et pourcentages) déterminent à quel endroit la zone de ligne de l'élément est placée par rapport à la ligne parente.

Syntaxe CSS
vertical-align: vertAlignType | length | percentage
Valeur
Les deux constantes suivantes permettent de définir l'alignement du texte à l'intérieur de l'élément proprement dit : bottom | top. Les six constantes suivantes permettent de définir l'alignement de la zone de ligne de l'élément par rapport à la ligne de texte de l'élément parent : baseline | middle | sub | super | text-bottom | text-top. La valeur baseline aligne les lignes de base de l'élément et de l'élément parent. La valeur middle aligne le point médian vertical de l'élément sur la ligne de base, majorée de la moitié de la hauteur x de la police de caractères de l'élément parent. Les valeurs sub et super affichent l'élément en position indice et exposant, mais ne modifient pas la taille des caractères. La valeur text-bottom aligne le bas de l'élément sur le bas de la ligne de base du texte de l'élément parent ; la valeur text-top fait de même avec le haut de l'élément et son parent.
Valeur initiale
baseline
Exemple
SPAN.sup {vertical-align: super; text-size: smaller}
S'applique à
Élément incorporés uniquement.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.verticalAlign


visibility NN 4 IE 4 CSS 2
Hérité : parfois

Pour les éléments positionnés, détermine si l'élément doit être affiché sur la page ou masqué. Lorsqu'un élément est masqué à l'aide de l'attribut visibility, l'espace correspondant reste vide à l'endroit où l'élément apparaîtrait normalement dans le document. Si vous préférez que le contenu environnant remplisse l'espace qu'occuperait normalement un élément masqué, utilisez l'attribut display.

L'attribut visibility est hérité quand il a pour valeur inherit. Dans pareil cas, si l'élément parent est masqué, l'élément enfant l'est également. Par contre, si vous donnez à l'attribut visibility la valeur visible, vous pouvez masquer l'élément parent tout en affichant l'élément enfant.

Syntaxe CSS
visibility: visibilityType
Equivalent JavaScript
visibility
Valeur
Navigator 4 utilise un jeu de constantes qui ne correspondent pas toujours à celles d'Internet Explorer 4 et de CSS, mais Navigator 4 reconnaît les spécifications CSS suivantes :
Valeur | NN 4 | IE 4 | CSS2
hide | * | - | -
hidden | * | * | *
inherit | * | * | *
show | * | - | -
visible | * | * | *
Pour garantir la compatibilité entre les navigateurs, utilisez plutôt les constantes CSS. Dans certains cas, toutefois, Navigator ne réagit pas correctement aux valeurs CSS. Pour modifier dynamiquement la visibilité d'un élément positionné, il est par conséquent recommandé d'utiliser les stratégies API inter-navigateurs décrites dans .
Valeur initiale
inherit
Exemple
#congrats {visibility: hidden}
S'applique à
Tous les éléments pour lesquels l'attribut position a été défini.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.visibility


voice-family | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Pour les feuilles de style audio, spécifie les noms de familles de voix que doit utiliser, dans la mesure du possible, le navigateur audio pour la restitution vocale du contenu. Vous pouvez spécifier plusieurs valeurs, séparées par des virgules. Cet attribut est similaire à l'attribut font-family pour les navigateurs visuels.
Syntaxe CSS voice-family: voiceFamilyName [, voiceFamilyName [, ...]]
Valeur Un nom de famille de voix (voiceFamilyName) peut identifier un type de voix disponible sur le navigateur audio ou un nom de voix générique (ces derniers n'ont pas encore été définis par le W3C). Tout comme c'est le cas avec l'attribut font-family, vous devez, lorsque vous spécifiez plusieurs types de voix, commencer par le plus spécifique et terminer par le plus générique.
Valeur initiale Varie en fonction du navigateur.
S'applique à Tous les éléments.


volume | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Pour les feuilles de style audio, définit la gamme dynamique (volume) des éléments parlés. La parole normale comportant des inflexions qui rendent impossible l'utilisation permanente d'un volume absolu, l'attribut volume permet de définir le volume médian.
Syntaxe CSS volume: number | percentage | volumeConstant
Valeur Un nombre (number) quelconque représentant le volume souhaité. Zéro représente le volume minimum pour le matériel utilisé et l'environnement sonore ambiant, 100 représente le volume maximum dans les mêmes conditions. Si vous spécifiez un pourcentage (percentage), celui-ci est calculé par rapport à l'attribut volume de l'élément parent. Vous disposez également des constantes suivantes (correspondant à des volumes prédéfinis) : silent (aucun son) | x-soft (0) | soft (25) | medium (50) | loud (75) | x-loud (100).
Valeur initiale medium
S'applique à Tous les éléments.


white-space | NN 4 IE s.o. CSS 1
 | Hérité : oui
Détermine la façon dont le navigateur doit afficher l'espace blanc (espaces supplémentaires et retours-chariot) présent dans le code source de l'élément. Dans les circonstances normales, HTML ne tient pas compte des espaces blancs supplémentaires et redimensionne le contenu de manière à boucher cet espace. Par exemple, si plusieurs espaces apparaissent entre les mots, ils sont réduits en un seul, et pour créer un saut de ligne forcé à l'intérieur d'un paragraphe, il faut insérer un élément BR. Si l'attribut whitespace a pour valeur pre, l'espace blanc est traité comme si vous aviez placé l'élément dans un élément PRE. Bien que les navigateurs affichent normalement les éléments PRE dans une police monospace, un élément ordinaire paramétré comme white-space:pre conservera ses paramètres de police.
Syntaxe CSS white-space: whiteSpaceType
Equivalent JavaScript whiteSpace
Valeur Trois constantes sont possibles : normal | nowrap | pre. Avec la valeur normal, l'espace blanc est traité selon les règles HTML normales. La valeur nowrap (qui n'est pas disponible dans Navigator 4) indique au navigateur qu'il doit ignorer les sauts de ligne du texte source (éventuellement insérés par l'auteur pour améliorer la lisibilité dans l'éditeur) et qu'il doit créer des sauts de ligne sur la page uniquement lorsqu'il rencontre des sauts de ligne HTML explicites (définis par des éléments BR, par exemple). Si vous spécifiez la valeur pre, le navigateur applique les espaces blancs insérés par l'auteur dans le contenu source sans ajuster les paramètres de police de l'élément.
Valeur initiale normal
Exemple DIV.example {white-space: pre}
S'applique à Éléments de niveau bloc.


widows | NN s.o. IE s.o. CSS 2
 | Hérité : oui
Définit le nombre minimum de lignes d'un paragraphe à afficher en haut d'une page après un saut de page. Pour définir le nombre minimum de lignes à afficher en bas d'une page avant un saut de page, voir l'attribut orphans.
Syntaxe CSS widows: lineCount
Valeur Nombre entier représentant le nombre minimum de lignes.
Valeur initiale 2
S'applique à Éléments de niveau bloc.


width NN 4 IE 4 CSS 1
Hérité : non

Définit la largeur d'un élément de niveau bloc ou d'un élément remplacé (sans compter les bordures, le remplissage et les marges). Les navigateurs de la version 4 appliquent l'attribut width uniquement aux éléments sélectionnés et aux éléments à positionnement absolu (il faut donc placer les autres types d'éléments entre des balises DIV), mais CSS2 recommande également l'application de cet attribut à tous les éléments remplaçables.

Navigator 4 et Internet Explorer 4 réagissent différemment à l'attribut width. Ils s'accordent toutefois sur un point : si le contenu exige une largeur supérieure à celle qui est spécifiée dans l'attribut (d'un élément IMG, par exemple), les besoins du contenu ont priorité sur la valeur de l'attribut (si nécessaire, utilisez la zone de découpe (clipping) pour réduire la largeur de la zone d'affichage). Mais si la fenêtre est plus étroite que la largeur spécifiée, Navigator tend à redimensionner l'élément (jusqu'à un certain point) en fonction de la largeur de la fenêtre pour éviter d'avoir à faire défiler la fenêtre horizontalement ; par contre, IE4 conserve sa largeur à l'élément, quelle que soit la largeur de la fenêtre.

Il existe d'autres différences de comportement entre les navigateurs (et entre différentes versions du système d'exploitation pour un même navigateur) par rapport à l'attribut width Par exemple, si vous créez un élément DIV ayant pour largeur 300px et que vous imbriquez à l'intérieur un élément P dont la largeur est fixée à 200px, Navigator 4 respecte la largeur de l'élément P (200 pixels), mais dans Internet Explorer 4, l'élément P est redimensionné de façon à occuper la largeur du conteneur DIV (300 pixels). Vous pouvez également rencontrer des comportements différents d'éléments parent et enfant dans le cas où l'un et l'autre possèdent une bordure. En effet, dans Internet Explorer 4 pour Macintosh, certains côtés de la bordure de l'élément parent sont masqués.

Syntaxe CSS
width: length | percentage | auto
Equivalent JavaScript
width
Valeur
Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre. Vous pouvez également spécifier un pourcentage, qui sera calculé par rapport à la largeur du cadre parent immédiat. Si vous spécifiez la valeur auto, le navigateur détermine automatiquement la largeur du cadre de l'élément en fonction de l'espace nécessaire pour afficher son contenu à l'intérieur de fenêtre actuelle.
Valeur initiale
auto
Exemple
DIV#announce {position: relative; left: 30; width: 240}
TEXTAREA {width: 80%}
S'applique à
Navigator 4 : Éléments de niveau bloc et éléments remplacés. Internet Explorer 4 : Éléments APPLET, DIV, EMBED, FIELDSET, HR, IFRAME, IMG, INPUT, MARQUEE, OBJECT, SELECT, SPAN, TABLE et TEXTAREA. CSS2 : Tous les éléments, sauf les éléments incorporés non remplacés, les lignes et les groupes de lignes de tableau.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.width


word-spacing | NN s.o. IE s.o. CSS 1
 | Hérité : oui
Définit l'espacement entre les mots lorsque le texte n'est pas soumis à des règles d'espacement externes (attribut align ayant pour valeur justify, par exemple).
Syntaxe CSS word-spacing: length | normal
Valeur Si vous spécifiez la valeur normal, c'est le navigateur qui calcule, selon ses propres algorithmes, la valeur de l'espacement normal entre deux mots. Pour plus de détails sur les valeurs de longueur, voir le début du présent chapitre.
Valeur initiale normal
S'applique à Tous les éléments.


z-index

z-index NN 4 IE 4 CSS 2
Hérité : non

Pour un élément positionné, définit l'ordre de superposition par rapport aux autres éléments à l'intérieur du même conteneur parent. Voir pour en savoir plus sur les relations de superposition d'éléments à l'intérieur de multiples conteneurs.

Syntaxe CSS
z-index: integer | auto
Equivalent JavaScript
zIndex
Valeur
N'importe quel nombre entier. La valeur auto a le même effet que la valeur zéro. Lorsque tous les élément d'un même conteneur parent ont la même valeur z-index, l'ordre de superposition est déterminé par l'ordre d'apparition de l'élément dans le code source.
Valeur initiale
auto
Exemple
DIV#instrux {position: absolute; left: 50;top: 70;z-index: 2}
S'applique à
N'importe quel élément positionné.
Référence de modèle d'objet
IE [window.]document.all.IDélément.style.zIndex


CSS Faciles : Introduction aux feuilles de style CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Les CSS faciles ?

Découvrez la puissance des CSS et progressez en douceur grace à nos cours illustrés et détaillés.

Les CSS facilitent considérablement la maintenance des sites Web, mais la création de sites à l'aide de cette technique peut sembler a priori un peu complexe.

Ce site tente d'aborder cette technique avec méthode et douceur. Nous essayerons de vous prendre par la main pour vous rendre cette découverte agréable et faciliter le design de votre site au maximum.

Les autres sites parlant des CSS

Ces liens pointent vers des pages dont les contenus complètent nos articles.

Les standards du Web
Ce tout nouveau wiki dresse un tableau des différentes normes qui régissent aujourd'hui le Web

Contourner les défauts/limitations/bugs du navigateur web Internet Explorer 6
Voilà une trés belle compilation de références pour entrer dans le Web 2.0 sans (trop) trainer le boulet que représente Internet Explorer 6.

CSS tests and experiments
Une formidable collection de tests et d'illustrations de ce que les CSS permettent de faire
(en anglais)

Comprendre les CSS
Un article de mediabox

CSS properties
une liste de W3schools
en anglais.

ZoneCSS
Un bon site trés complet sur les CSS

WebDesignFromScratch
Cet excellent site anglophone a inspiré plusieurs des pages de notre site

Jardin Zen CSS
Site de démonstration de la souplesse des CSS. Le menu de droite permet d'appliquer des styles differents au contenu proposé en introduction.

AlsaCréations
Le forum le plus sérieux sur les CSS.

A propos du design :

Qui dit CSS, dit design de sites Web. On ne saurait concevoir un site à base de CSS sans prendre en compte les questions de l'accessibilité et de l'esthétique. Voici deux liens concernant ces questions générales :

Design de site, accessibilité et gestion des couleurs

Création de sites et référencement

Plan du site

premiers pas Introduction aux CSS

CSS ( Cascading Style Sheets ) : Une feuille de style CSS est un langage informatique ( langage CSS ) qui décrit la présentation des documents HTML, XHTML et XML. Les standards définissant le code CSS sont publiés par le World Wide Web Consortium (W3C). L'utilisation du CSS est indispensable pour le developpement web ( front end ) afin de rendre le site esthétique et responsive design. Dernière version CSS : CSS3

Premiers pas : cette page aborde la philosophie générale des CSS. Elle vous propose de créer vos premières feuilles de styles et explique comment appliquer des styles CSS aux éléments du langage html d'une page Web.

Héritages et cascades : avec cette page sur les héritages, vous allez devenir riche... de connaissances sur la façon dont les éléments HTML se transmettent leurs styles.

Éléments"blocs" et "en-ligne" : tous les styles ne s'appliquent forcément à tous les éléments HTML. Apprenez à reconnaître les deux grandes familles d'éléments ( display bloc et en-ligne). Vous constaterez que même dans ce domaine il y a des travestis !

Mise-en-page avec les CSS : cette page aborde le thème le plus complexe concernant les CSS : comment réaliser la totalité de la mise en page ( conteneur, div, margin, padding, bordure, width, line height, shadow, position absolute, z-index, etc. ) avec des styles et comment se passer définitivement des tableaux pour le design de votre site web.

probleme css Problèmes et solutions

Faire des tableaux en CSS : il s'agit d'un exercice de style expliquant comment obtenir une présentation tabulaire sans utiliser les balises html <table>.

Pseudo-frames en CSS : les "frames" traditionnels comportent de nombreux problèmes et rendent les sites difficiles à référencer. Voici comment obtenir un menu fixe tout en se débarrassant de ces inconvénients.

Menu déroulants en CSS : voici comment réaliser un menu déroulant entièrement en CSS fonctionnant sans javascript sur les navigateurs modernes et avec javascript sur IE6.

Styles alternatifs : apprenez comment profiter des avancées du Web 2.0 tout en préservant la compatibilité de votre site avec les anciens navigateurs.

10 trucs à savoir : recueil d'astuces répondant aux besoins les plus courants des utilisateurs de CSS. Cette page comporte également des liens vers d'autres compilations d'astuces.

liste propriété css Toutes les propriétés CSS

130 pages sur les propriétés des normes CSS 1 et CSS 2 ainsi que sur les propriétés CSS 3 déjà intégrées dans les navigateurs actuels.
Exemples : background image, color ( rgba ou color html ), transform, positionnement, padding, margin, div, bordure, syntaxe, border box.
Ces propriétés sont complémentaires aux cours css ( design web ) que peut recevoir un dévéloppeur web pour la mise en page et le design d'une page html.

point de vue css Réflexions et prises de tête

Les fausses promesses des CSS : halte à la propagande : concevoir un design de site Web entièrement en CSS (et sans tableaux !) n'est pas un parcours facile et ne satisfait pas forcément tous les espoirs.

Tableaux contre CSS : un combat truqué. La mauvaise foi est souvent de mise lorsqu'il s'agit de comparer les avantages des CSS et ceux des tableaux. Cette page expose notre point de vue sur cette question.

Les ayatollah des CSS : les intégristes sont partout, y compris sur le Web. Si vous n'avez pas encore brulé des statuettes et organisé des danses vaudou pour conjurer l'utilisation des tableaux, cette page est peut-être votre dernière chance.

This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :
Plan du site
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


Propriétés par ordre alphabétique

Toutes les propriétés CSS

Classement alphabétique

A

Propriétés | Descriptifs | Familles
azimuth | Provenance horizontale du son. | Son

B

Propriétés | Descriptifs | Familles
background | Propriétés de l'arrière-plan. | Background
background-attachment | Mode de défilement de l'image d'arrière-plan. | Background
background-color | Couleur de l'arrière-plan. | Background, Couleur
background-image | Image d'arrière-plan. | Background
background-position-x | Position horizontale de l'image d'arrière-plan. | Background
background-position-y | Position verticale de l'image d'arrière-plan. | Background
background-position | Position de l'image d'arrière-plan. | Background
background-repeat | Mode de répétition de l'image d'arrière-plan. | Background
behavior | Association d'un script à un élément HTML (Explorer seulement). | IE seulement
border | Caractéristiques des bordures. | Border
border-bottom | Caractéristiques de la bordure du bas. | Border
border-bottom-color | Couleur de la bordure du bas. | Border, Couleur
border-bottom-style | Style de la bordure du bas. | Border
border-bottom-width | Epaisseur de la bordure du bas. | Border
border-collapse | Mode d'encadrement des cellules adjacentes. | Table
border-color | Couleur des bordures. | Border, Couleur
border-left | Caractéristiques de la bordure de gauche. | Border
border-left-color | Couleur de la bordure de gauche. | Border, Couleur
border-left-style | Style de la bordure de gauche. | Border
border-left-width | Epaisseur de la bordure de gauche. | Border
border-right | Caractéristiques de la bordure de droite. | Border
border-right-color | Couleur de la bordure de droite. | Border, Couleur
border-right-style | Style de la bordure de droite. | Border
border-right-width | Epaisseur de la bordure de droite. | Border
border-spacing | Espacement entre deux traits de cellules adjacentes. | Table
border-style | Style des bordures. | Border
border-top | Caractéristiques de la bordure du haut. | Border
border-top-color | Couleur de la bordure du haut. | Border, Couleur
border-top-style | Style de la bordure du haut. | Border
border-top-width | Epaisseur de la bordure du haut. | Border
border-width | Epaisseur des bordures. | Border
bottom | Position basse d'un élément. | Position

C

Propriétés | Descriptifs | Familles
caption-side | Emplacement du titre des tableaux. | Table
clear | Gestion de l'habillage (en relation avec la propriété "float") | Position
clip | Définit la partie visible de l'élément. | Position
color | Couleur de l'avant plan (texte, par exemple). | Couleur, Texte
content | Ajoute du contenu dans le document (génération de contenu). | Génération de contenu
counter-increment | Définit le pas d'incrémentation d'un compteur (génération de contenu). | Génération de contenu
counter-reset | Fixe la valeur de départ d'un compteur (génération de contenu). | Génération de contenu
cue | Résumé des deux propriétés Cue-Before et Cue-After. | Son
cue-before | Séquence sonore à jouer avant la lecture d'un élément. | Son
cue-after | Séquence sonore à jouer après la lecture d'un élément. | Son
cursor | Forme du curseur pour la souris. | Divers

D

Propriétés | Descriptifs | Familles
direction | Sens d'écriture. | Texte
display | Façon d'afficher un élément. | Position

E

Propriétés | Descriptifs | Familles
elevation | Provenance verticale du son. | Son
empty-cells | Mode d'affichage des cellules vides. | Table

F

Propriétés | Descriptifs | Familles
filter (new style) | Filtre graphique. | Divers, IE seulement
filter (old style) | Filtre graphique. | Divers, IE seulement
float | Positionnement flottant (relatif) d'un élément par rapport à un autre. | Position
font | Ensemble des propriétés concernant les caractères. | Texte
font-family | Police de caractères. | Texte
font-size | Taille des caractères. | Texte
font-size-adjust | Hauteur des lignes de texte. | Texte
font-stretch | Etirement ou compression des caractères. | Texte
font-style | Mise en italique. | Texte
font-variant | Mise en petites capitales. | Texte
font-weight | Mise en gras ou extra-gras (extra-bold). | Texte

H

Propriétés | Descriptifs | Familles
height | Hauteur de l'élément. |

I

Propriétés | Descriptifs | Familles
ime-mode | Prise en charge des langues tels que le chinois, le japonais et le coréen. | IE seulement
!important | Donne la priorité à une définition CSS. | Divers

L

Propriétés | Descriptifs | Familles
layer-background-image | Image d'arrière plan et de la bordure dans Netscape. | Background
layer-background-color | Couleur d'arrière plan et de la bordure dans Netscape. | Background, Couleur
layout-flow | Type de progression du texte dans Explorer (langues asiatiques). | IE seulement
layout-grid | Ensemble de propriétés des lignes de caractères dans Explorer (langues asiatiques). | IE seulement
layout-grid-char | Taille de la grille des caractères dans Explorer (langues asiatiques). | IE seulement
layout-grid-line | Hauteur de ligne des caractères dans Explorer (langues asiatiques). | IE seulement
layout-grid-mode | Dimension des lignes de caractères dans Explorer (langues asiatiques). | IE seulement
layout-grid-type | Largeur variable des lignes de caractères dans Explorer (langues asiatiques). | IE seulement
left | Position gauche d'un élément | Position
letter-spacing | Espacement des lettres. | Texte
line-break | Contrôle les règles qui régissent le saut de ligne pour un texte en japonais. | Texte
line-height | Hauteur de ligne | Texte
list-style | Ensemble de caractéristiques pour une liste. | Liste
list-style-image | Image remplaçant les puces dans les listes. | Liste
list-style-position | Détermine si la puce doit être affichée à l'intérieur ou à l'extérieur (en retrait négatif) du bloc de contenu de liste. | Liste
list-style-type | Définit le type de puce à afficher pour une liste. | Liste

M

Propriétés | Descriptifs | Familles
margin | Marges extérieures de l'élément. | Position
margin-top | Marge extérieure du haut de l'élément. | Position
margin-right | Marge extérieure de droite de l'élément. | Position
margin-left | Marge extérieure de gauche de l'élément. | Position
margin-bottom | Marge extérieure du bas de l'élément. | Position
marker-offset | Position de la puce ou du numéro dans une liste. | Liste
marks | Traits de coupe et repères d'alignement. | Impression
max-height | Hauteur maxi de l'élément. | Position
min-height | Hauteur mini de l'élément. | Position
max-width | Largeur maxi de l'élément. | Position
min-width | Largeur mini de l'élément. | Position
-moz-border-radius | Permet de définir un coin arrondi des bordures (pour Mozilla seulement) | Border
-moz-border-radius-bottomleft | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement) | Border
-moz-border-radius-bottomright | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement) | Border
-moz-border-radius-topleft | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement) | Border
-moz-border-radius-topright | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement) | Border
-moz-opacity | Transparence/opacité de l'élément (pour Mozilla seulement) | Divers

O

Propriétés | Descriptifs | Familles
opacity | Transparence/opacité de l'élément. | Divers
orphans | Nombre minimum de lignes d'un paragraphe à afficher en bas d'une page avant un saut de page. | Impression
outline-color | Couleur de l'encadrement de l'élément. | Couleur, Outline
outline-style | Couleur d'encadrement de l'élément. | Outline
outline-width | Epaisseur de l'encadrement de l'élément. | Outline
outline | Encadrement de l'élément. | Outline
overflow-x | Présence/absence de l'ascenseur droit (Explorer seulement) | IE seulement, Position
overflow-y | Présence/absence de l'ascenseur bas (Explorer seulement) | IE seulement, Position
overflow | Présence/absence des ascenseurs. | Position

P

Propriétés | Descriptifs | Familles
padding | Marges intérieures de l'élément | Position
padding-top | Marge intérieure haute de l'élément | Position
padding-left | Marge intérieure gauche de l'élément | Position
padding-right | Marge intérieure droite de l'élément | Position
padding-bottom | Marge intérieure basse de l'élément | Position
page-break-before | Pour forcer un saut de page avant l' élément | Impression
page-break-after | Pour forcer un saut de page après l' élément | Impression
page-break-inside | Pour gérer les sauts de page à l'intérieur de l' élément | Impression
page | Type de page imprimée. | Impression
pause | Silence avant et après la lecture de l'élément. | Son
pause-before | Silence avant la lecture de l'élément. | Son
pause-after | Silence après la lecture de l'élément. | Son
pitch | Timbre de la voix. | Son
pitch-range | Variation de timbre de la voix. | Son
play-during | Son à restituer en fond. | Son
position | Positionnement de l'élément. | Position

Q

Propriétés | Descriptifs | Familles
quotes | Caractères utilisés pour les guillemets. | Génération de contenu

R

Propriétés | Descriptifs | Familles
richness | Portée de la voix. | Son
right | Position droite de l'élément. | Position
ruby-align | Détermine l'alignement du contenu dans un élément ruby. | Ruby
ruby-overhang | Détermine les caractéristiques de retrait du texte du contenu dans un élément ruby. | Ruby
ruby-position | Détermine si le texte ruby imbriqué (élément rt) s'affiche sur la même ligne ou au-dessus de son texte de base ruby connexe (élément rb). | Ruby

S

Propriétés | Descriptifs | Familles
scrollbar-3dlight-color | Aspect de l'ascenseur (Explorer seulement). | Couleur, Divers, IE seulement
scrollbar-arrow-color | Aspect de l'ascenseur (Explorer seulement). | Couleur, Divers, IE seulement
scrollbar-base-color | Aspect de l'ascenseur (Explorer seulement). | Couleur, Divers, IE seulement
scrollbar-darkShadow-color | Aspect de l'ascenseur (Explorer seulement). | Divers, IE seulement
scrollbar-face-color | Aspect de l'ascenseur (Explorer seulement). | Couleur, Divers, IE seulement
scrollbar-highlight-color | Aspect de l'ascenseur (Explorer seulement). | Couleur, Divers, IE seulement
scrollbar-shadow-color | Aspect de l'ascenseur (Explorer seulement). | Couleur, Divers, IE seulement
scrollbar-track-color | Aspect de l'ascenseur (Explorer seulement). | Couleur, Divers, IE seulement
size | Définit la taille et/ou l'orientation d'une zone de page. | Impression
speak | Mode de restitution des textes. | Son
speak-header | Mode de restitution des titres de tableaux. | Son, Table
speak-numeral | Mode de restitution des nombres. | Son
speak-punctuation | Mode de restitution de la ponctuation. | Son
speech-rate | Débit de paroles en mots par minutes. | Son
stress | Inflexion de la voix (calme, précipitée...) | Son

T

Propriétés | Descriptifs | Familles
table-layout | Mode de calcul des largeurs de colonnes et de tableaux. | Table
text-align | Détermine l'alignement horizontal du texte à l'intérieur d'un élément. | Position, Texte
text-align-last | Détermine l'alignement horizontal de la dernière ligne de texte dans un cadre de l'élément (Explorer seulement). | IE seulement, Texte
text-autospace | Détermine l'espacement entre les caractères (langues asiatiques - Explorer seulement). | IE seulement, Texte
text-decoration | Soulignement ou rayure du texte. | Texte
text-indent | Indentation du texte. | Texte
text-justify | Justification du texte (Explorer seulement). | IE seulement, Texte
text-kashida-space | Concerne le texte arabe inclus dans un élément de bloc (Explorer seulement). | IE seulement, Texte
text-overflow | Détermine s'il faut afficher le contenu débordant d'un cadre plein sous forme de points de suspension (...) à la fin de la ligne | Texte
text-shadow | Définit les effets d'ombre à appliquer au texte de l'élément. | Texte
text-transform | Contrôle la capitalisation (majuscules/minuscules) du texte d'un élément. | Texte
text-underline-position | Position du texte par rapport au soulgnement (langues asiatiques - Explorer seulement). | IE seulement, Texte
top | Position supérieure de l'élément. | Position

U

Propriétés | Descriptifs | Familles
unicode-bidi | Détermine l'incorporation du texte bidirectionnel avec la propriété de style direction (langues asiatiques - Explorer seulement). | IE seulement, Texte

V

Propriétés | Descriptifs | Familles
vertical-align | Alignement vertical de l'élément. | Position, Texte
visibility | Détermine si l'élément est affiché sur la page. | Divers
voice-family | Type de voix (homme, femme, enfant...) | Son
volume | Volume de la voix. | Son

W

Propriétés | Descriptifs | Familles
white-space | Gestion des espaces multiples et des retours chariot. | Divers
widows | Définit le nombre minimum de lignes d'un paragraphe à afficher en haut d'une page après un saut de page (Opera seulement). | Impression
width | Largeur de l'élément. |
word-break | Détermine le style de césure de mot (langues asiatiques - Explorer seulement). | IE seulement, Texte
word-spacing | Espacement des mots. | Texte
word-wrap | Détermine le style de renvoi à la ligne pour les éléments de niveau bloc, les éléments incorporés de taille spécifique ou les éléments positionnés (Explorer seulement). | IE seulement, Texte
writing-mode | Progression du contenu texte dans l'élément (langues asiatiques - Explorer seulement). | IE seulement, Texte

Z

Propriétés | Descriptifs | Familles
z-index | Définit l'ordre de superposition des éléments (dessus/dessous). | Position
zoom | Agrandissement du contenu affiché. | IE seulement

En complément

En complément de ces informations, vous pouvez également consulter la documentation en ligne du site Mozilla concernant les propriétés CSS.


Propriétés par Familles

Toutes les propriétés CSS

Classement par famille

Background (arrière-plan)

Cette liste de propriétés permet de définir la couleur ou l'image qui sera utilisée en fond de page ou en arrière plan d'élément. Le site MammouthLand propose une page détaillée sur l'utilisation de ces propriétés.

background | Ensemble de propriétés de l'arrière-plan.
background-attachment | Mode de défilement de l'image d'arrière-plan.
background-color | Couleur de l'arrière-plan.
background-image | Image d'arrière-plan.
background-position-x | Position horizontale de l'image d'arrière-plan.
background-position-y | Position verticale de l'image d'arrière-plan.
background-position | Position de l'image d'arrière-plan.
background-repeat | Mode de répétition de l'image d'arrière-plan.
layer-background-image | Image d'arrière plan et de la bordure dans Netscape Navigator.
layer-background-color | Couleur d'arrière plan et de la bordure dans Netscape Navigator.

Border (bordure)

Cette liste de propriétés permet de définir les caractéristiques des bordures de l'élément. Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Voir également la famille "outline" qui permet de jouer sur l'encadrement du contenu d'un élément.

border | Caractéristiques des bordures.
border-bottom | Caractéristiques de la bordure du bas.
border-bottom-color | Couleur de la bordure du bas.
border-bottom-style | Style de la bordure du bas.
border-bottom-width | Epaisseur de la bordure du bas.
border-collapse | Mode d'encadrement des cellules adjacentes.
border-color | Couleur des bordures.
border-left | Caractéristiques de la bordure de gauche.
border-left-color | Couleur de la bordure de gauche.
border-left-style | Style de la bordure de gauche.
border-left-width | Epaisseur de la bordure de gauche.
border-right | Caractéristiques de la bordure de droite.
border-right-color | Couleur de la bordure de droite.
border-right-style | Style de la bordure de droite.
border-right-width | Epaisseur de la bordure de droite.
border-spacing | Espacement entre deux traits de cellules adjacentes.
border-style | Style des bordures.
border-top | Caractéristiques de la bordure du haut.
border-top-color | Couleur de la bordure du haut.
border-top-style | Style de la bordure du haut.
border-top-width | Epaisseur de la bordure du haut.
border-width | Epaisseur des bordures.
-moz-border-radius | Permet de définir un coin arrondi des bordures (pour Mozilla seulement)
-moz-border-radius-bottomleft | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement)
-moz-border-radius-bottomright | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement)
-moz-border-radius-topleft | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement)
-moz-border-radius-topright | Permet de définir un coin arrondi pour une bordure (pour Mozilla seulement)

Couleur

Cette famille regroupe toutes les propriétés consacrées à la couleur.

Les normes HTML et CSS permettent de définir les couleurs de 3 façons différentes. Pour en savoir plus, consultez notre page consacrée à la couleur.

background-color | Couleur de l'arrière-plan.
border-bottom-color | Couleur de la bordure du bas.
border-color | Couleur des bordures.
border-left-color | Couleur de la bordure de gauche.
border-right-color | Couleur de la bordure de droite.
border-top-color | Couleur de la bordure de droite.
color | Couleur de l'avant plan (texte, par exemple).
layer-background-color | Couleur d'arrière plan et de la bordure dans Netscape.
outline-color | Couleur de l'encadrement de l'élément.
scrollbar-3dlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-arrow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-base-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-darkShadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-face-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-highlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-shadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-track-color | Aspect de l'ascenseur (Explorer seulement).

Divers

cursor | Forme du curseur pour la souris.
filter (new style) | Filtre graphique.
filter (old style) | Filtre graphique.
!important | Donne la priorité à une définition CSS.
-moz-opacity | Transparence/opacité de l'élément (pour Mozilla seulement)
opacity | Transparence/opacité de l'élément.
scrollbar-3dlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-arrow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-base-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-darkShadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-face-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-highlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-shadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-track-color | Aspect de l'ascenseur (Explorer seulement).
visibility | Détermine si l'élément est affiché sur la page.
white-space | Gestion des espaces multiples et des retours chariot.

Génération de contenu

Cette liste de propriétés assez peu connues permet d'ajouter du contenu (texte ou images) avant ou aprés des éléments HTML. Pour plus de détail, consultez l'article de Laurent Denis à ce sujet.

content | Ajoute du contenu dans le document (génération de contenu).
counter-increment | Définit le pas d'incrémentation d'un compteur (génération de contenu).
counter-reset | Fixe la valeur de départ d'un compteur (génération de contenu).
quotes | Caractères utilisés pour les guillemets.

IE seulement (propriétés reconnues uniquement par Internet Explorer)

La famille Mozilla/Firefox représente plus de 30% des navigateurs utilisés dans le monde. Soyez donc prudent dans l'utilisation des propriétés suivantes qui ne sont reconnues que par Internet Explorer !

behavior | Association d'un script à un élément HTML.
filter (new style) | Filtre graphique.
filter (old style) | Filtre graphique.
ime-mode | Prise en charge des langues tels que le chinois, le japonais et le coréen.
layout-flow | Type de progression du texte dans Explorer (langues asiatiques).
layout-grid | Ensemble de propriétés des lignes de caractères dans Explorer (langues asiatiques).
layout-grid-char | Taille de la grille des caractères dans Explorer (langues asiatiques).
layout-grid-line | Hauteur de ligne des caractères dans Explorer (langues asiatiques).
layout-grid-mode | Dimension des lignes de caractères dans Explorer (langues asiatiques).
layout-grid-type | Largeur variable des lignes de caractères dans Explorer (langues asiatiques).
overflow-x | Présence/absence de l'ascenseur droit (Explorer seulement)
overflow-y | Présence/absence de l'ascenseur bas (Explorer seulement)
scrollbar-3dlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-arrow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-base-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-darkShadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-face-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-highlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-shadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-track-color | Aspect de l'ascenseur (Explorer seulement).
text-align-last | Détermine l'alignement horizontal de la dernière ligne de texte dans un cadre de l'élément (Explorer seulement).
text-autospace | Détermine l'espacement entre les caractères (langues asiatiques - Explorer seulement).
text-justify | Justification du texte (Explorer seulement).
text-kashida-space | Concerne le texte arabe inclus dans un élément de bloc (Explorer seulement).
text-underline-position | Position du texte par rapport au soulgnement (langues asiatiques - Explorer seulement).
unicode-bidi | Détermine l'incorporation du texte bidirectionnel avec la propriété de style direction (langues asiatiques - Explorer seulement).
word-break | Détermine le style de césure de mot (langues asiatiques - Explorer seulement).
word-wrap | Détermine le style de renvoi à la ligne pour les éléments de niveau bloc, les éléments incorporés de taille spécifique ou les éléments positionnés (Explorer seulement).
writing-mode | Progression du contenu texte dans l'élément (langues asiatiques - Explorer seulement).
zoom | Agrandissement du contenu affiché.

Impression

Les propriétés ci-dessous ne seront actives que lorsque vos visiteurs tenteront d'imprimer vos pages Web. Le site SelfHTML propose une page consacrée l'utilisation de ces propriétés. Voir également l'article de "Pompage" consacré à l'impression des pages web.

marks | Traits de coupe et repères d'alignement.
orphans | Nombre minimum de lignes d'un paragraphe à afficher en bas d'une page avant un saut de page.
page-break-before | Pour forcer un saut de page avant l' élément
page-break-after | Pour forcer un saut de page après l' élément
page-break-inside | Pour gérer les sauts de page à l'intérieur de l' élément
page | Type de page imprimée.
size | Définit la taille et/ou l'orientation d'une zone de page.
widows | Définit le nombre minimum de lignes d'un paragraphe à afficher en haut d'une page après un saut de page (Opera seulement).

Liste

Ces propriétés premettent de définir la façon d'afficher les éléments de type <LI>, <UL> et <OL> ainsi que les éléments <DT> et <DD> (listes de définitions)

list-style-image | Image remplaçant les puces dans les listes.
list-style-position | Détermine si la puce doit être affichée à l'intérieur ou à l'extérieur (en retrait négatif) du bloc de contenu de liste.
list-style-type | Définit le type de puce à afficher pour une liste.
list-style | Ensemble de caractéristiques pour une liste.
marker-offset | Position de la puce ou du numéro dans une liste.

Outline (encadrement)

Alors que les propriétés "border" permettent d'attribuer une bordure aux éléments, les propriétés "outline" attribuent un cadre au contenu des éléments.

outline-color | Couleur de l'encadrement de l'élément.
outline-style | Couleur d'encadrement de l'élément.
outline-width | Epaisseur de l'encadrement de l'élément.
outline | Encadrement de l'élément.

Position et dimensions

Ces propriétés permettent de gérer la mise en page de votre site.

bottom | Position basse d'un élément.
clear | Gestion de l'habillage (en relation avec la propriété "float")
clip | Définit la partie visible de l'élément.
display | Façon d'afficher un élément.
float | Positionnement flottant (relatif) d'un élément par rapport à un autre.
height | Définit la hauteur d'un élément
left | Position gauche d'un élément
margin | Marges extérieures de l'élément.
margin-top | Marge extérieure du haut de l'élément.
margin-right | Marge extérieure de droite de l'élément.
margin-left | Marge extérieure de gauche de l'élément.
max-height | Hauteur maxi de l'élément.
min-height | Hauteur mini de l'élément.
max-width | Largeur maxi de l'élément.
min-width | Largeur mini de l'élément.
overflow-x | Présence/absence de l'ascenseur droit (Explorer seulement)
overflow-y | Présence/absence de l'ascenseur bas (Explorer seulement)
overflow | Présence/absence des ascenseurs.
padding | Marges intérieures de l'élément
padding-top | Marge intérieure haute de l'élément
padding-left | Marge intérieure gauche de l'élément
padding-right | Marge intérieure droite de l'élément
padding-bottom | Marge intérieure basse de l'élément
position | Positionnement de l'élément.
right | Position droite de l'élément.
text-align | Détermine l'alignement horizontal du texte à l'intérieur d'un élément.
top | Position supérieure de l'élément.
vertical-align | Alignement vertical de l'élément.
width | Définit la largeur de l'élément
z-index | Définit l'ordre de superposition des éléments (dessus/dessous).

Ruby

Les "Ruby" sont des sortes d'annotation destinées à apporter un sens complémentaire ou à préciser la façon de prononcer un segment de texte. Les "ruby" sont essentiellement utilisés pour les langues asiatiques. Pour en savoir plus, vous pouvez consultez http://www.w3.org/TR/css3-ruby.

ruby-align | Détermine l'alignement du contenu dans un élément ruby.
ruby-overhang.php | Détermine les caractéristiques de retrait du texte du contenu dans un élément ruby.
ruby-position | Détermine si le texte ruby imbriqué (élément rt) s'affiche sur la même ligne ou au-dessus de son texte de base ruby connexe (élément rb).

Son

ATTENTION : La plupart des navigateurs ne reconnaissent aucune des propriétés de cette famille. Seuls certains navigateurs vocaux à l'usage des non-voyants sont capables de les interprêter.

Le site SelfHTML propose une page détaillée sur ces propriétés.

azimuth | Provenance horizontale du son.
cue | Signal de reconnaissance avant et après un élément
cue-before | Signal de reconnaissance avant un élément
cue-after | Signal de reconnaissance après un élément
elevation | Effet spatial dessus/dessous
pause | Pause avant et après un élément
pause-before | Pause avant un élément
pause-after | Pause après un élément
pitch | Timbre de la voix
pitch-range | Modulation de la voix
play-during | Son d'arrière plan
richness | Inflexions de la voix
speak | Prononciation
speak-header | Mode lecture des tableaux
speak-numeral | Convention pour la lecture des chiffres
speak-punctuation | Mentionner explicitement la ponctuation
speech-rate | Vitesse de parole
stress | Caractère de la voix
voice-family | Type d'orateur.
volume | Volume de la voix

Table (tableaux)

Ces propriétés ne s'appliquent qu'aux éléments de type <Table> et à leurs sous-éléments (caption, td, etc.)

border-collapse | Mode d'encadrement des cellules adjacentes.
border-spacing | Espacement entre deux traits de cellules adjacentes.
caption-side | Emplacement du titre des tableaux.
empty-cells | Mode d'affichage des cellules vides.
speak-header | Mode de restitution des titres de tableaux.
table-layout | Mode de calcul des largeurs de colonnes et de tableaux.

Texte et caractères

Cette famille regroupe toutes les propriétés permettant d'agir sur le texte.

color | Couleur de l'avant plan (texte, par exemple).
direction | Sens d'écriture.
font | Ensemble des propriétés concernant les caractères.
font-family | Police de caractères.
font-size | Taille des caractères.
font-size-adjust | Hauteur des lignes de texte.
font-stretch | Etirement ou compression des caractères.
font-style | Mise en italique.
font-variant | Mise en petites capitales.
font-weight | Mise en gras ou extra-gras (extra-bold).
letter-spacing | Espacement des lettres.
line-break | Contrôle les règles qui régissent le saut de ligne pour un texte en japonais.
line-height | Hauteur de ligne
text-align | Détermine l'alignement horizontal du texte à l'intérieur d'un élément.
text-align-last | Détermine l'alignement horizontal de la dernière ligne de texte dans un cadre de l'élément (Explorer seulement).
text-autospace | Détermine l'espacement entre les caractères (langues asiatiques - Explorer seulement).
text-decoration | Soulignement ou rayure du texte.
text-indent | Indentation du texte.
text-justify | Justification du texte.
text-kashida-space | Concerne le texte arabe inclus dans un élément de bloc (Explorer seulement).
text-overflow | Détermine s'il faut afficher le contenu débordant d'un cadre plein sous forme de points de suspension (...) à la fin de la ligne
text-shadow | Définit les effets d'ombre à appliquer au texte de l'élément.
text-transform | Contrôle la capitalisation (majuscules/minuscules) du texte d'un élément.
text-underline-position | Position du texte par rapport au soulgnement (langues asiatiques - Explorer seulement).
unicode-bidi | Détermine l'incorporation du texte bidirectionnel avec la propriété de style direction (langues asiatiques - Explorer seulement).
vertical-align | Alignement vertical de l'élément.
unicode-bidi | Détermine l'incorporation du texte bidirectionnel avec la propriété de style direction (langues asiatiques - Explorer seulement).
white-space | Gestion des espaces multiples et des retours chariot.
word-break | Détermine le style de césure de mot (langues asiatiques - Explorer seulement).
word-wrap | Détermine le style de renvoi à la ligne pour les éléments de niveau bloc, les éléments incorporés de taille spécifique ou les éléments positionnés (Explorer seulement).
writing-mode | Progression du contenu texte dans l'élément (langues asiatiques - Explorer seulement).


Unités CSS et HTML

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Les unités CSS

De nombreuses propriétés CSS peuvent se voir attribuer des valeurs dans plusieurs unités possibles.
Voici un récapitulatif des unités utilisables.

ATTENTION : si vous spécifiez des valeurs décimales, vous devez utiliser la notation anglaise (un point à la place de la virgule). Exemple : "1.4em" et non pas "1,4em".

  • En pixels. Exemple : width:100px;
    Dans Explorer, les valeurs attribuées de cette façon sont fixes. Elles le resteront quelle que soient les variations de tailles des caractères et de la page. Dans les autres navigateurs, l'unité "px" varie avec la taille par défaut des polices.
    Contrairement au point (pt), la taille du pixel (px) est dépendante de la résolution et de la taille de l'écran. C'est donc une unité relative dépendante du périphérique affichant votre page.
    Lorsque vous définissez une valeur en px, vous devez utiliser un nombre entier.
  • En "%". Exemple : width:50%;
    Les valeurs attribuées de cette façon permettent d'avoir une valeur proportionnelle à la taille de la fenêtre du navigateur ou à l'élément parent de celui pour lequel vous utilisez cette unité. Si vous utilisez des pourcentages dans une propriété liée à la taille des caractères, la valeur obtenue est proportionnelle à la taille de la police par défaut (1"em").
    Lorsque vous définissez une valeur en %, vous devez utiliser un nombre entier.
  • En "em". Exemple : width:1.5em;
    Les valeurs attribuées de cette façon permettent d'avoir une valeur proportionnelle à la taille des caractères utilisés dans la page. 1em correspond à une hauteur de ligne de 1 caractère, soit 12pt si l'utilisateur n'a pas modifié la taille standard des caractères. Si l'utilisateur modifie la taille par défaut des caractères (avec CTRL + et CTRL -, par exemple), les valeurs définies en "em" varieront en conséquence. Cette unité est donc trés pratique pour modifier votre mise en page en fonction de la taille des caractères choisie par l'utilisateur.
    Vous pouvez utiliser des valeurs décimales du type "1.4em"
  • Autres unités. La norme CSS2 a mis en place de nombreuses autres unités qui sont des variantes des 3 précédentes. Voici un récapitulatif complet des unités utilisables en CSS :

Unités absolues

Toutes les unités absolues sont équivalentes selon le rapport suivant : 1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc.

Vous pouvez indifférement utiliser l'une ou l'autre en fonction de votre préférence. Le résultat sera identique si vous respectez les rapports définis au paragraphe précédent.

Unité | Description
cm | Le centimètre
in | Le pouce (en anglais « inch ») correspondant à 2,54 cm
mm | Le millimètre
pt | Le point. Correspond à un soixante-douxième d'inch.
pc | Le pica (correspondant à 12 pt)

Unités relatives

Unité | Description
em

Unité relative à la taille de police de l'élément.
1 em équivaut à 100% de cette taille.
Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la taille de la police de l'élément parent.
ex | Unité relative à la hauteur de la minuscule de l'élément. Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la hauteur de la minuscule de l'élément parent.
px | Le pixel. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage
% Le pourcentage est une unité relative à la taille de l'élément ou de son parent.

Le site ReedDesign propose un tableau d'équivalence de ces unités. Concernant les unités relatives, ces équivalences ne sont évidemment valables que dans des conditions "standards", c'est à dire si l'utilisateur à régler sa taille de police sur "moyenne" et si l'écran d'affichage à une résolution assez standard.

Les équivalences proposées pour les % ne sont applicables que pour la définition des tailles de caractères.

Points | Pixels | Ems | Percent
6pt | 8px | 0.5em | 50%
7pt | 9px | 0.55em | 55%
7.5pt | 10px | 0.625em | 62.5%
8pt | 11px | 0.7em | 70%
9pt | 12px | 0.75em | 75%
10pt | 13px | 0.8em | 80%
10.5pt | 14px | 0.875em | 87.5%
11pt | 15px | 0.95em | 95%
12pt | 16px | 1em | 100%
13pt | 17px | 1.05em | 105%
13.5pt | 18px | 1.125em | 112.5%
14pt | 19px | 1.2em | 120%
14.5pt | 20px | 1.25em | 125%
15pt | 21px | 1.3em | 130%
16pt | 22px | 1.4em | 140%
17pt | 23px | 1.45em | 145%
18pt | 24px | 1.5em | 150%
20pt | 26px | 1.6em | 160%
22pt | 29px | 1.8em | 180%
24pt | 32px | 2em | 200%
26pt | 35px | 2.2em | 220%
27pt | 36px | 2.25em | 225%
28pt | 37px | 2.3em | 230%
29pt | 38px | 2.35em | 235%
30pt | 40px | 2.45em | 245%
32pt | 42px | 2.55em | 255%
34pt | 45px | 2.75em | 275%
36pt | 48px | 3em | 300%

Cette page a été réalisée par css-faciles.

 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


Les fausses promesses des CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Les fausses promesses des CSS

Assez de propagande ! L'abandon des tableaux au profit des CSS compliquent la création d'un site et ne garantissent ni son accessibilité, ni sa compatibilité avec les navigateurs actuels et futurs.

Dans sa présentation des "feuilles de styles en cascade", le très respecté "OpenWeb Group", énonce la liste des avantages des CSS.

Certains points de cette liste ne correspondent absolument pas à l'expérience que les concepteurs de sites (webmasters) vivent au quotidien.

Sélection de liens concernant les fausses promesses des CSS

Ces liens pointent vers des pages dont les contenus complètent notre article.

CSS, Accessibilité, confusions et amalgames
Alsacréations essaye de mettre un peu d'ordre dans les raccourcis hatifs qui associent CSS et accessibilité ou tableaux et non-respect des standards.

Accessibilité des sites Internet
Mon-Design-Web s'attache à élargir notre vision de l'accessibilité : c'est être visible partout et pour tous.

Vraies et fausses promesses

1- Gestion simplifiée et économique de la présentation d'un site à l'aide d'une seule feuille de styles pour toutes les pages, aisément modifiable

Exact.

2- Allègement des coûts de développement et de maintenance : il n'est plus nécessaire de mettre en place un système (hasardeux) de discrimination des navigateurs pour servir aux différents navigateurs un document adapté aux technologies propriétaires qui balkanisent le Web .

Voilà une belle preuve de mauvaise foi !

Les systèmes "hasardeux" de discrimination des navigateurs sont bien plus indispensables avec les CSS que sans les CSS.

La démarche du W3C vise - tout autant que celle de Microsoft - à "balkaniser" le Web. Que faut-il penser des sites affichant "ce site est conçu pour les navigateurs modernes et ne fonctionne pas sous Internet Explorer" ? Cela témoigne-t-il d'un esprit ouvert et généreux ?

Il est bien plus délicat d'obtenir une mise en page "universelle" lorsqu'elle est basée sur l'utilisation de CSS. Vouloir rendre un site CSS compatible avec l'ensemble des navigateurs existants aujourd'hui sur le Web demande un investissement et des compétences considérables et ne garantit pas contre les mauvaises surprises.

La maintenance sera plus simple, mais le coût de développement sera indiscutablement supérieur.

3- Allègement du code-source des pages Web, et donc économie de bande passante : une feuille de styles n'est chargée qu'une fois par un navigateur, qui l'applique sans délai si nécessaire aux pages visitées par la suite

Discutable, car la feuille de styles est parfois bien "lourde" et peut ralentir le chargement de la première page visitée. Etant donné qu'un grand nombre d'internaute ne consulte qu'une seule page des sites visités, le gain en bande passante n'est pas toujours évident.

4- Possibilité de doter une page de feuilles de styles spécifiques selon les medias (navigateurs graphiques, lecteurs d'écran.). Les feuilles de styles print permettent une impression immédiate d'une page depuis le navigateur, et dispensent d'avoir à créer une version imprimable du document HTML

Exact.

5- Possibilité de doter une page de présentations alternatives au choix de l'utilisateur

Exact.

6- Création de mises en page flexibles, qui s'adaptent aux différentes résolutions d'écran

Très discutable. Les sites conçus à l'aide de tableau permettent souvent de gérer ce type de problème plus simplement.

7- Meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.

Meilleure accessibilité pour qui ? Pas pour les utilisateurs de I.E. 6, à moins que le concepteur de site ne se donne la peine de tester le fonctionnement des CSS sur ce navigateur et de générer une feuille de styles qui lui soit adaptée. D'autre part, nous ne voyons pas en quoi l'utilisation de tableaux représentent une gêne réelle vis-à-vis de l'accessibilité. Les arguments développés par OpenWeb ou cybercodeur sont un brin tirés par les cheveux et semblent oublier que les lecteurs automatiques de page pour handicapés ont surmonté depuis longtemps le soi-disant "problème" des tableaux.

Assez de propagande !

Les véritables avantages des CSS (points 1, 4 et 5) suffisent largement à justifier leur utilisation. Il est temps que les "chevaliers" des CSS baissent les armes et cessent de se croire dans une guerre de religion.

Oui , ce système est formidable et vaut les investissements que vous devrez faire pour surmonter les difficultés qu'il générera.

Mais cessons d'affirmer que la mise en place de CSS facilite la vie des concepteurs de site : elle demande de solides compétences et augmente les coûts de développement. Ces investissements seront largement compensés par la facilité de maintenance que ce système procure, mais ils ne doivent pas être sous-estimés.

Les CSS ne sont qu'une technique de plus parmi celles qui permettent de concevoir et de faire la maintenance d'un site Web. Ils présentent des avantages indéniables, mais aussi des défauts importants et notamment une grande difficulté de mise en oeuvre et un manque d'intuitivité affligeant.

Ce que les CSS ne font pas

L'utilisation des CSS ne garantit en aucune façon l'accessibilité de votre site Internet.
Le seul moyen d'atteindre cet objectif consiste à vous poser la question de l'accessibilité, à étudier les problèmes techniques qui lui font obstacle et à faire tester votre site par la plus grande variété possible de visiteurs.
L'utilisation des CSS ne garantit pas que votre site sera évolutif.
Les CSS sont une technique qui permet d'aller dans la bonne direction en vous permettant de séparer le contenu et la mise en forme de pages. Encore faut-il que vous ayez clairement compris la finalité de cet objectif et que vous sachiez en tirer partie.
L'utilisation des CSS ne garantit pas la compatibilité de votre site avec tous les navigateurs.
Si vous respectez parfaitement la philosophie des CSS et du W3C, vous vous assurez que votre site sera compatible avec les navigateurs qui respectent parfaitement les normes du W3C. Autrement dit, votre site risque de ne pas être correctement affiché par Internet Explorer et Opera, quel que soit leurs versions. Autrement dit, la moitié des internautes risquent de ne pas pouvoir naviguer sur votre site.

Les dernières versions d'Internet Explorer respectent mieux les standards que leurs prédécesseurs et c'est tant mieux ! Mais il reste et il restera toujours des différences d'interprétation d'un navigateur à l'autre.

Il n'existe pas, hélas, de remède miracle pour garantir le bon affichage de votre site sur tous les navigateurs du marché. La seule solution consiste à faire des tests et à corriger le tir en cas de problème.
L'utilisation des CSS ne facilite pas la conception d'un site.
La maîtrise de cette technique demande de solides compétences et une expérience approfondie. Si vous êtes - ou souhaitez devenir - un webmaster professionnel, les CSS sont faits pour vous.
Mais si vous faites partie des 80% de webmasters qui ne concevront que 2 ou 3 sites dans leur vie, il y a peu de chance pour que vous parveniez à maîtriser toutes les subtilités de la propriété "position". Mieux vaut continuer à faire vos mises en page à l'aide de tableaux.
Les CSS ne sont pas "le bien" ni les autres techniques "le mal".
Les CSS sont une technique, pas une religion. Les puristes et autres psycho-rigides qui pensent détenir la vérité absolue en défendant les CSS aveuglément se trompent de combat.

On ne fera pas évoluer le Web en demandant à un milliard de webmasters de changer leur façon de travailler. On le fera en leur proposant des techniques évolutives et faciles à maîtriser.
L'utilisation des CSS ne rend pas intelligent.
Preuve est faite qu'elle ne protège pas contre le fanatisme et la mauvaise foi.

Ce que les CSS font

L'utilisation des CSS facilite (énormément) la maintenance des sites.
Tout site qui parvient à gagner une audience se doit d'évoluer, de se mettre à jour régulièrement. Pour ce qui concerne l'évolution du design et de la présentation, travailler à base de CSS est un véritable bonheur : on met à jour un seul fichier et HOP ! tout le site change d'aspect.
L'utilisation des CSS oblige à structurer le code et le contenu.
Et Dieu sait que c'est agaçant... au début. On finit toutefois par se dire que ça vaut vraiment le coup de faire l'effort pour obtenir un code beaucoup plus clair (et donc plus facile à faire évoluer) et un contenu mieux structuré (et donc plus lisible pour les visiteurs).
L'utilisation des CSS oblige à se poser des bonnes questions.
Plus vous utiliserez les CSS et plus vous réfléchirez - d'une façon ou d'une autre - à la bonne utilisation des balises, à leurs rôles sémantiques, à la logique intrinsèque du code HTML. Ces efforts seront payants sur le long terme.
L'utilisation des CSS permet (parfois) de faire des pages plus légères.
Quand vous maîtriserez vraiment cette technique, vous constaterez qu'elle permet d'éliminer beaucoup de redondances dans le code. Cela sera surtout le cas si votre contenu est bien structuré.

Cette page s'inspire dune page de RankSpirit. Elle a été complétée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles Réflexions... Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


Les feuilles de styles alternatives

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Les feuilles de styles alternatives

Ou comment gérer les bugs d'Internet Explorer

Les différents navigateurs du marché ne comprennent pas tous les normes CSS de la même façon. Internet Explorer présente notamment de nombreuses particularités qui demandent souvent une gestion adaptée.

Voici comment mettre en place des styles dits "alternatifs" qui vous permettront de gérer ces particularités.

Sélection de liens concernant les "hacks" et les feuilles de styles alternatives.

Eric Dupin, auteur de l'excellent blog "Presse-citron" a expérimenté avec douleur les dangers des "hacks". Voici sa réaction à chaud largement commentée par ses lecteurs.

Quand et comment utiliser les hacks et les feuilles de style alternatives ?

Vous devrez sans aucun doute utiliser des styles alternatifs si vous créez un site Web utilisant des CSS et que vous souhaitez le rendre compatible avec tous les navigateurs (browsers existants sur le marché). Lors de la conception de votre site, pensez à vérifier son bon affichage sur les navigateurs suivants (au minium) :

  • Explorer 7
  • Explorer 8
  • Explorer (dernière version)
  • FireFox
  • Safari
  • Google Chrome
Si votre design de site ne fonctionne pas sur l'un d'eux, une grande partie des internautes ne pourra pas naviguer sur votre site.
Google Chrome est-il le nouveau Explorer 6 des concepteurs de sites ?
Le blog webdesignerdepot s'interroge sur l'hégémonie croissante de Chrome et sur ses particularités qui obligent les designers de site Web à concevoir leurs sites d'une façon particulière (article en anglais).

Cette page explore les différentes méthodes de styles alternatifs et comporte les chapitres suivants :

  • Pourquoi des styles alternatifs
  • Les "hacks" : exemple, avantages et inconvénients
  • Les feuilles de style alternatives (commentaires conditionnels)
  • Styles alternatifs en javascript
  • Styles alternatifs en Php

Pourquoi des styles alternatifs ?

Les toutes premières versions d'Internet Explorer datent des années 90. Ce navigateur, qui fut pendant longtemps le plus utilisé au monde, à tenté de suivre petit à petit les évolutions des normes CSS avec plus ou moins de succès.

Même depuis sa version 7, Explorer traîne encore avec lui une façon bien particulière de comprendre et d'interpréter ces normes. Au point que ses comportement sont parfois tout bonnement incompatibles avec ceux de Firefox et Opera. Ce qui peut affecter l'accessibilité des utilisateurs pour ceux qui souhaitaient jouer au poker en ligne, ou pour tout autre type d'accés au Web.

Ainsi, pour pouvoir réaliser certaines mises en page, il n'existe pas d'autre solution que de mettre en place des styles particuliers, spécifiquement destinée à IE, et d'autres destinés aux autres navigateurs.

Trois méthodes peuvent être utilisées dans ce but :

  • Créer plusieurs feuilles de styles et faire en sorte que chaque navigateur puisse utiliser celle qui lui est destinée.
  • Utiliser des "hacks", c'est-à-dire des syntaxes qui ne seront comprises que par tel ou tel navigateur et qui vous permettrons de leur "parler en cachette".
  • Détecter le type et la version du navigateur grâce à un code javascript ou php et modifier vos styles CSS en fonction de ces données.

Notons qu'Internet Explorer n'est pas le seul navigateur à interpréter les normes de travers. Opera et Mozilla présentent aussi leurs petits défauts, et Firefox n'a pas toujours été irréprochable dans ses premières versions.

Voici quelques listes recensant les bugs des différents navigateurs :

  • Bugs d'Opera 6 et 7
  • Bugs de Mozilla/ Gecko
  • Bugs d'Explorer (toutes versions)
  • Bugs de tous les navigateurs

Les "hacks" : exemple, avantages et inconvénients

a) Exemple de hack

Cette déclaration :

body { _background:red }

sera comprise et interprétée par Internet Explorer dans ses versions 5.5 et 6, mais pas dans sa version 7 ni dans les suivantes. Elle ne sera pas non plus interprétée par Firefox ou Opera.

Cela signifie qu'une page comportant cette déclaration sera rouge sous IE 5.5 et 6, alors qu'elle restera blanche sous les autres navigateurs.

N'allez pas chercher de raison "scientifique" à cette différence de comportement. "_background" n'est pas une propriété CSS et ne devrait être acceptée par aucun navigateur. L'écriture correcte est "background" (sans underscore). Il se trouve simplement qu'IE fait parfois preuve d'une grande "tolérance" dans les syntaxes qu'il accepte.

L'utilisation de ce type de particularité est ce que l'on appelle un "hack".

Note : IE 7 n'interprête plus les propriétés précédées d'un underscore ("_") ou d'un tiret ("-"), mais il continue à interpréter les propriétés précédées des caractères suivants :

' ~ ! @ # $ % ^ & * ( ) = + [ ] { | , < > . / ? Exemple : "|background:red"

Les "hacks" destinés à ce navigateur ne sont donc pas tout à fait morts !

b) Avantages des "hacks"

  1. Les hacks permettent d'éviter la mise en place de feuilles de styles alternatives (voir plus bas) qui alourdissent les codes des pages.
    Quand un "petit" problème d'affichage demande une "petite" correction, il est tentant de passer par un "hack" plutôt que de mettre en place plusieurs feuilles de styles.
  2. Les hacks permettent de gérer les "particularités" d'Opera, de Mozilla ou de Firefox alors que les feuilles de styles alternatives ne permettent pas de mettre en place des styles spécifiques pour l'un ou l'autre de ces navigateurs. Notez toutefois qu'un petit bout de code javascript ou php vous permettra d'obtenir le même résultat avec moins de risques.

c) Inconvénients des "hacks"

  1. Même s'ils permettent de régler temporairement un problème d'affichage, les "hacks" représentent une source d'ennuis potentiels qu'il serait dangereux de sous-estimer.
    Les navigateurs évoluent en permanence. Comment savoir si le "hack" mis en place pour telle ou telle version aura toujours sa raison d'être pour les versions suivantes ? Et même si c'est le cas, comment savoir s'il continuera à fonctionner avec ces nouvelles versions ?
    Exemple 1 : ".monstyle {position:fixed;?position:absolute}" permettait de corriger un bug d'IE6 qui ne reconnaissait pas la propriété "position:fixed". Ce "hack" continuera à avoir de l'influence sur IE7, alors que ce dernier n'en a plus besoin.
    Exemple 2 : ".monstyle {_width:1%}" permettait de régler certains problèmes d'affichage sous IE6. Ce "hack" ne fonctionne plus avec IE7 qui présente pourtant dans certains cas les mêmes problèmes d'affichage.
  2. La plupart des "hacks" génèrent des erreurs lors de la validation par les vérificateurs de code. Même si cet inconvénient est mineur, il gênent l'interprétation de leurs résultats et sème le doute sur la qualité de votre code.

Disons-le tout net : nous vous déconseillons formellement de passer par des "hacks" pour régler les différences existantes entre les navigateurs.

Il existe souvent plusieurs façons d'obtenir la même mise en page. Avant de mettre en place un "hack", essayez plutôt de "contourner" le problème en utilisant d'autres techniques que celles qui posent problème.

Si vous devez malgré tout gérer les particularités de certains navigateurs (ce qui est hélas souvent nécessaire) procédez plutôt comme suit :

  • Pour toutes les particularités d'Internet Explorer, utilisez plutôt les feuilles de styles alternatives comme expliqué dans notre chapitre suivant.
  • Pour les autres navigateurs, utilisez plutôt les solutions javascript et php que nous décrivons plus bas.

d) Listes de "hacks"

  • Opera 6 (Owen hack)
  • Opera 6 et 7 (avec "nonsense")
  • Opera 7 (y compris les versions récentes)
  • Explorer (toutes versions - blog.pixarea.com)
  • Explorer (toutes versions - www.webdevout.net)
  • Tous navigateurs (dithered.chadlindstrom)
  • Tous navigateurs (css-discuss)

e) Le "GiantIsland" (hack universel)

Ce hack est conçu pour fonctionner avec tous les navigateurs existants en 2011. Il exploite plusieurs de leurs particularités pour permettre une gestion de style adapté à :
  • Mozilla
  • Mozilla (< version 1.01)
  • Google Chrome (2.01+), Opera, and Safari (4.0+)
  • Google Chrome (1.0 - 2.01), and Safari (1 - 3)
  • Internet Explorer 8
  • Internet Explorer 7
  • Internet Explorer 6
  • Internet Explorer 5
Vouc pouvez consulter une page donnant tous les détails sur ce hack sur le site de GiantIsland.

Voici les styles CSS :

CSS :

<style type="text/css">

#test1 {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:grey;\
color:black;
[color:black;
color:yellow;]
}
/*end*/
/*\*/
html*#test1 {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}

/*\*/
* html #test1 {
color:green;
}
/*end*/

</style>

et voici un exemple de code HTML démontrant le fonctionnement de ce hack :

HTML :

<div id="test1">
<p>Les navigateurs respectant les standards tels que Mozilla affichent ce bloc en noir.
</p>
<p>Les anciennes versions de Mozilla (&lt; 1.01) affichent ce bloc en rouge
</p>
<p style="background-color: rgb(119, 121, 119);">Google Chrome (2.01+), Opera, et Safari (4.0+) affichent ce bloc en jaune
</p>
<p>Google Chrome (1.0 - 2.01), et Safari (1 - 3) affichent ce bloc en bleu
</p>
<p>Internet Explorer 8 affiche ce bloc en gris
</p>
<p>Internet Explorer 7 affiche ce bloc en violet
</p>
<p>Internet Explorer 6 affiche ce bloc en vert
</p>
<p>Internet Explorer 5 affiche ce bloc en orange
</p>
</div>
Et voici pour finir, le bloc en question qui doit apparaître sous une couleur différente selon le navigateur que vous utilisez :

Les navigateurs respectant les standards tels que Mozilla affichent ce bloc en noir.

Les anciennes versions de Mozilla (< 1.01) affichent ce bloc en rouge

Google Chrome (2.01+), Opera, et Safari (4.0+) affichent ce bloc en jaune

Google Chrome (1.0 - 2.01), et Safari (1 - 3) affichent ce bloc en bleu

Internet Explorer 8 affiche ce bloc en gris

Internet Explorer 7 affiche ce bloc en violet

Internet Explorer 6 affiche ce bloc en vert

Internet Explorer 5 affiche ce bloc en orange

Les feuilles de style alternatives

Voici la voie royale pour mettre en place des styles uniquement destinés à Internet Explorer. Elle utilise ce que l'on appelle les "commentaires conditionnels" (Conditional comments).

Cette méthode garantie la compatibilité de vos pages avec les futures versions d'Explorer et la validation de votre code par tous les validateurs dédiés.

a) Principe

La norme HTML prévoit la possibilité d'intégrer des commentaires dans vos pages.

Syntaxe :

<!-- mon commentaire -->

Ces commentaires sont en principe totalement ignorés par les navigateurs.

Depuis la version 5 d'Explorer, Microsoft a toutefois exploité ces commentaires pour y loger une forme de code que l'on appelle "commentaires conditionnels".

Ces commentaires conditionnels permettent de faire figurer dans vos pages du code HTML qui ne sera interprété que par Internet Explorer.

Syntaxe générale :

<!--[if IE]>
  code HTML
<![endif]-->

b) Sélectionner une version d'Internet Explorer

La syntaxe générale décrite ci-dessus admet plusieurs variations qui permettent de sélectionner la version d'IE à laquelle le code s'adresse :

<!--[if IE]>
  code HTML
<![endif]--> 		"code HTML" sera interprété par toutes les versions d'IE.
<!--[if IE 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par Internet Explorer 6 (vous pouvez remplacer le "6" par "5.5" ou par "7" pour adresser un bout de code à une autre version d'IE).
<!--[if IE lt 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par les versions d'Internet Explorer antérieures à la version 6 (vous pouvez remplacer le "6" par "5.5" ou par "7" pour adapter ce comportement à vos besoins).
<!--[if IE glt 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par les versions d'Internet Explorer supérieures ou égales à la version 6 (c'est à dire par les version 6 et 7 - vous pouvez remplacer le "6" par "7" pour destiner le code à la version 7 et plus).
<!--[if IE gt 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par les versions d'Internet Explorer supérieures à la version 6.

Exemple :

<!--[if IE 6]>
  body {background-color:red;}
<![endif]-->

La page ne sera rouge que lorsque vous la visualisez avec Internet Explorer version 6.

c) Syntaxe négative

Blog-and-blues explique très clairement comment utiliser une syntaxe négative, c'est à dire comment faire en sorte qu'un style soit interprété par tous les navigateurs, sauf Internet Explorer, ou sauf une version particulière d'Internet Explorer.

Styles alternatifs en javascript

Pour adapter des styles à une version précise d'un navigateur particulier, le javascript peut être une alternative très intéressante, surtout si le navigateur en question est Mozilla, Mozilla FireFox, ou Opera.

Le seul inconvénient de cette méthode est quelle ne fonctionnera pas pour les internautes ayant désactivé le javascript (5 à 10% de la population selon les sources).

En raison de cette faiblesse, et si la chose est possible avec votre serveur, vous devrez plutôt vous orienter vers la solution php proposée dans notre paragraphe suivant.

A titre d'exemple, nous allons supposer que vous souhaitiez attribuer une couleur de texte différente en fonction de chaque type de navigateur :

Code :

<script language="JavaScript">
if((navigator.appName.indexOf("Explorer") >= 0)
&& (navigator.appVersion.indexOf('6')>=0 ))
{
document.writeln('<style
type="text/css">');
document.writeln("body { color:blue }");
document.writeln('</style>');
}
if((navigator.appName.indexOf("Explorer") >= 0)
&& (navigator.appVersion.indexOf('7')>=0 ))
{
document.writeln('<style
type="text/css">');
document.writeln("body { color:orange }");
document.writeln('</style>');
}
if((navigator.appName.indexOf("Netscape") >= 0)
&&
(navigator.userAgent.indexOf("Mozilla") >= 0) &&
(navigator.userAgent.indexOf("Firefox") <= 0))
{
document.writeln('<style
type="text/css">');
document.writeln("body { color:black }");
document.writeln('</style>');
}
if((navigator.appName.indexOf("Netscape") >= 0)
&&
(navigator.userAgent.indexOf("Mozilla/4") >= 0)
&&
(navigator.userAgent.indexOf("Firefox") <= 0))
{
document.writeln('<style
type="text/css">');
document.writeln("body { color:red }");
document.writeln('</style>');
}
if(navigator.userAgent.indexOf("Firefox") >= 0)
{
document.writeln('<style
type="text/css">');
document.writeln("body { color:brown }");
document.writeln('</style>');
}
if(navigator.userAgent.indexOf("Firefox/2") >= 0)
{
document.writeln('<style
type="text/css">');
document.writeln("body { color:green }");
document.writeln('</style>');
}
if(navigator.userAgent.indexOf("Opera") >= 0)
{
document.writeln('<style
type="text/css">');
document.writeln("body { color:violet }");
document.writeln('</style>');
}
</script>

Ce code est à inclure dans la section <head> de votre page. Il attribuera les couleurs de texte suivantes aux navigateurs correspondants :

Explorer 6 | Bleu
Explorer 7 | Orange
Mozilla 4 | Rouge
Autres versions de Mozilla | Noir
Firefox 2 | Vert
Autres versions de Firefox | Marron
Opera | Violet

Il ne vous reste plus qu'à supprimer les tests n'ayant pas d'intérêt pour vous et à remplacer "body { color:xxxxx }" par l'attribution de styles que vous voulez réserver à tel ou tel navigateur.

Vous pouvez aussi remplacer les 3 lignes

 document.writeln('<style
type="text/css">');
document.writeln("body { color:orange }");
document.writeln('</style>');

Par une ligne telle que :

document.writeln('<link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />');

afin de charger une feuille de style entière, dédiée au navigateur visé.

Styles alternatifs en pHP

Pour adapter des styles à une version précise d'un navigateur particulier, le PHP est une solution supérieure à celle du chapitre précédent. Elle permet de gérer tous les navigateurs dans toutes leurs versions et ne verra son fonctionnement bloqué que pour les internautes ayant installé un système empêchant de détecter leur navigateur (cas rarissime).

Pour l'illustrer, nous reprenons l'exemple du chapitre précédant consistant à attribuer une couleur de texte différente en fonction de chaque type de navigateur :

Code :

 <style
type="text/css">
<?php
if (ereg("MSIE 6.0", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Internet Explorer 6 */
echo 'body {color:blue;}';
/* Fin de la feuille de style pour Internet Explorer 6 */
} else if (ereg("MSIE 7", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Internet Explorer 7 */
echo 'body {color:orange;}';
/* Fin de la feuille de style Internet Explorer 7 */
} else if ((ereg("Mozilla/", $_SERVER["HTTP_USER_AGENT"]))
&&
(!ereg("Firefox", $_SERVER["HTTP_USER_AGENT"])) &&
(!ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]))) {
/* Début de la feuille de style Mozilla */
echo 'body {color:black;}';
/* Fin de la feuille de style pour Mozilla */
} else if ((ereg("Mozilla/4", $_SERVER["HTTP_USER_AGENT"]))
&&
(!ereg("Firefox", $_SERVER["HTTP_USER_AGENT"])) &&
(!ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]))) {
/* Début de la feuille de style Mozilla 4 */
echo 'body {color:red;}';
/* Fin de la feuille de style pour Mozilla 4 */
} else if (ereg("Firefox/2", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style Firefox 2*/
echo 'body {color:green;}';
/* Fin de la feuille de style Firefox 2*/
} else if (ereg("Firefox/", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style Firefox */
echo 'body {color:brown;}';
/* Fin de la feuille de style Firefox */
} else if (ereg("^Opera/", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Opera */
echo 'body {color:violet;}';
/* Fin de la feuille de style pour Opera */
} else {
/* Début de la feuille de style pour les navigateurs autres */
/* Fin de la feuille de style pour les navigateurs autres */
}?>
</style>

Ce code est à inclure dans la section <head> de votre page. Il attribuera les couleurs de texte suivantes aux navigateurs correspondants :

Explorer 6 | Bleu
Explorer 7 | Orange
Mozilla 4 | Rouge
Autres versions de Mozilla | Noir
Firefox 2 | Vert
Autres versions de Firefox | Marron
Opera | Violet

Il ne vous reste plus qu'à supprimer les tests n'ayant pas d'intérêt pour vous et à remplacer "body { color:xxxx }" par l'attribution de styles que vous voulez réserver à tel ou tel navigateur.

Vous pouvez aussi utiliser un code tel que :

<?php
if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Internet Explorer*/
echo '<link href="mes-styles.css" media="all"
rel="stylesheet" type="text/css" />';
/* Fin de la feuille de style pour Internet Explorer*/
}?>

afin de charger une feuille de style entière, dédiée au navigateur visé (Explorer, dans cet exemple).

A lire aussi : Correction de la "Box model" en php.

Le copyright de cette page appartient à css-faciles.

 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie
Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS Problèmes et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


Tableaux contre CSS : un combat truqué

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

opposer les balises tables aux css

Tableau contre CSS : un combat truqué

A en croire certains, la mise en page par tableaux est une technique désuète qui doit être abandonnée sans faute au profit des CSS. La transition n'est pas, hélas, aussi simple qu'on pourrait le souhaiter.

Pour savoir comment effectuer des mises en page sans tableau à l'aide des CSS, consultez nos pages :

  • Mise en page avec les CSS
  • Faire des tableaux...
    sans tableaux

Dans un billet très agréable à lire, Sergio Villarreal s’est amusé à comparer la création d’une maquette à l’aide de tableaux avec celle d’une maquette basée sur des CSS. Le suspens et l’humour viennent agrémenter la remise en question courageuse de ce vieux routier du Web qui - au risque de se voir pourfendre par les soldats de la pensée unique - se lance dans une interrogation iconoclaste : «avons-nous finalement choisi la meilleure voie en utilisant les CSS ?».

Sélection de liens concernant
le dilemne : "tableaux
versus CSS"

Ces liens pointent vers des pages dont les contenus complètent notre article.

Un mariage harmonieux entre tableau et CSS sur le blog la-grange

Le jour où Marie Alhomme a craqué

"CSS ou tableaux, la vérité enfin dévoilée", par Presse-Citron

Table vs div : dis papa, racontes-moi encore les tableaux.
où Bruno Bichet dis ce qu'il pense... mais sans oser le dire.

Habillage de tableaux avec des CSS
Comment améliorer la présentation d'un tableau en utilisant les CSS.

Une discussion sur AlsaCréations

Un peu d'histoire...

Au début de l'existence d'Internet (années 1990) la norme CSS n'existait pas et la seule option dont les webmasters disposaient pour la mise en page de leurs sites était l'utilisation de tableaux (balise HTML <Table>. La plupart des logiciels permettant une création de page Web en WYSIWYG (What You See Is What You Get - c'est à dire sans devoir manipuler des lignes de code) utilisent encore les tableaux, car il est assez simple de créer une mise en page en se basant sur cette technique. Le design de sites Web à l'aide de CSS est rendu complexe par le fait que cette technique est très peu adaptée à une manipulation de type WYSIWYG.

Qui sont les bons, qui sont les méchants ?

L’issue du match est sans surprise : c’est évidemment la mise en page par CSS qui remporte la préférence de notre aventurier. Cela dit, et même si sa conviction initiale a forcément influencé la conclusion de cette expérience, l’effort d’objectivité qui domine cet article apporte un éclairage intéressant sur les avantages et inconvénients respectifs des deux méthodes.

Là où le match est truqué, c’est que l’on met face à face une mise en page sans aucune utilisation de CSS avec une mise en page entièrement en CSS.

Aussi intéressant que soit ce scénario d’un point de vue théorique, il ne correspond pas au type de choix que doit faire un concepteur de site de nos jours : à moins d’être un ayatollah de l’anti-CSS, vous ferez sans doute le choix d’utiliser chacune de ces techniques pour ce qu’elle peut offrir de meilleur.

Deux scénarii bien différents sortiraient de cette approche pratique :

  • Construire sa page à l’aide de tableaux et utiliser les marges et les paddings CSS pour minimiser les tableaux imbriqués et pour pouvoir se passer des Gifs transparents.
  • Construire sa page à l’aide de CSS et faire appel aux tableaux quand se pose un problème de compatibilité trop sévère entre plusieurs navigateurs ou quand on rencontre un cas particulier de mise en page qui n’est pas communs à plusieurs pages du site.

Nous n’avons pas pris le temps de refaire le match de Sergio Villarreal sur la base de ces nouveaux scénarii, mais sans aucun doute possible, c’est la deuxième approche que nous ferions gagner.

Si l’intérêt d’une mise en page à base de CSS est sans doute incontestable pour une maquette globale, utilisable sur l’ensemble des pages d’un site, elle nous semble discutable lorsque telle ou telle page pose un problème de mise en page particulier.

L’utilisation de tableaux pour régler ces problèmes ponctuels est souvent bien plus rapide et bien plus efficace que la création d’un style qui ne resservira plus.

Un débat théorique qui masque le vrai problème

Le vrai problème de la mise en page par CSS vient d'abord du manque d'outils consacrés à cette tâche. Les geeks qui mangent du code HTML au petit-déjeuner et qui font des rêves entièrement en CSS devraient prendre conscience du fait que, pour un débutant, le débat se résume souvent à :

  • Faire une mise en page à base de tableaux en utilisant des outils graphiques WYSIWYG très intuitifs = quelques heures d'apprentissage pour obtenir un résultat parfaitement opérationnel.
  • Faire une mise en page à base de CSS = des heures de lectures et les mains dans le code pour obtenir un résultat qui ne fonctionnera pas sur certains navigateurs.

La mise en page par tableau est sans aucun doute la partie du code HTML qui a suscité le plus d'effort de la part des développeurs de logiciels graphiques. Ces efforts ont abouti à des outils efficaces ayant une prise en main rapide.

Depuis 15 ans que les CSS s'imposent peu à peu comme une norme, ces mêmes éditeurs ce sont curieusement bien peu intéressés à ce système. Bien qu'Amaya, Tidy, WYM et Nvu semblent aller dans la bonne direction, leur utilisation n'est pas encore aussi simple qu'on pourrait le souhaiter.

Nul doute, pourtant, que le jour où des outils performant seront sur le marché, le combat "tableaux contre CSS" cessera de lui-même !

En attendant, et quitte à craquer aussi souvent que nécessaire pour une mise en page par tableaux, rien n'interdit de réfléchir aux problèmes d'accessibilité qu'ils peuvent poser. Lire à ce sujet l'article de Roger Johansson proposé sur "Pompage".

Pour savoir comment effectuer des mises en page sans tableau à l'aide des CSS, consultez nos pages :

  • Mise en page avec les CSS
  • Faire des tableaux...
    sans tableaux

Cette page s'inspire dune page de RankSpirit. Elle a été complétée par css-faciles.

 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles Réflexions... Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


10 astuces en CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

trousse à outils

10 trucs à savoir

Voici une petite collection d'astuces réglant des problèmes souvent rencontrés avec les CSS lors de la création de sites Web

Sélection de liens concernant les trucs et astuces des CSS

Ces liens pointent vers des pages dont les contenus complètent notre article.

Astuces CSS
du Mozilla Developer Center. Cette page comporte peu de chapitres, mais ils sont de grande qualité.

Trucs et astuces CSS 1
Les trucs de Roger Johansson traduits par Normand Lamoureux.

Trucs et astuces CSS 2
La deuxième partie des trucs de Roger Johansson traduits par Normand Lamoureux.

Les trucs et astuces de Webby

Les trucs et astuces de Gyrillus

Créez un site en utilisant les CSS : 10 trucs et astuces

1. Abréger l'écriture des règles CSS de police

Lorsque vous donnez un style à une police en CSS, vous le faites peut-être comme ceci :

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

Non seulement ce n'est pas nécessaire, mais le raccourci suivant existe :

font: 1em/1.5em bold italic small-caps verdana,serif;

C'est bien mieux, non ?

Un petit avertissement : cette notation abrégée ne fonctionnera que si vous spécifiez font-size et font-family. De plus, si vous ne spécifiez pas font-weight, font-style, ou font-variant, ces valeurs prendront automatiquement la valeur par défaut qui est normal. Gardez ceci en tête.

2. Deux classes ensemble

Habituellement, les attributs ne sont assignés qu'à une classe, mais cela ne signifie pas qu'il ne soit pas permis de faire autrement. En réalité, vous pouvez assigner autant de classes que vous le souhaitez.

<p class="text side">...</p>

Utiliser ces deux classes ensemble (séparées par une espace et non par une virgule) signifie que le paragraphe va appliquer à la fois les règles assignées à text et celles assignées à side. Si certaines règles se contredisent, c'est la dernière classe dans l'ordre d'écriture qui aura préséance.

3. La valeur par défaut des bordures CSS

Lorsque vous écrivez une règle de bordure, vous en spécifiez généralement la couleur, la largeur et le style (dans n'importe quel ordre).

Par exemple,

border: 3px solid #000;

donnera une bordure noire, solide, d'une épaisseur de 3 pixels. Pourtant, la seule valeur requise, ici, est le style de la bordure .

Si vous indiquez simplement border: solid; les valeurs par défaut pour cette bordure seront utilisées. Mais quelles sont-elles? Eh bien, la largeur par défaut d'une bordure est medium (l'équivalent de 3 ou 4 pixels) et la couleur par défaut est celle du texte dans la bordure. Si vous voulez l'une ou l'autre de ces valeurs, vous pouvez les laisser de côté dans votre règle CSS !

4. !important est ignoré par IE6

Normalement, en CSS, la dernière règle spécifiée a préséance sur les autres. Par contre, si vous utilisez !important après une règle, c'est cette dernière qui a préséance, peu importe ce qui apparaît après. Cette règle est valable pour tous les navigateurs, excepté IE6. En voici un exemple :

margin-top: 3.5em !important; margin-top: 2em;

Ainsi, la marge du haut aura 3.5em pour tous les navigateurs, sauf IE6 , dont la marge du haut aura 2em. Cette technique peut être pratique, en particulier lorsque vous utilisez des marges relatives (comme dans cet exemple), puisqu'elles peuvent être rendues différemment dans IE6 et d'autres navigateurs.

(Beaucoup d'entre vous savent par ailleurs que le contenu des règles relatives aux sélecteurs d'enfant (child selector) sont ignorées par IE6.)

5. Technique de remplacement d'images

Même si vous concevez votre site sans CSS, il est toujours préférable d'utiliser du balisage HTML pour afficher du texte, plutôt que d'utiliser une image. Vous favorisez ainsi un téléchargement plus rapide, sans compter les bénéfices reliés à l'accessibilité. Toutefois, si vous désirez absolument utiliser une police de caractères particulière et qu'il y ait peu de chance pour que vos visiteurs l'aient installée, vous n'avez alors d'autre choix que celui d'utiliser une image.

Par exemple, si vous voulez que l'en-tête de chaque page soit « Achetez des gadgets » (puisque vous vendez des gadgets) et que vous souhaitez que cette phrase soit prise en compte par les engins de recherche, vous pouvez choisir une police de caractères obscure et utiliser une image :

<h1><img src="widget-image.gif" alt="Achetez des gadgets" /></h1>

Cette technique fonctionne, mais les engins de recherche n'accordent pas autant d'importance au contenu d'un alt qu'à du vrai texte (parce que de nombreux webmestres profitent de l'attribut alt pour camoufler des mots-clés). Une autre méthode serait :

<h1><span>Achetez des gadgets</span></h1>

De toute évidence, votre police obscure ne sera pas utilisée ici. Pour régler ce problème, vous pouvez ajouter ces règles dans vos documents CSS :

h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left: -2000px;
}

L'image avec votre police élaborée sera maintenant visible, tandis que le texte normal sera hors champ, situé à 2000 pixels à gauche de l'écran grâce à notre règle CSS .

6. Une solution au bidouillage de boîtes (box-model hack)

Le bidouillage de boîtes ( box-model hack ) est utilisé pour régler un problème de rendu qui date d'avant IE 6, lorsque la bordure et le remplissage ( padding ) sont inclus dans la largeur totale d'un élément, plutôt qu'ajouté à ce dernier. Par exemple, pour spécifier les dimensions d'un contenant, vous pourriez utiliser la règle suivante :

#box
{
width: 100px;
border: 5px;
padding: 20px;
}

Cette règle sera appliquée à :

<div id="box">...</div>

Ce qui signifie que la largeur totale de la boîte sera de 150 pixels (une largeur de 100 pixels + deux bordures de 5 pixels + 2 paddings de 20 pixels) dans tous les navigateurs, sauf ceux qui datent d'avant IE 6. Dans ces derniers, le total sera seulement de 100 pixels, le padding et la bordure étant implicitement compris dans cette largeur. Le bidouillage de boîtes peut être utilisé pour régler ce problème, mais il peut devenir très chaotique .

Une solution simple consiste à utiliser la feuille de style suivante :

#box
{
width:
150px;
}

#box div {
border:
5px;
padding:
20px;
}

Et le nouveau HTML serait :

<div id="box"> <div> ... </div> </div>

Parfait ! Maintenant, la boîte aura toujours 150 pixels de large, quel que soit le navigateur !

7. Centrer un élément de type bloc

Disons que vous voulez avoir une mise en page avec une largeur fixe, mais dont le contenu flotte au milieu de l'écran. Vous pouvez utiliser la règle CSS suivante :

#content
{
width: 700px;
margin: 0 auto;
}

Vous allez alors ajouter <div id="content"> autour de chaque item du corps du document HTML ( body ), qui aura automatiquement une marge à gauche et à droite, assurant ainsi que l'élément est toujours placé au centre de l'écran. Simple... pas vraiment – nous avons toujours à nous inquiéter des navigateurs antérieurs à IE 6, étant donné que ces derniers n'alignent pas au centre les éléments ayant cette règle CSS . Il faudra changer la règle pour ceci :

body
{
text-align: center ;
}

#content
{
text-align: left ;
width: 700px;
margin:
0 auto;
}

Cette règle va aligner le contenu principal, mais aussi le texte. Pour empêcher cet effet, probablement non souhaité, on ajoute text-align: left; dans le div content.

8. Alignement vertical avec des CSS

L'alignement vertical était facile à réaliser avec des tableaux . Pour aligner le contenu d'une cellule au milieu, on utilisait simplement vertical-align: middle; Ceci ne fonctionne pas vraiment avec une mise en page CSS. Par exemple, si vous avez un élément du menu de navigation dont la hauteur est de 2em et que vous insérez une règle pour l'alignement vertical dans la feuille de style, cela ne fera pas vraiment de différence et le texte sera tout de même aligné en haut de la boîte.

Hum... Ce n'est pas l'effet souhaité. La solution ? La hauteur de la ligne doit être la même que la hauteur de la boîte elle-même dans la feuille de style. Si la boîte a une hauteur de 2em, nous ajoutons alors line-height: 2em; dans les règles CSS, et le texte flotte maintenant au milieu de la boîte. Et voilà !

9. Positionnement CSS avec un contenant

L'un des aspect les plus intéressants des feuilles de style demeure la capacité de positionner un objet absolument n'importe où dans un document. Il est aussi possible (et même souhaitable) de placer des objets dans un contenant. C'est très simple à faire. Il s'agit simplement d'assigner cette règle au contenant :

#container
{
position: relative;
}

Ainsi, n'importe quel élément à l'intérieur du contenant sera désormais positionné relativement à ce dernier. Par exemple, vous avez cette structure HTML :

<div id="container"><div id="navigation">...</div></div>

Pour positionner le bloc navigation à exactement 30 pixels de la gauche et 5 pixels du haut par rapport au contenant, vous pourriez utiliser ces règles CSS :

#navigation
{
position: absolute;
left: 30px;
top: 5px;
}

Dans cet exemple, vous auriez également pu utiliser margin: 5px 0 0 30px; mais dans certains cas, il est préférable d'utiliser du positionnement.

A lire également : la mise en page en CSS.

10. Couleur de fond allant jusqu'au bas de l'écran

L'un des inconvénients des CSS est l'incapacité de contrôler l'alignement vertical des éléments, ce qui entraîne un problème qui était inexistant dans les mises en page avec des tableaux. Par exemple, vous avez une colonne contenant la navigation qui va jusqu'au bas du côté gauche de la page. Votre page a un fond blanc, mais vous voulez que la colonne de gauche ait un fond bleu. C'est simple : vous lui assignez la règle CSS appropriée :

#navigation
{
background: blue;
width: 150px;
}

Malgré tout, un problème demeure : comme les éléments de navigation ne descendent pas jusqu'au bas de l'écran, la couleur de fond ne suit pas. Le bleu du fond de la page est coupé vers le milieu de celle-ci, cassant votre superbe design. Que faire ?

Malheureusement, la seule solution consiste à tricher en assignant au corps une image de fond qui aura exactement les mêmes couleur et largeur que la colonne de gauche. Vous pourriez utiliser cette règle CSS :

body
{
background: url(blue-image.gif) 0 0 repeat-y;
}

Cette image située en arrière-plan devrait avoir exactement 150 pixels de large et être du même bleu que le fond de la colonne de gauche. L'inconvénient de cette méthode est que vous ne pouvez décrire la colonne avec des em, car si l'usager change la taille du texte et que la colonne grandit, la couleur de fond ne bougera pas.

Lors de la rédaction de ce texte, le 1er septembre 2004, la seule solution à ce problème particulier consistait à définir une taille en pixels à la colonne lorsque vous voulez une couleur de fond différente du reste de la page.

Le texte original de cette page provient du site http://w3qc.org.
Ecrit par Trenton Moss pour webcredible, la traduction est de Chantal Ide, l'adaptation est de CSS-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS Problèmes et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :
1. Règles des polices 2. Deux classes ensemble 3. Règles des bordures 4. !important ignoré par IE6 5. Remplacement d'images 6. Box-model hack 7. Centrer un élément 8. Alignement vertical 9. Positionnement 10. Fond jusqu'en bas


Héritage et cascade des styles CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Heritages et cascades

Comment les styles CSS se combinent entre eux
et se transmettent de balises en balises

Comme l'explique notre page d'introduction, il existe plusieurs façon possibles de définir des styles CSS. Ces styles peuvent se combiner entre eux pour définir l'apparence finale de vos pages.

Fort heureusement, ces règles de combinaison sont assez simples à comprendre et à mettre en pratique. Vous devrez les maitriser avant de passer à la création de votre site Web.

Sélection de liens concernant l'héritage de propriétés et les cascades.

Ces liens pointent vers des pages dont les contenus complètent notre article.

L'héritage en CSS
Pour ceux qui auraient eu du mal à suivra nos explications, voici un cours trés simple sur l'héritage des propriétés CSS.

Comprendre l'héritage et la parenté des styles CSS
Cette page comporte des explications sur Le modèle "Parent-Enfant(s)", sur le Cas de la balise de lien <a>, sur L'Héritage par imbrication des Classes ou des Id ainsi qu'un exemple d'utilisation de ces notions à travers un menu sous forme de liste.

L'assignation des valeurs des propriétés, la cascade et l'héritage
Cette page est une traduction d'un document du W3C. Cette traduction est précise, mais les termes employés sont parfois un peu complexes.

Cette page aborde en tout cas des points trés approfondis de l'héritage et des cascades.

Cascade CSS
et priorité des sélecteurs
C'est surtout pour ses précisions sur les sélecteurs que cette page est intéressante.

Elle explique le rôle et l'utilité du sélecteur nommé "!important" et évoque l'existence des sélecteurs de medias tels que screen, print, handheld, projection et voice-family.

Pour en savoir plus sur les sélecteurs de medias, lisez :
tous les types de sélecteurs.

Comprendre la cascade
Cette page analyse à fond les priorités des définitions en cascades. C'est l'occasion de constater que les choses sont bien moins simples qu'il n'y paraît !

Les pseudo-classes
Yoyodesign fait le point sur les mystérieuses pseudo-classes que notre article ne fait qu'évoquer.

GouBlog met en évidence un bug d'Internet Explorer 6 qui ne supporte que 4 niveaux d'héritage lors de l'utilisation de la règle @import.

Toutes les règles ci-contre sont à maîtriser si vous compter créer votre site Web en langage HTML tout en utilisant des styles CSS.

Résumé des règles

  1. Le style d'un élément HTLM peut être hérité d'un élément "parent".
  2. Les styles définis en dernier remplacent les styles définis auparavant.
  3. Les styles se combinent entre eux, quelle que soit la façon dont on les a définis.
  4. Une définition de style peut préciser la façon dont le style s'applique : à quels éléments, à quelles classes, à quels ID, dans quel contexte.
  5. On peut attribuer un style à un emboîtement particulier d'éléments HTML
1- Le style d'un élément HTLM peut être hérité d'un élément "parent".

Certains styles, tels que le type de caractère, sa couleur, l'alignement du texte, etc., se transmettent automatiquement des blocs HTML "parents" vers leurs "enfants". D'autres styles tels que la bordure, et les marges (margin et padding) ne se transmettent pas.

Example :

<div style="font-family:Times; padding-left:30px;">

Cette première phrase sera écrit en Times.

<p>
Ce paragraphe sera également écrit en Times car sa propriété "font-family" sera héritée de son parent <div>. Par contre, ce paragraphe ne sera pas décalé sur la droite par rapport à la première phrase, car la propriété padding ne se transmet pas par héritage.
</p>

</div>

Dans cet exemple, le bloc <div> est parent, du paragraphe <p> (il le contient). On pourra également dire que <p> est enfant de <div> (il est contenu par <div>)

En théorie, il est possible de "forcer" l'héritage d'une propriété non-héritable en précisant, par exemple : <p style="padding:inherit" >. Malheureusement, Internet Explorer ne supporte pas l'attribut inherit, même dans sa version 7. Nous devrons donc nous passer de cette possibilité et re-préciser explicitement les propriétés non-héritables que nous souhaitons appliquer aux éléments enfants :

Example :

<div style="font-family:Times; padding-left:30px;">

Cette première phrase sera écrit en Times.

<p style="padding-left:30px" >
Ce paragraphe sera également écrit en Times car sa propriété "font-family" sera héritée de son parent <div>. Ce paragraphe sera également décalé sur la droite par rapport à la première phrase, car nous avons répété le "padding" qui ne se transmet pas par héritage. </p>

</div>

2- Les styles définis en dernier remplacent les styles définis auparavant.

Si vous définissez une proprité de style et que vous re-définissez plus tard la même propriété pour le même type d'objet, c'est la dernière définition qui sera prise en compte par les navigateurs.

Example :

CSS
Cette définition de style est à placer dans la section <head> de votre page ou dans une feuille de styles séparée.

p {
  color:green;
}

HTML
<p>Ce texte sera en vert.</p>

<p style="color:blue" >Ce texte sera en bleu parce que la propriété "color:blue" est la dernière à avoir été définie pour ce paragraphe.</p>

Cette règle du "dernier-gagnant" s'applique aussi dans le cas ou vous avez une combinaison de feuilles de styles séparées + définitions de style dans l'en-tête de la page (<head>).

3- Les styles se combinent entre eux, quelle que soit la façon dont on les a définis.

Les styles qui s'appliquent à un élément peuvent être une combinaison de n'importe quelles listes de définitions :

  • Une ou plusieurs feuilles de styles externes,
  • Les définitions placées dans l'en-tête de la page,
  • Les définitions placées directement dans la balise de l'élément HTML,
  • Les définitions héritées des blocs-parents.

Voici un exemple complexe combinant ces possibilités :

Document "mes-styles.css"

.ma-classe {
  border:2px dashed red;
}
#mon-ID {
  font-size:large;
  color:white;
}
body {
  font-weight:bold;
}

Document "ma-page.html"

<head>
<link href="mes-styles.css" media="screen"
rel="stylesheet" type="text/css" />
<style type="text/css">
.ma-classe {
background-color:orange;
}
</style>
</head>

<body>
  <div class="ma-classe" id="mon-ID" style="font-style:italic;">

Exemple de texte.

  </div>
</body>

Dans cette exemple, la classe "ma-classe" s'est vu attribuer un cadre rouge dans la feuille de style séparée et un fond orange dans l'en-tête de la page. Le bloc <div> comportant le texte d'exemple récupère tous les styles de la classe "ma-classe", plus les styles définis dans "mon-ID" auxquels on ajoute le style "italic" défini directement dans la balise.

De plus, ce paragraphe hérite du style font-weight:bold qui a été attribué à son parent <body>.

4- Une définition de style peut préciser la façon dont le style s'applique : à quels éléments, à quelles classes, à quels ID, dans quel contexte.

Pour préciser les conditions dans lesquelles un style va s'appliquer, vous avez plusieurs possibilités :

  • Préciser le type d'élément HTML
  • Préciser la classe
  • Préciser l'ID
  • Préciser le "type modifier" (ou pseudo-classe)

Dans Premiers pas avec les CSS, nous citons plusieurs exemples qui démontrent comment définir un style pour un type d'élément (tel que <p>, par exemple), pour une classe ou pour un ID.

Il nous reste donc à aborder la notion de "type modifier".

Le principe du "type modifier" et de préciser dans quel contexte un style va s'appliquer ou non à un élément HTML. Les "type modifiers" sont très peu nombreux. Nous nous contenterons d'examiner ceux qui sont reconnus par tous les navigateurs. Ils s'appliquent tous les quatre à la balise <a> qui sert à créer un lien :

  • a:hover : permet de préciser l'apparence d'un lien lorsque l'utilisateur survol le lien avec sa souris.
  • a:active : permet de préciser l'apparence d'un lien lorsque l'utilisateur clique sur ce lien.
  • a:visited : permet de préciser l'apparence d'un lien lorsque l'utilisateur a déjà cliqué sur ce lien.
  • a:link permet de restreindre la définition de styles aux "vrais" liens, car la balise <a> peut également être utilisée pour positionner des ancres à l'intérieur d'une page.

Exemple :

CSS
Cette définition de style est à placer dans la section <head> de votre page ou dans une feuille de styles séparée.

  a {color:brown;font-weight:bold;}
  a:hover {color:red;}
  a:active {color:blue;}
  a:visited {color:purple;}

HTML
<a href="recherche.php"> Exemple de lien </a>

NOTE : les "type modifiers" sont également appelés "pseudo-classes".

5- On peut attribuer un style à un emboîtement particulier d'éléments HTML

Cette dernière règle offre une trés grande souplesse dans la définition des styles.

Vous pouvez par exemple souhaiter afficher les liens situés à gauche de votre page en vert et ceux de droite en rouge. Voici comment vous pouvez procéder :

CSS

Propriétés communes aux deux classes.

  .bloc-gauche, .bloc-droite{
    position:absolute;
    top:0px;
    width:60px;
    border:1px solid orange;
  }

Propriétés propres à chaque classe.

  .bloc-gauche {left:0px;}
  .bloc-droite (right:0px;}

Couleur des liens pour chaque classe.

  .bloc-gauche a
{color:green; left:0px;}
.bloc-droite a (color:red;
right:0px;}

HTML

Utilisation des classes dans votre code HTML.

<div class="bloc-gauche">
<a href="page1.php">Lien 1 </a><br>
<a href="page2.php">Lien 2 </a><br>
<a href="page3.php">Lien 3 </a><br>
</div>

<div class="bloc-droite">
<a href="page1.php">Lien 1 </a><br>
<a href="page2.php">Lien 2 </a><br>
<a href="page3.php">Lien 3 </a><br>
</div>

Résultat :

Lien 1
Lien 2
Lien 3
Lien 1
Lien 2
Lien 3

Notez la formulation

.bloc-gauche, .bloc-droite{}

qui permet d'attribuer aux deux classes des propriétés de styles identiques, sans avoir à les déclarer deux fois.

On peut aussi définir un style particulier pour un emboîtement précis d'éléments HTML.

Exemple 1 - emboîtement de <p> dans <div> :

CSS
  div p{font-weight:bold};

HTML
<p>Ce paragraphe n'est pas en gras</p>

<div>
<p>Ce paragraphe est en gras car il est à l'intérieur d'un bloc div</p>
</div>

Exemple 2 - emboîtement de <p> dans 2 <div> successifs :

CSS
  div div p{font-weight:bold};

HTML
<div>
<div>
Ce texte n'est pas en gras car il n'est pas dans un paragraphe.
<p>Ce paragraphe est en gras car il est à l'intérieur de deux blocs div emboîtés, ce qui correspond bien à notre définition de style</p>
</div>
</div>

Exemple 3 - emboîtement d'une classe dans un div:

CSS
  .mon_style{font-weight:bold};

<-- Emboîtement

  div .mon_style{font-style:italic};

HTML
<p class="mon_style">Ce paragraphe est en gras</p>

<div>
  <p class="mon_style">Ce paragraphe est en gras et en italique</p>
</div>

<p>Ce paragraphe est écriture normale</p>

<div>Ce paragraphe est écriture normale</div>

Attention : Ne confondez pas la déclaration suivante :

  div .mon_style{font-style:italic};     (avec un espace)

Avec celle-ci :

  div.mon_style{font-style:italic};     (sans espace)

Ou avec celle là :

  div, .mon_style{font-style:italic};     (avec une virgule)

Dans le premier cas, tout élément ayant les particularités suivantes :

  1. - l'élément à la classe "mon_style"
  2. - l'élément est emboîté dans un élément <div>

sera en italique (dans notre exemple, on constate que cela fonctionne avec l'élément <p>).

Dans le deuxième cas, seuls les éléments <div> ayant pour classe "mon_style" seront en italique (il ne sagit donc pas d'emboîtement mais de la définition du contexte dans lequel "mon_style" doit s'appliquer ).

Dans le troisième cas, tous les éléments <div> et tous les éléments ayant pour classe "mon_style" seront en italique. Il s'agit d'une déclaration commune de propriété .

Le copyright de cette page appartient à css-faciles.

 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :
Résumé des règles


Mise en page et CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

positionnement en CSS

Mise en page et CSS

Notions de base et exemples

Bien maîtrisée, la mise en page par CSS peut permettre une souplesse formidable lors de la création de votre site Internet. En séparant totalement le contenu de sa présentation, vous aurez la liberté de faire évoluer le design de votre site Web en toute simplicité.

Sélection de liens concernant
la mise en page par CSS

Ces liens pointent vers des pages dont les contenus complètent notre article.

Maîtriser le positionnement CSS dans toutes les situations
Cet article d'Alsacréations explique à sa façon les notions de flux, les différents types de positionnement et l'utilisation de la propriété "Float".

Propriété FLOAT,
principales applications
AideNet.com propose plusieurs pages d'exemple illustrant les propriétés "Float" et "Clear"

CSS : comprendre le fonctionnement de float et clear
Le Journaldunet propose plusieurs exemple illustrant cette propriété ainsi que la propriété "clear".

Une mise en page
en 3 colonnes
Un design fluide avec trois «colonnes», grâce au positionnement flottant sur AlsaCreation

Exemples de mise en page
Developpez.com propose plusieurs types de mises en page classiques et explique comment les obtenir.

«Calques»
et feuilles de style
Le coin des expert propose une explication trés claire et illustrée d'exemples sur la notion de "calque" en CSS.

"Overflow"
et mise en page
Avoir des blocs avec ascenseurs à l'intérieur d'une page Web est parfaitement possible. Cette page explique même coment leur attribuer un fond fixe.

Les règles de la page ci-contre doivent absolument être maitrisées si vous souhaitez créer un site Web dont la mise en page est définie par des styles CSS.

Introduction à la mise en page par les CSS

Les CSS permettent de gérer deux aspects relativement distincts de la présentation de vos pages :

  1. La présentation des textes, en jouant sur la taille, la couleur, l'interligne, le type de caractère, la graisse, etc.
  2. La mise en page, en gérant la disposition des principaux élements (en-tête, menu, pied de page, etc.) et de leurs contenus.

Ce deuxième point est sans aucun doute le plus complexe à maîtriser. Pour vous permettre d'en faire le tour et de réaliser les designs évolutifs que permettent les CSS, nous allons aborder les notions nécessaires une par une :

  1. La notion de "flux"
  2. Le dimensionnement des blocs
  3. Les marges internes et externes
  4. Le positionnement par éléments "flottants"
  5. Les positionnements statiques, absolus, fixes et relatifs

1- La notion de "flux"

Le "flux", c'est l'ordre d'affichage des divers éléments qui composent une page Internet.

Par défaut, les navigateurs présentent les éléments dans l'ordre où ils se trouvent dans le code source. Les mots sont placés les uns derrière les autres, jusqu'à atteindre la largeur de la page. Quand il n'est plus possible de s'étendre en largeur, le navigateur retourne à la ligne et recommence ses alignements.

Lorsque le navigateur rencontre un élément "bloc", il retourne à la ligne, affiche l'élément bloc puis retourne à nouveau à la ligne pour disposer le reste du contenu.

Si l'utilisateur modifie la largeur de la page, le navigateur recalcule la disposition de tous les éléments contenus dans la page afin de s'adapter à la nouvelle largeur disponible (à moins que la largeur de page ne soit fixée par des instructions particulières).

Cette description du flux correspond au schéma "standard" d'une page Web. Les CSS permettent de gérer une trés grande variété d'exceptions à ce schéma de principe et vous permettront par exemple :

  • De disposer côte à côte plusieurs colonnes de contenus
  • D'afficher en premier un contenu situé en dernier dans le code source (ou vice-versa)
  • D'intégrer des images flottantes dans un paragraphe
  • D'ajouter une lettrine à un paragraphe
  • D'avoir une largeur de page fixe, quelle que soit la taille de la fenêtre du navigateur.
  • D'avoir une partie de la page fixe tandis que le reste de la page se déplace avec l'ascenseur (comme sur ce site).

2- Le dimensionnement des blocs

a) Dimensionnement par "width" et "height"

La façon la plus courante d'attribuer une dimension à un bloc consiste à utiliser les propriétés "width" et "height".

Comme la plupart des propriétés CSS, "width" et "height" acceptent de nombreuses façon de se voir attribuer une valeur. Pour plus de détail, consultez notre page sur les unités CSS.

b) Bonne utilisation des pourcentages

Lorsque l'on souhaite positionner deux blocs côte-à-côte, il n'est généralement pas intéressant de combiner une dimension en pourcentage avec une dimension fixe.

largeur variable en pourcentage largeur variable et fixe

Cette deuxième combinaison va en effet inévitablement provoquer une mauvaise utilisation de l'espace disponible sur la page dans la mesure ou la somme des deux tailles de blocs ne sera presque jamais égale à 100%.

Si on souhaite avoir une largeur fixe pour un premier bloc et une largeur variable pour un bloc situé à ses côtés, on utilisera plutôt le "dimensionnement implicite" expliqué ci-dessous.

c) Dimensionnement implicite par top, left, bottom, width

Il est parfaitement possible de définir la taille d'un bloc sans faire appel aux propriétés "width" et "height". Il suffit pour cela de définir la position de chaque bord du bloc en utilisant les propriétés "top" (sommet du bloc), "left" (bord gauche du bloc), "bottom" (base du bloc) et "right" (bord droit du bloc).

Dans cette configuration, la taille du bloc variera bien entendu avec la taille de la fenêtre. On obtient donc un résultat trés comparable à celui d'un dimensionnement en %, à une différence prés : on peut désormais associer côte-à-côte un bloc de largeur fixe et un bloc de largeur variable.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc-fixe {
  position:fixed;
  border:solid 1px;
  width:100px;
  top:10px;
  left:10px;
  bottom:10px;
}
.bloc-variable {
  position:fixed;
  border:solid 1px;
  top:10px;
  left:120px;
  bottom:10px;
  right:10px;
}

HTML
<div class="bloc-fixe">
    Texte du bloc fixe.
</div>
<div class="bloc-variable">
    Texte du bloc variable.
</div>

RESULTAT :
largeur variable et fixe

Dans cet exemple, le bloc ayant pour classe "bloc-variable" n'a pas de propriété "width". Sa largeur sera calculée par le navigateur comme suit :
largeur de la fenêtre - 120px(bord gauche) - 10px(bord droit).

Il est important de faire remarquer que ce type de dimensionnement ne fonctionne pas avec Internet Explorer dans ses versions antérieures à la version 7. Pour obtenir le même résultat avec ce navigateur, vous devrez utiliser les déclarations suivantes :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc-fixe {
position:absolute;
border:solid 1px;
width:100px;
top:10px;
left:10px;
bottom:10px;
}
.bloc-variable {
position:absolute;
border:solid 1px;
top:10px;
left:120px;
bottom:10px;
width:
expression((document .documentElement .clientWidth ? document
.documentElement .clientWidth : document .body .clientWidth) - (120+10)
+ "px");
}

HTML
<div class="bloc-fixe">
    Texte du bloc fixe.
</div>
<div class="bloc-variable">
    Texte du bloc variable.
</div>

Cette formulation présente toutefois 2 inconvénients :

  • Elle ne fonctionne qu'avec Internet Explorer qui est le seul navigateur à autoriser des valeurs calculées dans les propriétés CSS.
  • Elle utilise le javascript et ne fonctionnera pas pour les utilisateurs ayant désactivé l'exécution du javascript dans leur navigateur.

Pour pouvoir l'utiliser sans risque, vous devrez donc :

  • Mettre en place des feuilles de styles alternatives présentant aux navigateurs modernes une feuille de style utilisant left, top, right, bottom (première version de notre exemple) et présentant à Internet Explorer 6 (et ses versions précédentes) une dimension calculée en javascript (deuxième version de notre exemple).
  • Mettre en place une feuille de style supplémentaire pour les utilisateurs utilisant Internet Explorer 6 (et ses versions précédentes) et ayant désactivé le javascript.

Un exemple de mise en page respectant ces diverses contraintes vous est proposé sur la page "design-fluide.php"

3- Les marges internes et externes

Lorsque vous attribuez à un élément une bordure (avec la propriété "border"), vous visualisez immédiatement les dimensions de cet élément.

Les propriétés "margin" et "padding" vont vous permettre de jouer sur les marges externes et internes de l'élément par rapport à ses dimensions de départ.

marges et padding

En attribuant une valeur au "padding" (marge interne), vous augmentez la distance entre le contenu de l'élément et sa bordure. Si votre élément à des dimensions fixées (cas de certains éléments de type "bloc"), le fait d'augmenter le " padding " à pour effet de diminuer la zone intérieure "utile" de l'élément.

En attribuant une valeur au "margin" (marge externe), vous "éloignez" l'élément de ses voisins à l'intérieur du flux.

Exemples :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.encadre {
  border:1px solid black;
}
.exemple_padding {
  padding:8px;
}

.exemple_margin {
  margin:8px;
}

HTML
<p>Exemple d'expression <span class="encadre"> encadrée<span></p>

<p>Exemple d'expression <span class="encadre exemple_padding"> encadrée avec padding<span></p>

<p>Exemple d'expression <span class="encadre exemple_margin">encadrée avec margin<span></p>

NOTE : Si le bloc a une bordure, Internet Explorer 6 (ou ses versions antérieures) place quelquefois l'épaisseur de cette bordure à l'intérieur des dimensions du bloc, alors que les autres navigateurs (y compris Explorer 7) placent cette épaisseur à l'extérieur.

Si vous spécifiez un doctype tel que <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, vous corrigerez ce défaut.

bord dans IE 5.5 bord dans Mozilla

4- Le positionnement par éléments "flottants"

Ce paragraphe illustre comment un élément flottant (notre petite paire de ciseaux) peut se positionner dans un bloc texte. Si vous réduisez ou augmentez la taille de cette fenêtre, vous pourrez constater que le texte "coule" autour de notre image.

Cette proprité CSS est trés simple à mettre en oeuvre et permet de résoudre de trés nombreux problèmes de mise en page. Voici le code permettant de placer une image comme dans le paragraphe précédent :

Code :

<p><img src="ciseaux.gif" style="float:left">Texte du paragraphe .</p>

Voici un autre exemple de code permettant de faire commencer un paragraphe par une "lettrine". C'est une forme de présentation assez commune dans la presse, qui consiste à mettre en évidence la première lettre d'un paragraphe (comme le "V", dans le paragraphe que vous êtes en train de lire).

Code :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.lettrine {
  float:left;>
  font-size:1.9em;
  color:white;
  background-color:black;
  padding-right:5px;
  padding-left:5px;
  margin-right:2px
}

HTML
<p><span class="lettrine" >P</span>aragraphe avec lettrine.</p>

Dans cet exemple de code, la classe "lettrine" est affectée à la première lettre grâce à l'utilisation d'une balise "span". En dehors de la propriété "float :left;", cette classe comporte une augmentation de la taille de la lettre ainsi qu'un affichage en blanc sur fond noir.

Les propriétés "padding" et "margin" sont utilisées pour parfaire la présentation de la lettrine.

Texte de gauche. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Texte de droite. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

La propriété "float" permet également de mettre en place une présentation sur plusieurs colonnes, comme ce paragraphe l'illustre.

Dans cet exemple, le paragraphe central voit sa largeur réduite à l'aide de propriétés "padding-left" et "padding-right". Les textes de gauche et de droite sont placés dans des balises <div> auxquelles on a respectivement attribuées les propriétés "float :left" et "float :right".

Code :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc-gauche {
  float:left;
  width:70px;
  color:#A0A0A0;
  border-right:solid 1px;
  padding-right:8px;
}
.bloc-droit {
  float:right;
  width:70px;
  color:#A0A0A0;
  border-left:solid 1px;
  padding-left:8px;
}
.bloc-central {
  padding-left:90px;
  padding-right:90px;
}

HTML
<div class="bloc-gauche">
    Texte de gauche. Bla bla bla
</div>
<div class="bloc-droit">
    Texte de droite. Bla bla bla
</div>
<div class="bloc-central">
    Texte central. Bla bla bla
</div>

Utilisation de la propriété "clear" et gestion du bug d'Internet Explorer

La propriété "clear" permet d'interrompre l'alignement de texte provoqué par la propriété "float".

Dans l'exemple suivant :

Le fait d'attribuer au paragraphe 2 la propriété "clear :left" va avoir pour effet de "sortir" ce paragraphe de l'alignement sur le bloc flottant. Le résultat sera le suivant :

float et clear

Malheureusement, Internet Explorer présente un bug trés pénalisant qui aura pour effet de faire disparaître le paragraphe 1 en cas d'utilisation de la propriété "clear" comme ci-dessus.

La solution consiste à attribuer au paragraphe 1 (ou a tout autre bloc victime de ce bug) une propriété de dimension ou de position. Dès lors, le bloc sera correctement affiché par Explorer.

Une astuce classique consiste à attribuer la propriété "height :1%" aux blocs qui disparaissent à cause de ce bug. Cette propriété règle le problème pour Internet Explorer mais peut générer des problèmes dans les autres navigateurs. Vous devrez utiliser des feuilles de styles alternatives pour qu'Internet Explorer soit le seul à "voir" cette propriété.

A lire aussi : clear et contextes de formatage (blog-and-blues)

Les différentes valeurs de la propriété "clear"

La propriété "clear" accepte 4 valeurs possibles :

  1. clear:none; : annule l'effet d'un "clear" alloué précédemment à l'élément.
  2. clear:left; : l'élément va être décalé vers le bas jusqu'à passer sous l'élément flottant gauche qui provoquait un décalage vers la droite (comme dans notre exemple ci-dessus).
  3. clear:right; : l'élément va être décalé vers le bas jusqu'à passer sous l'élément flottant droit qui provoquait un décalage vers la gauche.
  4. clear:both; : l'élément va être décalé vers le bas jusqu'à passer sous n'importe quel élément flottant provoquant un décalage.

5- Le positionnement par la propriété "position"

La propriété CSS "position" ne doit normalement s'appliquer qu'aux éléments ayant la propriété "display:block" (voir notre page éléments "blocs" et éléments "en-ligne". Lorsqu'on tente de l'appliquer à des éléments en-ligne, les résultats peuvent être plus ou moins étranges selon les navigateurs.

Par défaut, tous les éléments blocs placés dans une page ont la position "static", c'est à dire qu'ils sont inscrit dans le flux de la page. Voici ce que l'on obtient avec les autres valeurs de la propriété "position" :

a) Position:relative;

L'élément reste dans le flux de la page, mais peut se trouver décalé par rapport à la position qu'il devrait normalement occuper. Le décalage est géré par les propriétés top et left.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.decale {
  position:relative;
  left:20px;
  top:20px;
}

HTML
<p>Phrase N°1</p>
<p class="decale" >Phrase N°2</p>
<p>Phrase N°3</p>

RESULTAT

b) Position:absolute;

L'élément ne s'inscrit plus dans le flux de la page, c'est à dire que sa position n'est plus déterminée par les éléments qui le précèdent et que lui-même n'a plus d'influence sur la position des éléments qui le suivent.

Attention tout de même à la confusion que le mot "absolute" peut entretenir : ce positionnement n'est absolu que par rapport au bloc parent. Si un bloc parent se déplace, tous ses enfants positionnés en "absolute" se déplaceront avec lui.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.decalage1 {
  position:absolute;
  border:2px solid black;
  left:10px;top:10px;
  width:150px;height:200px;
}
.decalage2 {
  position:absolute;
  border:1px solid red;
  left:20px;
  top:20px;
  width:100px;height:100px;
}

HTML

Parent

Enfant

<div class="decalage1">
  <div class="decalage2">
    texte
  </div>
</div>

RESULTAT
positionnement absolu

Cette logique ne fonctionne toutefois que pour un bloc enfant positionné en "absolute" à l'intérieur d'un bloc parent lui-même positionné en "relative" ou en "absolute" (comme dans notre exemple).

Si le bloc parent est positionné en "static", sa position n'a plus la moindre influence sur la position de ses enfants. Le point de repère devient alors le coin supérieur de la page et les blocs enfants peuvent "sortir" de leur bloc parent.

Exemple :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.bloc1 {
  position:static;
  border:2px solid black;
  width:150px;height:200px;
}
.decalage {
  position:absolute;
  border:1px solid red;
  left:100px;
  top:20px;
  width:100px;height:100px;
}

HTML

bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>
bla bla bla<br>

<div class="bloc1">Bloc parent
  <div class="decalage2">
    Bloc enfant
  </div>
</div>

RESULTAT
positionnement absolu et statique

Pour comprendre ce comportement, il faut considérer qu'un bloc positionné en "static" n'est pas positionné et qu'il ne peut donc servir de repère pour le positionnement de ses enfants.

Seul un bloc parent positionné en "relative", "absolute" ou "fixed" (voir ci-dessous) influera sur le positionnement "absolute" de ses enfants.

Note : le site OpenWeb propose aussi un exemple de mise en page sur 3 colonnes à l'aide de la propriété "absolute" que nous vous invitons à découvrir.

c) Position:fixed;

Tout comme dans le cas précédent, l'élément ne s'inscrit plus dans le flux de la page, c'est à dire que sa position n'est plus déterminée par les éléments qui le précèdent et que lui-même n'a plus d'influence sur la position des éléments qui le suivent.

Ce positionnement permet de placer l'élément à un endroit précis de la page, d'où il ne bougera plus. Contrairement à "absolute", la position d'un élément définie par "fixed" ne dépend plus de la position de ses parents. Elle ne dépend pas non plus de la position de l'ascenseur ou des ascenseurs présents sur la page. En clair, l'élément est réellement "fixé" sur la page à la position indiquée par "left" et "top".

Ce type de positionnement est idéal pour conserver un menu fixe dans une page dont le contenu défile avec l'ascenseur. Malheureusement, la propriété "fixed" n'est pas reconnue par Internet Explorer dans ses versions antérieures à la version 7. En cas d'utilisation de cette propriété, il est donc impératif de prévoir une feuille de style spéciale, destinée à IE 6 et IE 5.5, qui gèrera une mise en page particulière pour ces navigateurs.

Pour plus de détail sur les éléments fixés ou sur les menu fixes, consultez notre page dédiée à ce thème : pseudo-frames en CSS.

Le copyright de cette page appartient à css-faciles.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.
Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :
Introduction 1- La notion de "flux" 2- Le dimensionnement 3- Les marges 4- Le positionnement par éléments "flottants" 5- Le positionnement par la propriété "position"
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


Menu déroulant en CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

exemple de menu

Menu déroulant
en CSS

Menu hiérarchique vertical ou horizontal
sans javascript

Le confort de navigation est l'un des éléments majeurs du succès d'un site. Vos visiteurs doivent toujours savoir où ils sont et quel contenu vous leur proposez. Les menus hiérarchiques sont un excellent moyen d'atteindre ce but et les CSS permettent de les réaliser avec un petit code élégant et efficace.

Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration.
Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger.

Sélection de liens concernant
les menus déroulants en CSS

Ces liens pointent vers des pages dont les contenus complètent notre article.

Des menus déroulants
en CSS compatibles avec tous les navigateurs
Cet auteur utilise le script csshover.htc pour ajouter à IE6 la possibilité de gérer la propriété "hover" sur les balises <li>. Nous lui avons préféré le petit script proposé au bas de notre page.

Un menu déroulant
en CSS et XHTML
Alsacréations propose une version de code utilisant le javascript pour tous les navigateurs. Nous préférons limiter l'usage de ce langage au strict nécessaire.

Un menu déroulant
sans javascript
En faisant l'impasse sur le navigateur IE6, il est possible de réaliser un menu déroulant sans une ligne de javascript.

Un menu déroulant
sans javascript
compatible avec IE6
Stu Nicholls a démontré que la chose était possible en exploitant une particularité un peu bizarre d'IE6 : avec ce navigateur, les balises <A> peuvent englober des balises <UL> et <LI> (ce qui n'est pas conforme aux normes HTML). Grâce à des commentaires conditionnels, Stu parvient même à faire un code qui passe le contrôle du testeur W3C.
Bel exercice de style, mais le code produit est hélas très volumineux.

Menus déroulants contre liens hypertextes : la victoire de la simplicité
Vincent Benard dit tout le mal qu'il pense des menus déroulants. La plupart des reproches qu'il leur adresse peut être corrigée par une bonne conception de ces menus. Voilà pourquoi il est important de lire cet article et d'en tenir compte pour votre site.

Un menu déroulant
accessible
Trés bel exemple de menu réalisé par FairyTells.
Ce code - hélas un peu complexe - gère la navigation au clavier et propose même un petit délai de "latence" pour faciliter l'utilisation du menu par les personnes victimes de tremblements. Du grand art.

La vengeance des menus déroulants
Dans sa dernière version, le code proposé par les américains Patrick Griffiths et Dan Webb présente de très fortes similarités avec le notre (preuve que les grands esprits se rencontrent ?). Simple, efficace, compatible avec tous les navigateurs et n'utilisant le javascript que pour IE6 à travers un code économique en taille et en ressources.

Un menu semi-transparent
Pour donner un look un peu plus "fun" à votre menu, voici comment procéder.
Le script qui a servi de base à cette adaptation semble être celui de Patrick Griffiths et Dan Webb (voir paragraphe précédent sur "la vengeance des menus déroulants")

A propos du design de site Internet

Le premier paramètre dont vous devez tenir compte au moment de la conception de votre site est le suivant : l'internaute y trouvera-t-il facilement l'information qu'il recherche ?

Votre design de site doit d'abord est orienté pour satisfaire ce besoin. La gestion de vos menus est donc capitale car c'est elle qui permettra à l'internaute de saisir en un seul coup d'oeil la liste des contenus que le site lui propose. Un menu fixe, toujours accessible et clair dans sa présentation représente un atout considérable pour rendre votre contenu facilement accessible.

Avec ou sans javascript ?

Lorsqu'on peut se passer de javascript, il est prudent de le faire. Certains internautes désactivent en effet l'exécution du javascript et pourraient se retrouver dans l'impossibilité de naviguer sur un site utilisant ce langage dans sa gestion de menu.

Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Seul le langage javascript permet de dépasser cette limitation.

Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne :

  • Sans javascript pour Firefox, Opera, Mozilla et IE7
  • Avec javascript pour IE 5.5 et 6

Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs.

Une partie de cache-cache

En réfléchissant au principe de base d'un menu déroulant, vous constaterez qu'il s'agit essentiellement d'une partie de cache-cache : certaines parties en sont masquées et n'apparaissent que lorsque l'utilisateur survole le menu principal.

Dans le cas d'un menu hiérarchique à 3 niveaux, le troisième niveau n'apparaît que lorsque l'utilisateur survole certaines lignes de deuxième niveau.

Pour obtenir ce résultat, il faut donc maîtriser deux techniques :

Afficher / masquer Comment faire apparaître et disparaître des éléments
On utilisera pour cela la propriété display qui peut recevoir (entre autre) les valeurs none (bloc masqué) et block (bloc affiché).
survol Comment déclencher un événement lorsque le curseur de la souris survole une élément.
On utilisera pour cela la propriété hover qui permet d'associer un style CSS à un bloc survolé.

Ajoutons à cet inventaire le fait qu'un menu est un ensemble de lignes qu'il va falloir structurer dans le code HTML. Puisqu'il s'agit d'une liste de liens, il semble logique d'utiliser la structure "<LIST>" et c'est ce qui est fait dans la quasi-totalité des exemples que vous pourrez trouver sur le Web.

Voici donc ce que donnerait notre exemple si on le structure avec cette balise :

<ul class="niveau1">
  <li>
    Menu
    <ul class="niveau2">
      <li>
        Extras
        <ul class="niveau3">
          <li>Demander la note</li>
          <li>Draguer la serveuse</li>
        </ul>
      </li>
      <li>Entr&eacute;e</li>
      <li>Plat</li>
      <li>Dessert</li>
      <li>Caf&eacute;</li>
    </ul>
  </li>
</ul>

Le niveau 2 et le niveau 3 doit être invisibles en temps normal et ne devenir visibles que lors du survol des niveaux précédents. Voici comment obtenir ce résultat avec des CSS :

ul ul {display: none;}
li:hover ul.niveau2, li li:hover ul.niveau3 {display:block;}
Survolez le menu ci-dessous pour voir le résultat de ce code.
Pour que cet exemple fonctionne, vous devez visualiser cette page avec FireFox, Mozilla, Opera ou Internet Explorer 7, mais nous verrons plus bas comment rendre cet exemple compatible avec Internet Explorer 6 :
  • Menu
    • Extras
      • Demander la note
      • Draguer la serveuse
    • Entrée
    • Plat
    • Dessert
    • Café

Voici les explications concernant ce code :

ul ul {display:none;} : lorsqu'une balise <ul> se trouve enchâssée dans une autre balise <ul>, elle ne sera pas affichée.

Ce code rend invisible le bloc <ul
class="niveau2"> (qui est enchâssé dans <ul
class="niveau1">) ainsi que le bloc <ul
class="niveau3"> (qui est enchâssé dans <ul
class="niveau1"> et <ul
class="niveau2">)

li:hover ul.niveau2, li li:hover ul.niveau3 {display:block;} : l'expression <li:hover> signifie "quand <li> est survolé par la souris".

  • Lorsqu'une balise <ul> ayant la classe "niveau2" se trouve enchâssée dans une balise <li> survolée par la souris, elle sera affichée.
  • Lorsqu'une balise <ul> ayant la classe "niveau3" se trouve enchâssée dans une balise <li> survolée par la souris, elle-même enchâssée dans une autre balise <li>, elle sera affichée.

Éviter les décalages verticaux

En survolant le menu proposé au paragraphe précédent, on constate que son affichage n'est pas des plus agréable : lorsque la souris survole "Extras", les lignes "Entrée", "Plat", "Dessert" et "Café" se décale vers le bas pour laisser la place au bloc "niveau3".

Nous allons donc modifier les styles comme suit :

ul ul {display: none; position: absolute; left: 140px; top: 0px; margin: 0px; padding: 0px;}
li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0}
li:hover ul.niveau2, li li:hover ul.niveau3 {display: block}
Résultat :
  • Menu
    • Extras
      • Demander la note
      • Draguer la serveuse
    • Entrée
    • Plat
    • Dessert
    • Café

Les blocs <UL> de niveaux 2 et 3 sont désormais positionnés en absolu et ne modifie plus le flux de la page, c'est à dire qu'ils ne décalent plus le reste du menu vers le bas.

Les blocs <LI> sont positionnés en relatif afin de servir de repère aux blocs <UL> qu'ils contiennent. On a également attribué un fond gris à ces blocs afin de commencer à travailler sur l'esthétique de notre menu.

Améliorer la présentation

Les modifications qui suivent concernent uniquement l'esthétique :

CSS
<style type="text/css">
  ul ul {display: none; position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px; border: 1px solid grey;}
  li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
  li:hover {background-color: #FFFF70;}
  li:hover ul.niveau2, li li:hover ul.niveau3 {display: block}
  li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid grey;}
</style>

HTML
<ul class="niveau1">
  <li>
    Menu
    <ul class="niveau2">
      <li class="plus">
        Extras
        <ul class="niveau3">
          <li>Demander la note</li>
          <li>Draguer la serveuse</li>
        </ul>
      </li>
      <li>Entr&eacute;e</li>
      <li>Plat</li>
      <li>Dessert</li>
      <li>Caf&eacute;</li>
    </ul>
  </li>
</ul>
Résultat :
  • Menu
    • Extras
      • Demander la note
      • Draguer la serveuse
    • Entrée
    • Plat
    • Dessert
    • Café

Rendre le code compatible avec Internet Explorer 6

Le problème d'IE 6 et de ses versions précédentes est la non-reconnaissance de la propriété hover sur les blocs de type <LI>.

Nous allons donc créer une petite fonction javascript qui ajoute cette fonctionnalité à IE 6 et qui ne sera utilisée que par lui .

Cette fonction attribue la classe sfhover aux blocs <LI> lorsqu'ils sont survolés par la souris :

 <!--[if lt IE
7]>
<script type="text/javascript">

// Fonction destinée à remplacer le "LI:hover"
pour IE 6

sfHover =
function() {
var sfEls =
document.getElementsByTagName("li");
for (var i=0;
i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent)
window.attachEvent("onload", sfHover);
</script>
<![endif]-->

Pour exploiter cette fonction, les styles CSS devront être modifiées comme suit :

CSS
<style type="text/css">
  ul ul {display: none; position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px; border: 1px solid grey;}
  li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
  li:hover, li.sfhover {background-color: #FFFF70;}
  li:hover ul.niveau2, li li:hover ul.niveau3, li.sfhover ul.niveau2, li li.sfhover ul.niveau3 {display: block}
  li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid grey;}
</style>

Cliquer ici pour voir le résultat

Derniers petits ajustements

Tels que nous les avons rédigés dans les exemples précédents, les styles CSS s'appliquent à toutes les listes (balises <ul> et <li>) de la page. Cela peut être ennuyeux si on utilise d'autres listes à d'autres fins que la gestion du menu dans la même page.

Nous allons donc inclure l'ensemble du menu dans un bloc <div> auquel nous allons attribuer un "ID". Cela permettra de restreindre l'influence de nos styles CSS à ce bloc.

Le code complet proposé ci-dessous intègre ces modifications ainsi que quelques derniers ajustements esthétiques :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
      <style type="text/css">
        #monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
        #monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
        #monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
        #monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
        #monmenu li a {text-decoration:none;}
        #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
        #monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
      </style>
      <!--[if lt IE 7]>
        <script type="text/javascript">
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
            sfHover = function() {
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                        this.className += " sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
        <style type="text/css">
            #monmenu li {width: 144px;}
        </style>
     <![endif]-->
     <meta name="keywords"
 content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
     <meta name="description"
 content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
     <title>Exemple de menu hiérarchique en CSS</title>
  </head>
  <body>
    <div id="monmenu">
        <ul class="niveau1">
           <li> Menu
               <ul class="niveau2">
                  <li class="plus">
                    <a href= "http://www.rankspirit.com">
                       <img alt=" " src="illustrations/ menu-deroulant/ bebe.gif"
 border="none">
                       Extras
                    </a>
                    <ul class="niveau3">
                      <li>
                        <a href= "http://www.rankspirit.com">
                            <img alt=" " src="illustrations/ menu-deroulant/ note.gif"
 border="none">
                           Demander la note
                         </a>
                        </li>
                        <li>
                            <a href= "http://www.rankspirit.com">
                                <img alt=" "
 src="illustrations/ menu-deroulant/ serveuse.gif"
 border="none">                 Draguer la serveuse
                            </a>
                        </li>
                    </ul>
                  </li>
                  <li>
                    <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ entree.gif"
 border="none">
                        Entrée
                    </a>
                  </li>
                  <li>
                    <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ plat.gif"
 border="none">
                        Plat
                    </a>
                  </li>
                  <li>
                     <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ dessert.gif"
 border="none">
                        Dessert
                     </a>
                   </li>
                   <li>
                      <a href= "http://www.rankspirit.com">
                        <img alt=" "
 src="illustrations/ menu-deroulant/ cafe.gif"
 border="none">         Café
                      </a>
                   </li>
                </ul>
              </li>
        </ul>
    </div>
  </body>
</html>
Cliquer ici pour voir le résultat
Télécharger le script

Version modifiée pour un menu vertical

Notre code ne nécessite qu'un infime ajustement pour afficher un menu vertical.

La ligne :

#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}

devient :

#monmenu ul ul {display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu ul.niveau2 {left: 0px; top: 22px;}
#monmenu ul.niveau3 {left: 144px; top: -1px;}

et hop !

Cliquer ici pour voir le résultat
 Télécharger le script

Le copyright de cette page appartient à css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.
Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS Problèmes et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


Test du menu

RAD ZONE :

  • Sub Menu 1 ;
  • Sub Menu 2 ;
  • Sub Menu 3 ;
  • Sub Menu 4 ;
  • Sub Menu 5 ;
  • Sub Menu 6.

Menu 2 :

  • Sub Menu 2.1 ;
  • Sub Menu 2.2 ;
  • Sub Menu 2.3

Menu 3 :

  • Sub Menu 3.1 ;
  • Sub Menu 3.2 ;
  • Sub Menu 3.3 ;
  • Sub Menu 3.4
  • Sub Menu 3.5
  • Sub Menu 3.6
  • Sub Menu 3.7
  • Sub Menu 3.8
  • Sub Menu 3.9
  • Sub Menu 3.10 ;

Pour faire de la transparence, il faut mettre les styles

background-color: une couleur....;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
aux éléments .menu et .ssmenu dans le CSS.

ça va faire le mélange entre la couleur de fond des menus/sous-menus, et la couleur ou l'image de fond de la page entière (body)

Download menu files.rar


Les couleurs CSS et HTML

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Les couleurs HTML et CSS

Les normes HTML et CSS permettent de définir les couleurs de 3 façons différentes.

3 façons de définir une couleur

Les navigateurs admettent 3 méthodes possibles pour la déclaration d'une couleur :

Méthode | Exemple | Notes
Couleurs nommées | background-color: grey | La couleur est désignée par son nom. Il n'y a que 16 noms de couleurs normalisés par le W3C, mais tous les navigateurs actuels reconnaissent les couleurs définies par la norme X11 (voir plus bas)
Couleurs en hexadecimal | background-color: #808080 | La couleur est désignée par son code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits représentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.
Couleurs décomposées | background-color: RGB( 128,128,128 ) | La couleur est définie par trois nombres décimaux de 0 à 255 indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.

16 couleurs de base

A l'époque ou la norme HTML intégra la possibilité de jouer avec les couleurs, la plupart des écrans d'ordinateurs avait encore des capacités extrêment limitées et ne pouvaient reproduire qu'un jeu réduit de couleurs.

Il ne fut donc définit que 16 couleurs de base qui restent encore aujourd'hui les seules couleurs nommées dans les normes du W3C :

#00FFFF Aqua | #000000 Black | #0000FF Blue | #FF00FF Fuchsia | #808080 Gray | #008000 Green | #00FF00 Lime | #800000 Maroon
#000080 Navy | #808000 Olive | #800080 Purple | #FF0000 Red | #C0C0C0 Silver | #008080 Teal | #FFFFFF White | #FFFF00 Yellow

Les couleurs X11

La norme X11 fut définie pour la gestion des terminaux à l'époque des mini-ordinateurs. Elle comporte un nombre relativement étendu de couleurs qui sont reconnues par les principaux navigateurs actuels.

Quatre de ces couleurs portent des noms identiques à ceux des couleurs HTML sans correspondre exactement aux mêmes teintes. Si vous utilisez les noms "Grey", "Green", "Purple" et "Maroon", ce seront donc les teintes HTML qui seront affichées par votre navigateur et non les teintes X11 telles qu'elles s'affichaient dans cette norme.

Normes | X11 |  |  |  |  |  |  | HTML et CSS
Notations |  | Hexadécimal |  |  | Décimal |  |  |  | Hexadécimal |  |  | Décimal
Composantes |  | R | V | B | R | V | B |  | R | V | B | R | V | B
Grey |  | BE | BE | BE | 190 | 190 | 190 |  | 80 | 80 | 80 | 128 | 128 | 128
Green |  | 00 | FF | 00 | 0 | 255 | 0 |  | 00 | 80 | 00 | 0 | 128 | 0
Maroon |  | B0 | 30 | 60 | 176 | 48 | 96 |  | 80 | 00 | 00 | 128 | 0 | 0
Purple |  | A0 | 20 | F0 | 106 | 32 | 240 |  | 80 | 00 | 80 | 128 | 0 | 128

Voici la liste des autres couleurs X11 (source : Wikipedia) :

Nom de couleur | Exemple | HTML | Composantes (rouge, vert, bleu)
 |  |  | Hexadécimal |  |  | Décimal
AliceBlue |  | #f0f8ff | F0 | F8 | FF | 240 | 248 | 255
AntiqueWhite |  | #faebd7 | FA | EB | D7 | 250 | 235 | 215
Aqua |  | #00ffff | 00 | FF | FF | 0 | 255 | 255
Aquamarine |  | #7fffd4 | 7F | FF | D4 | 127 | 255 | 212
Azure |  | #f0ffff | F0 | FF | FF | 240 | 255 | 255
Beige |  | #f5f5dc | F5 | F5 | DC | 245 | 245 | 220
Bisque |  | #ffe4c4 | FF | E4 | C4 | 255 | 228 | 196
Black |  | #000000 | 00 | 00 | 00 | 0 | 0 | 0
BlanchedAlmond |  | #ffebcd | FF | EB | CD | 255 | 235 | 205
Blue |  | #0000ff | 00 | 00 | FF | 0 | 0 | 255
BlueViolet |  | #8a2be2 | 8A | 2B | E2 | 138 | 43 | 226
Brown |  | #a52a2a | A5 | 2A | 2A | 165 | 42 | 42
BurlyWood |  | #deb887 | DE | B8 | 87 | 222 | 184 | 135
CadetBlue |  | #5f9ea0 | 5F | 9E | A0 | 95 | 158 | 160
Chartreuse |  | #7fff00 | 7F | FF | 00 | 127 | 255 | 0
Chocolate |  | #d2691e | D2 | 69 | 1E | 210 | 105 | 30
Coral |  | #ff7f50 | FF | 7F | 50 | 255 | 127 | 80
CornflowerBlue |  | #6495ed | 64 | 95 | ED | 100 | 149 | 237
Cornsilk |  | #fff8dc | FF | F8 | DC | 255 | 248 | 220
Crimson |  | #dc143c | DC | 14 | 3C | 220 | 20 | 60
Cyan |  | #00ffff | 00 | FF | FF | 0 | 255 | 255
DarkBlue |  | #00008b | 00 | 00 | 8B | 0 | 0 | 139
DarkCyan |  | #008b8b | 00 | 8B | 8B | 0 | 139 | 139
DarkGoldenrod |  | #b8860b | B8 | 86 | 0B | 184 | 134 | 11
DarkGray |  | #a9a9a9 | A9 | A9 | A9 | 169 | 169 | 169
DarkGreen |  | #006400 | 00 | 64 | 00 | 0 | 100 | 0
DarkKhaki |  | #bdb76b | BD | B7 | 6B | 189 | 183 | 107
DarkMagenta |  | #8b008b | 8B | 00 | 8B | 139 | 0 | 139
DarkOliveGreen |  | #556b2f | 55 | 6B | 2F | 85 | 107 | 47
DarkOrange |  | #ff8c00 | FF | 8C | 00 | 255 | 140 | 0
DarkOrchid |  | #9932cc | 99 | 32 | CC | 153 | 50 | 204
DarkRed |  | #8b0000 | 8B | 00 | 00 | 139 | 0 | 0
DarkSalmon |  | #e9967a | E9 | 96 | 7A | 233 | 150 | 122
DarkSeaGreen |  | #8fbc8f | 8F | BC | 8F | 143 | 188 | 143
DarkSlateBlue |  | #483d8b | 48 | 3D | 8B | 72 | 61 | 139
DarkSlateGray |  | #2f4f4f | 2F | 4F | 4F | 47 | 79 | 79
DarkTurquoise |  | #00ced1 | 00 | CE | D1 | 0 | 206 | 209
DarkViolet |  | #9400d3 | 94 | 00 | D3 | 148 | 0 | 211
DeepPink |  | #ff1493 | FF | 14 | 93 | 255 | 20 | 147
DeepSkyBlue |  | #00bfff | 00 | BF | FF | 0 | 191 | 255
DimGray |  | #696969 | 69 | 69 | 69 | 105 | 105 | 105
DodgerBlue |  | #1e90ff | 1E | 90 | FF | 30 | 144 | 255
FireBrick |  | #b22222 | B2 | 22 | 22 | 178 | 34 | 34
FloralWhite |  | #fffaf0 | FF | FA | F0 | 255 | 250 | 240
ForestGreen |  | #228b22 | 22 | 8B | 22 | 34 | 139 | 34
Fuchsia |  | #ff00ff | FF | 00 | FF | 255 | 0 | 255
Gainsboro |  | #dcdcdc | DC | DC | DC | 220 | 220 | 220
GhostWhite |  | #f8f8ff | F8 | F8 | FF | 248 | 248 | 255
Gold |  | #ffd700 | FF | D7 | 00 | 255 | 215 | 0
Goldenrod |  | #daa520 | DA | A5 | 20 | 218 | 165 | 32
GreenYellow |  | #adff2f | AD | FF | 2F | 173 | 255 | 47
Honeydew |  | #f0fff0 | F0 | FF | F0 | 240 | 255 | 240
HotPink |  | #ff69b4 | FF | 69 | B4 | 255 | 105 | 180
IndianRed |  | #cd5c5c | CD | 5C | 5C | 205 | 92 | 92
Indigo |  | #4b0082 | 4B | 00 | 82 | 75 | 0 | 130
Ivory |  | #fffff0 | FF | FF | F0 | 255 | 255 | 240
Khaki |  | #f0e68c | F0 | E6 | 8C | 240 | 230 | 140
Lavender |  | #e6e6fa | E6 | E6 | FA | 230 | 230 | 250
LavenderBlush |  | #fff0f5 | FF | F0 | F5 | 255 | 240 | 245
LawnGreen |  | #7cfc00 | 7C | FC | 00 | 124 | 252 | 0
LemonChiffon |  | #fffacd | FF | FA | CD | 255 | 250 | 205
LightBlue |  | #add8e6 | AD | D8 | E6 | 173 | 216 | 230
LightCoral |  | #f08080 | F0 | 80 | 80 | 240 | 128 | 128
LightCyan |  | #e0ffff | E0 | FF | FF | 224 | 255 | 255
LightGoldenrodYellow |  | #fafad2 | FA | FA | D2 | 250 | 250 | 210
LightGreen |  | #90ee90 | 90 | EE | 90 | 144 | 238 | 144
LightGrey |  | #d3d3d3 | D3 | D3 | D3 | 211 | 211 | 211
LightPink |  | #ffb6c1 | FF | B6 | C1 | 255 | 182 | 193
LightSalmon |  | #ffa07a | FF | A0 | 7A | 255 | 160 | 122
LightSeaGreen |  | #20b2aa | 20 | B2 | AA | 32 | 178 | 170
LightSkyBlue |  | #87cefa | 87 | CE | FA | 135 | 206 | 250
LightSlateGray |  | #778899 | 77 | 88 | 99 | 119 | 136 | 153
LightSteelBlue |  | #b0c4de | B0 | C4 | DE | 176 | 196 | 222
LightYellow |  | #ffffe0 | FF | FF | E0 | 255 | 255 | 224
Lime |  | #00ff00 | 00 | FF | 00 | 0 | 255 | 0
LimeGreen |  | #32cd32 | 32 | CD | 32 | 50 | 205 | 50
Linen |  | #faf0e6 | FA | F0 | E6 | 250 | 240 | 230
Magenta |  | #ff00ff | FF | 00 | FF | 255 | 0 | 255
MediumAquamarine |  | #66cdaa | 66 | CD | AA | 102 | 205 | 170
MediumBlue |  | #0000cd | 00 | 00 | CD | 0 | 0 | 205
MediumOrchid |  | #ba55d3 | BA | 55 | D3 | 186 | 85 | 211
MediumPurple |  | #9370db | 93 | 70 | DB | 147 | 112 | 219
MediumSeaGreen |  | #3cb371 | 3C | B3 | 71 | 60 | 179 | 113
MediumSlateBlue |  | #7b68ee | 7B | 68 | EE | 123 | 104 | 238
MediumSpringGreen |  | #00fa9a | 00 | FA | 9A | 0 | 250 | 154
MediumTurquoise |  | #48d1cc | 48 | D1 | CC | 72 | 209 | 204
MediumVioletRed |  | #c71585 | C7 | 15 | 85 | 199 | 21 | 133
MidnightBlue |  | #191970 | 19 | 19 | 70 | 25 | 25 | 112
MintCream |  | #f5fffa | F5 | FF | FA | 245 | 255 | 250
MistyRose |  | #ffe4e1 | FF | E4 | E1 | 255 | 228 | 225
Moccasin |  | #ffe4b5 | FF | E4 | B5 | 255 | 228 | 181
NavajoWhite |  | #ffdead | FF | DE | AD | 255 | 222 | 173
Navy |  | #000080 | 00 | 00 | 80 | 0 | 0 | 128
OldLace |  | #fdf5e6 | FD | F5 | E6 | 253 | 245 | 230
Olive |  | #808000 | 80 | 80 | 00 | 128 | 128 | 0
OliveDrab |  | #6b8e23 | 6B | 8E | 23 | 107 | 142 | 35
Orange |  | #ffa500 | FF | A5 | 00 | 255 | 165 | 0
OrangeRed |  | #ff4500 | FF | 45 | 00 | 255 | 69 | 0
Orchid |  | #da70d6 | DA | 70 | D6 | 218 | 112 | 214
PaleGoldenrod |  | #eee8aa | EE | E8 | AA | 238 | 232 | 170
PaleGreen |  | #98fb98 | 98 | FB | 98 | 152 | 251 | 152
PaleTurquoise |  | #afeeee | AF | EE | EE | 175 | 238 | 238
PaleVioletRed |  | #db7093 | DB | 70 | 93 | 219 | 112 | 147
PapayaWhip |  | #ffefd5 | FF | EF | D5 | 255 | 239 | 213
PeachPuff |  | #ffdab9 | FF | DA | B9 | 255 | 218 | 185
Peru |  | #cd853f | CD | 85 | 3F | 205 | 133 | 63
Pink |  | #ffc0cb | FF | C0 | CB | 255 | 192 | 203
Plum |  | #dda0dd | DD | A0 | DD | 221 | 160 | 221
PowderBlue |  | #b0e0e6 | B0 | E0 | E6 | 176 | 224 | 230
Red |  | #ff0000 | FF | 00 | 00 | 255 | 0 | 0
RosyBrown |  | #bc8f8f | BC | 8F | 8F | 188 | 143 | 143
RoyalBlue |  | #4169e1 | 41 | 69 | E1 | 65 | 105 | 225
SaddleBrown |  | #8b4513 | 8B | 45 | 13 | 139 | 69 | 19
Salmon |  | #fa8072 | FA | 80 | 72 | 250 | 128 | 114
SandyBrown |  | #f4a460 | F4 | A4 | 60 | 244 | 164 | 96
SeaGreen |  | #2e8b57 | 2E | 8B | 57 | 46 | 139 | 87
Seashell |  | #fff5ee | FF | F5 | EE | 255 | 245 | 238
Sienna |  | #a0522d | A0 | 52 | 2D | 160 | 82 | 45
Silver |  | #c0c0c0 | C0 | C0 | C0 | 192 | 192 | 192
SkyBlue |  | #87ceeb | 87 | CE | EB | 135 | 206 | 235
SlateBlue |  | #6a5acd | 6A | 5A | CD | 106 | 90 | 205
SlateGray |  | #708090 | 70 | 80 | 90 | 112 | 128 | 144
Snow |  | #fffafa | FF | FA | FA | 255 | 250 | 250
SpringGreen |  | #00ff7f | 00 | FF | 7F | 0 | 255 | 127
SteelBlue |  | #4682b4 | 46 | 82 | B4 | 70 | 130 | 180
Tan |  | #d2b48c | D2 | B4 | 8C | 210 | 180 | 140
Teal |  | #008080 | 00 | 80 | 80 | 0 | 128 | 128
Thistle |  | #d8bfd8 | D8 | BF | D8 | 216 | 191 | 216
Tomato |  | #ff6347 | FF | 63 | 47 | 255 | 99 | 71
Turquoise |  | #40e0d0 | 40 | E0 | D0 | 64 | 224 | 208
Violet |  | #ee82ee | EE | 82 | EE | 238 | 130 | 238
Wheat |  | #f5deb3 | F5 | DE | B3 | 245 | 222 | 179
White |  | #ffffff | FF | FF | FF | 255 | 255 | 255
WhiteSmoke |  | #f5f5f5 | F5 | F5 | F5 | 245 | 245 | 245
Yellow |  | #ffff00 | FF | FF | 00 | 255 | 255 | 0
YellowGreen |  | #9acd32 | 9A | CD | 32 | 154 | 205 | 50

Couleurs système

Les couleurs ci-dessous sont définies par le navigateur et sont redéfinissables par l'utilisateur (même si peu d'entre eux savent comment procéder pour ça).

Les couleurs affichées dans le tableau ci-dessous correspondent aux réglages de votre navigateur.

ActiveBorder ActiveBorder | ActiveCaption ActiveCaption | AppWorkspace AppWorkspace | Background Background
ButtonHighlight ButtonHighlight | ButtonText ButtonText | CaptionText CaptionText | GrayText GrayText
HighlightText HighlightText | InactiveBorder InactiveBorder | InactiveCaption InactiveCaption | InfoBackground InfoBackground
Menu Menu | MenuText MenuText | Scrollbar Scrollbar | ThreeDDarkShadow ThreeDDarkShadow
ThreeDHighlight ThreeDHighlight | ThreeDLightShadow ThreeDLightShadow | ThreedShadow ThreedShadow | Window Window
WindowText WindowText | ButtonFace ButtonFace | Highlight Highlight | InfoText InfoText
ThreeDFace ThreeDFace | WindowFrame WindowFrame

Harmoniser les couleurs

Le site Mon-Design-Web propose une page consacrée à l'esthétique et à la couleur des pages Web.

Propriétés CSS pour les couleurs

background-color | Couleur de l'arrière-plan.
border-bottom-color | Couleur de la bordure du bas.
border-color | Couleur des bordures.
border-left-color | Couleur de la bordure de gauche.
border-right-color | Couleur de la bordure de droite.
border-top-color | Couleur de la bordure de droite.
color | Couleur de l'avant plan (texte, par exemple).
layer-background-color | Couleur d'arrière plan et de la bordure dans Netscape.
outline-color | Couleur de l'encadrement de l'élément.
scrollbar-3dlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-arrow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-base-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-darkShadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-face-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-highlight-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-shadow-color | Aspect de l'ascenseur (Explorer seulement).
scrollbar-track-color | Aspect de l'ascenseur (Explorer seulement).

Cette page a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


Des tableaux en CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Einstein au tableau

Faire des tableaux en CSS

(Exercice de style)

L'utilisation des tableaux (balise <table>) à des fins de mise en page a été rudement critiqué par certains défenseurs des CSS (lire à ce sujet "Tableaux contre CSS : le combat"). Cette cabale a été si loin, que certains voudraient purement et simplement supprimer cette balise.

Bien que cette idée soit absurde, voici, à titre d'exercice, comment réaliser des tableaux... sans tableaux. Cette démonstration pourra peut-être vous servir à résoudre des cas particuliers de mises en page lors de la création de votre site Web.

Sélection de liens concernant
les tableaux
en CSS

Ces liens pointent vers des pages dont les contenus complètent notre article.

Simuler des tableaux
en CSS
Babylon-design propose une solution de tableau en 2 colonnes et expose les possibilités de la propriété "display" dans ce domaine.

Tableaux, faux tableaux
Gcyrillus Free étudie avec minutie les avantages et dangers des différents types de tableaux réalisés en CSS.

Changer la présentation des tableaux
grâce aux CSS
Nul besoin de ré-inventer la roue pour bénéficier des avantages des CSS dans les tableaux. Cette page montre comment les styles CSS peuvent modifier la présentation d'un tableau classique.

Mots clés
de cette page :

Création de site Web, design de site Web, conception de sites Internet.

Démonstration

Voici le résultat que l'on peut obtenir en jouant avec les propriétés "float" et "clear"

Légende 1 Légende 2 Légende 3

Case 1.1 Case 1.2 Case 1.3

Case 2.1 Case 2.2 Case 2.3

Code :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

CSS
.Tableau span {
   display:inline;
   float:left;
   border:1px solid #FF6600;
   margin:0px;
   padding:3px;
  }
.Tableau p {
   clear:left;
   margin:0px;
   padding:0px;
   height:100% !important; height:1em;
  }
.Tableau p.legende {font-weight:bold}
.Tableau span.col1 {width:70px}
.Tableau span.col2 {width:120px}
.Tableau span.col3 {width:90px}

HTML
<div class="Tableau">
<p class="legende">
<span class="col1">L&eacute;gende 1</span>
<span class="col2">L&eacute;gende 2</span>
<span class="col3">L&eacute;gende 3</span>
</p>
<p>
<span class="col1">Case 1.1</span>
<span class="col2">Case 1.2</span>
<span class="col3">Case 1.3</span>
</p>
<p>
<span class="col1">Case 2.1</span>
<span class="col2">Case 2.2</span>
<span class="col3">Case 2.3</span>
</p>
</div>

Le "height:100%" est indispensable pour Internet Explorer 7.
Le "height:1em" est indispensable pour Internet Explorer 6.

Pour permettre le bon affichage de cet exemple dans ces 2 navigateurs, on a utilisé la propriété !important. Si vous voulez mieux comprendre cette finesse; voir "!important est ignoré par IE6".

Limites de la démonstration

Même si l'exemple ci-dessus singe de façon convaincante les cellules d'un tableau, il n'en adopte pas exactement le comportement dans de nombreuses situations. Essayez par exemple de réduire la largeur de la fenêtre de votre navigateur et vous constaterez que les cellules se ré-ordonnent d'une façon inappropriée.

Les encadrements des cellules sont complexes à modifier. Il est, par exemple, trés difficile de faire disparaître le double trait séparant les cellules sans rencontrer des incompatibilités entre Internet Explorer et Firefox.

Avantages des tableaux en CSS

Ce type de mise en page peut permettre des variations inhabituelles dans les largeurs ou les hauteurs de cellule. Voici ce qu'on obtient en inversant les attributions des classes pour les colonnes 1.2 et 1.3 et en ajoutant un saut de ligne dans la case 1.3. (les styles CSS utilisés sont exactement les mêmes que dans l'exemple précédent).

Légende 1 Légende 2 Légende 3

Case 1.1 Case 1.2 Case
1.3

Case 2.1 Case 2.2 Case 2.3

Code :

HTML
<div class="Tableau">
<p class="legende">
<span class="col1">L&eacute;gende 1</span>
<span class="col2">L&eacute;gende 2</span>
<span class="col3">L&eacute;gende 3</span>
</p>
<p>
<span class="col1">Case 1.1</span>
<span class="col3">Case 1.2</span>
<span class="col2">Case<br>1.3</span>
</p>
<p>
<span class="col1">Case 2.1</span>
<span class="col2">Case 2.2</span>
<span class="col3">Case 2.3</span>
</p>
</div>

Conclusion

Il est quasi-impossible de reproduire par des CSS les caractéristiques exactes d'un tableau et cela ne présente d'ailleurs aucun intérêt.

Contrairement à une idée largement répandue, les balises <table> ne posent pas - dans la plupart des cas - de gros problèmes d'accessibilité, alors qu'un tableau reconstruit à l'aide de CSS peut représenter un casse-tête insoluble sur ce point.

La démonstration ci-dessus doit être appréciée pour ce qu'elle est : un simple exercice de style.

Le copyright de cette page appartient à css-faciles.

 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie
Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS Problèmes et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


--> Eléments ''blocs'' et éléments ''en-ligne''
Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

"Eléments blocs"
et "éléments en ligne"

Toutes les propriétés CSS ne s'appliquent pas forcément à tous les éléments HTML. Voici pourquoi...

Les éléments HTML peuvent être de trois types : le type "bloc" (parfois appelé "boîte"), le type "en-ligne" et le type "invisible". Certaines propriétés CSS ne sont conçues que pour s'appliquer aux éléments "blocs".

Sélection de liens concernant les éléments blocs et les éléments en ligne.

Ces liens pointent vers des pages dont les contenus complètent notre article.

La propriété "Display"
Il existe en réalité plus de 3 modes d'affichage pour les éléments HTML. Cet article présente les modes "run-in", "compact" et bien d'autres modes rarement utilisés.

Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
Alsacréations insiste sur la distinction à faire entre la structure HTML des éléments et leurs types de rendu : même lorsque l'on modifie la façon d'afficher un élément en jouant sur sa propriété "display", on ne change pas sa structure HTML intrinsèque.

3 modes d'affichage pour les éléments HTML

Par défaut, les éléments HTML sont affichés selon l'un des modes suivants :

1- Bloc / block

éléments superposés Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés (par défaut) l'un sous l'autre.

Exemple typique d'élément bloc : l'élément <p> (le paragraphe).

2- En-ligne / inline

éléments côte à côte N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent dans une page, ils sont positionnés l'un à côté l'autre (si la largeur de page le permet).

Exemple typique d'élément en-ligne : l'élément <img> (image).

3- Invisible / not displayed

élément invisible Certains éléments ne servent qu'à apporter des informations invisibles pour l'internaute.

Exemple typique d'élément non affiché : l'élément <meta>.

Rôle des éléments les plus courants

Les éléments de type "block" sont généralement ceux que l'on utilise pour la mise en page, alors que les éléments "inline" sont surtout utilisés pour attribuer un style à une portion de texte.

Voici quelques éléments de type bloc que vous connaissez sans doute :

  • <div> : balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
  • <h1> ... <h6> : encadre un titre ou un sous-titre.
  • <p> : paragraphe.
  • <ul>, <ol>, <dl> : listes (non ordonnée, ordonnée ou avec définition).
  • <li>, <dt>, <dd> : élément de liste, définition, et titre de définition.
  • <table> : tableau.
  • <blockquote> : paragraphe indenté (décalé à droite) normalement utilisé pour présenter une citation.
  • <pre> : bloc de code préformaté.
  • <form> : formulaire de saisie.

Et voici quelques éléments en-ligne que vous avez sans doute déjà utilisés :

  • <span> : balise multi-usage, trés pratique pour appliquer un style CSS à une portion de texte, par exemple.
  • <a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut diriger un lien.
  • <strong> : utilisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs actuels afficheront cette portion en gras. NOTE : l'ancienne balise <b> (bold) est obsolète et ne doit plus être utilisée.
  • <em> : utilisé pour accentuer l'importance d'une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion en italique. NOTE : l'ancienne balise <i> (italic) est obsolète et ne doit plus être utilisée.
  • <img> : image, permet de placer une image au milieu du flux de texte.
  • <br> : saut de ligne. Voilà un cas tout à fait particulier d'élément en-ligne, qui provoque un saut de ligne. Malgré cette particularité, <br> n'est définitivement pas un bloc et doit être classé comme élément en-ligne.
  • <input> : champs de saisie dans un formulaire, tel que ou
  • <abbr> : signale une abbréviation (placez votre curseur dessus pour voir le fonctionnement). Note : Internet Explorer ne gère pas cette balise dans ses versions antérieures à la version 7.

Emboîtement des éléments blocs et en-ligne

D'une façon générale, un élément en-ligne peut s'emboîter dans un élément bloc, alors que l'inverse n'est pas vrai.

Emboîtement autorisé :

<p>
  Phrase avec un <strong> mot </strong> important
</p>

Emboîtement INTERDIT :

<strong>
  <p>Première phrase</p>
  <p>Deuxième phrase</p>
</strong>

Ce dernier exemple fonctionne sans doute dans certains navigateurs, mais il n'est pas conforme aux conventions concernant les emboîtements d'éléments et ne doit pas être utilisé dans vos pages.

Vous pouvez par contre emboîter sans problème un élément block dans un autre élément block ou un élément inline dans un autre élément inline.

Ces règles générales comportent quelques exceptions dont vous trouverez une liste sur alsacreations.

Changer le mode d'affichage d'un élément

Il peut être parfois bien pratique (voire même indispensable !) de changer la façon dont un élément s'affiche.

La propriété CSS "display" permet de basculer d'un mode d'affichage à l'autre trés simplement en écrivant :

display:block
display:inline
ou
display:none

A titre d'exemple, voici comment afficher et gérer un lien (élément en-ligne <a>) sous forme de bloc :

Code :

<a href="bloc-en-ligne.php" style="background-color:#FFCCCC; display:block;">
  <img src="images/blocs-lignes.gif" alt="">
  Exemple de lien
</a>

Résultat :

Exemple de lien

Voici comment se présenterait ce lien sans la propriété "display:block" :

Exemple de lien

NOTE IMPORTANTE : si la propriété "display" permet de changer la façon dont un élément est affiché à l'écran, elle ne modifie absolument pas sa nature réelle. Les éléments "block" ne peuvent être emboîtés dans des éléments "inline", même si vous avez modifié leurs propriétés d'affichage !

Propriétés CSS réservées aux éléments "bloc"

D'une façon générale, la plupart des propriétés CSS visant à positionner un élément dans la page sont réservées aux éléments "bloc" ou ayant la propriété "display:block".

C'est par exemple le cas des propriétés suivantes :

  • position (static, absolute, relative, fixed) : permet de définir la façon dont un élément se positionne par rapport aux autres éléments de la page.
  • left, top, right, bottom : positionnent les côtés des éléments.

Cas (un peu) particuliers

1- Positionnement d'éléments en-ligne

Comme nous venons de le voir dans le chapitre précédente, la propriété "position" ne peut pas s'appliquer à un élément en-ligne. On peut cependant positionner ce type d'élément à l'aide de la propriété "float".

Cette propriété permet de positionner n'importe quel type d'élément sur le côté gauche (float :left;) ou droit (float :right;) d'un pavé de texte, par exemple. L'image que comporte ce paragraphe est positionnée à l'aide d'un "float :left". Pour en savoir plus sur l'utilisation de cette propriété, consultez notre page intitulée mise en page avec les CSS.

2- Hauteur et largeur pour des éléments en-ligne

D'une façon générale, les éléments en-ligne n'ont pas de largeur ni de hauteur pré-définies. C'est leur contenu qui déterminera ces valeurs.

On serait donc tenté de croire que ces balises ne peuvent avoir de propriété width ou height.

Il existe pourtant quelques balises en-ligne qui font exception. Il s'agit de :

  • <img>
  • <input>
  • <textarea>
  • <select>
  • <object>

qui portent le nom d'éléments "remplacés" ou "replacés", suivant les traductions.

3- Cadres et marges pour des éléments en-ligne

Les éléments en-ligne peuvent parfaitement se voir attribuer des marges internes et externes (padding et margin), ainsi que des bordures (border) ou un fond (background).

Contrairement à ce qu'on pourrait croire, un élément en-ligne peut donc avoir l'apparence d'une "boîte".

Exemple :

<p> Exemple de mot <span style="border-style:solid; border-width:2px"> encadré </span></p>

Résultat :

Exemple de mot encadré

Le copyright de cette page appartient à css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


Pseudo-frames en CSS

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

Pseudo-frames en CSS

Comment avoir un menu fixe avec un contenu mobile

Faire en sorte de conserver un menu fixe, même lorsque l'internaute fait défiler le texte de la page, est le rêve de beaucoup de concepteurs de sites Internet. Les "frames", souvent utilisés dans ce but, présentent hélas de graves inconvénients. Voici comment obtenir ce résultat (sans les inconvénients) à l'aide de CSS.

Sélection de liens concernant
les
"pseudo-frames"

Ces liens pointent vers des pages dont les contenus complètent notre article.

Zones fixes
Batraciens propose 4 exemples de zones fixes compatibles avec IE6. Dommage toutefois que les propositions passent par des hacks plutôt que par des feuilles de style altérnatives.

Utiliser les bugs d'Explorer
Une explication parfaitement claire du principe de base permettant de simuler la propriété "fixed" avec IE6. Bien que basée sur un "hack", elle est beaucoup plus propre que l'exemple de "Batraciens"

Position "fixed" for Internet Explorer
Voilà un feu d'artifice d'exemples trés détaillés et clairement commentés pour ceux que l'anglais n'effraie pas.

Mots clés
de cette page :

Création de site Web, design de site Web, conception de sites Internet.

Cliquez ici pour voir un exemple simple de pseudo-frames avec menu vertical

Cliquez ici pour voir un exemple simple de pseudo-frames avec menu horizontal

Les avantages des "pseudo-frames"

L'expérience démontre que la présence d'un menu fixe améliore le confort de navigation, fidélise les visiteurs et augmente sensiblement le temps passé sur le site et l'appréciation générale que les internautes en font.

Ce besoin tout à fait évident trouve une solution simple et élégante à l'aide de la propriété CSS nommée "fixed". Malheureusement, si cette solution fonctionne parfaitement avec tous les navigateurs "modernes" (FireFox, Mozilla, Opera, ...), Internet Explorer 5.5 et 6.x ne reconnaissent pas les instructions qui permettent de réaliser ce type de mise en page (mais comme nous allons le voir, il y a une astuce !)

Le principe des "frames" permet de régler le problème. Les "frames" sont hélas un système obsolète qui ne répond plus aux normes Web actuelles et qui présente de graves inconvénients notamment en ce qui concerne le référencement des sites qui l'utilisent.

Devant ces difficultés, la plupart des concepteurs de site renoncent aux formidables avantages que présentent les menus fixes.

La solution présentée ici fait le pari de contourner l'ensemble des obstacles ennoncés ci-dessus et de proposer un code conforme avec les normes Web actuelles et compatible avec la totalité des navigateurs existant (dont Internet Explorer 6).

A propos des ascenseurs

Par défaut, le bloc <html> d'une page Web est pourvu d'ascenseurs automatiques. Si vous remplissez le bloc <body> avec une grande quantité de texte et d'image, un ascenseur sera nécessaire pour visualiser l'ensemble du contenu de la page. Etant donné que le bloc <body> n'a généralement pas d'instruction particulière concernant la gestion des ascenseurs il renvoi la demande à son bloc parent, c'est à dire <html>. Ce bloc affiche alors un ascenseur qui permet de faire défiler l'ensemble de son contenu, c'est à dire l'ensemble du bloc <body> (une vraie partie de ping-pong !).

La quasi-totalité des sites que vous pouvez visiter sur le Web utilise ce système d'ascenseur automatique : le bloc <body> est rempli avec l'ensemble du contenu à présenter et son ascenseur permet de faire défiler l'ensemble du contenu comme on voit défiler un paysage à travers la fenêtre d'un véhicule.

A l'inverse, notre proposition de mise en page vous permet de positionner des ascenseurs indépendants sur chaque bloc et multiplie donc le nombre de "fenêtres" permettant de faire défiler du contenu.

L'ascenseur automatique par défaut du bloc <HTML> va donc être inactivé tandis que nous allons créer un ou plusieurs blocs internes qui seront pourvus d'ascenseurs indépendants. Cette disposition va permettre de faire défiler le contenu de certains blocs tandis que les autres blocs restent fixes sur la page.

Exemple 1 : un menu fixe en partie gauche de la page

Voir un exemple

Internet Explorer 5.5 et 6.x ne reconnait pas la propriété "fixed" qui permet de figer la position d'un bloc sur une page.

Solution :

a) L'ascenseur automatique du bloc <html> est désactivé à l'aide de l'instruction overfow: hidden . De ce fait, le "flux" de ce bloc principal est bloqué (son contenu restera fixe).

 html, body {overflow:hidden;
margin:0px;
padding:0px;}

b) Tous les blocs (y compris le menu et le bloc qui contiendra le texte) sont positionnés dans le bloc <body> à l'aide de :
position: fixed dans notre déclaration de style principale
position: absolute pour la déclaration de style destinée à Internet Explorer 5.5 et 6

#bloc-fixe {
  position:fixed;
  overflow:auto;
  left:0px;
  width:118px;
  bottom:0px;
  top:0px;
}
#contenu {
  position:fixed;
  overflow:auto;
  left:138px;
  width:450px;
  bottom:0px;
  top:0px;
} <!--[if lt IE 7]>
  <STYLE type=text/css>
    html, body {height:100%;}
    #bloc-fixe, #contenu {
      position:absolute; height:100%;
    }
  </STYLE>
<![endif]-->

Notez le height:100% indispensable pour que IE 5.5 et 6 attribuent une taille au blocs pourvus d'un ascenseur. Sans cette taille, l'ascenseur n'apparaîtra pas.

Pour les autres navigateurs, cette déclaration n'est pas utile car les deux déclarations bottom:0px; et top:0px; suffisent à fixer une taille implicite aux blocs.

En résumé : l'ascenseur de la page est désactivé et sera remplacé par l'ascenseur d'un bloc indépendant qui contiendra le texte de la page.

Note : une fois cette configuration mise en place, il est parfaitement possible de créer dans notre page plusieurs blocs indépendants pourvus d'ascenseurs et contenant chacun un texte. Le bloc qui contiendra les menus pourra lui-même être pourvu d'un ascenseur afin de gérer les menus trop longs pour tenir dans la page (n'oubliez pas que la page peut avoir n'importe quelle dimension selon le type d'écran de l'utilisateur et la taille qu'il souhaite donner à la fenêtre du navigateur).

Exemple 2 : un bloc fixe horizontal

Voir un exemple

La partie se complique un peu car l'instruction height:100% que nous avons inclus dans notre exemple précédent était indispensable pour faire apparaître l'ascenseur dans IE 5.5 et 6.

Pour dégager l'espace nécessaire à un bloc horizontal fixe , on peut utiliser 2 méthodes différentes :

1- Attribuer un padding au bloc html

Cette méthode un peu étrange aura pour effet de réduire la taille du bloc "contenu".

 html, body {overflow:hidden; margin:0px;
padding:0px;}
#bloc-fixe {
position:fixed;
overflow:auto;
right:0px;
left:0px;
top:0px;
height:80px;
}
#contenu {
position:fixed;
overflow:auto;
right:0px;
left:0px;
bottom:0px;
top:85px;
}
</STYLE>

<!--[if lt IE 7]>
  <STYLE type=text/css>
    html, body {height:100%;}
    html {padding-top:85px}
    #bloc-fixe, #contenu {
      position:absolute;
      width:100%;
    }
    #contenu {
      position:absolute;
      height:100%;
    }
  </STYLE>
<![endif]-->

Bien qu'elle ait l'avantage d'être simple, cette méthode est à déconseiller en raison de deux inconvénients majeurs :

a) Elle ne convient pas aux mises en page complexes comportant plusieurs blocs de contenu avec ascenseur.

b) Elle perturbe le fonctionnement des liens internes du type <a name="nom_de_l_ancre"> : en cas de clic sur un lien vers cette ancre (<a href= "#nom_de_l_ancre">), Internet Explorer va déplacer l'ascenseur de façon à positionner l'ancre en haut de page, c'est à dire sous le menu. L'ancre ne sera pas visible !

2- Remplacer le height:100% par une expression calculée en javascript

Voir un exemple

Cette astuce est un grand classique permettant de compenser l'absence de dimensionnement implicite de IE 5.5 et 6.

 html, body {overflow:hidden; margin:0px;
padding:0px;}
#bloc-fixe {
position:fixed;
overflow:auto;
right:0px;
left:0px;
top:0px;
height:80px;
}
#contenu {
position:fixed;
overflow:auto;
right:0px;
left:0px;
bottom:0px;
top:85px;
}
</STYLE>

<!--[if lt IE 7]>
<STYLE type=text/css>
html, body {height:100%;}
html {padding-top:85px}
#bloc-fixe, #contenu {
position:absolute;
width:100%;
}
#contenu {
position:absolute;
height: expression (document. documentElement
.clientHeight - 85);
}
</STYLE>
<![endif]-->

Les limites de ce type de mise en page :

a) Les blocs horizontaux que vous définirez comme "fixes" consomment une partie de la hauteur de page disponible. Prenez garde à ne pas trop réduire cette hauteur sous peine de forcer vos utilisateurs à faire défiler le texte principal dans un rectangle "écrasé" offrant une faible visibilité.

b) Si votre ou vos bloc(s) fixes ont une hauteur fixe (le "header"/en-tête, par exemple), attention à ce qui peut se produire si l'utilisateur augmente la taille des polices : le texte contenu dans ces blocs risque d'être "rogné" et de devenir illisible. Essayez donc de réserver les blocs de hauteur fixe à l'affichage d'images ou placez des ascenseurs dans ces blocs. Nous vous conseillons en particulier de placer un ascenseur "auto" dans votre bloc menu pour être sûr que l'ensemble de votre menu sera toujours accessible.

c) La navigation à l'aide du clavier n'est plus possible pour Internet Explorer 5.5 et 6.x ainsi que pour Firefox antérieur à la version 1.5 : impossible de "scroller" directement via les flèches du clavier ou via la molette de souris. Un clic dans le bloc "scrollable" permet toutefois de rétablir ces fonctionnalités. A partir de la version 1.5 de FireFox, comme pour Opera, on peut également rétablir ces fonctionnalités en déplaçant le curseur sur le bloc "scrollable" à l'aide de la touche de tabulation.

Cet inconvénient pourrait être réglé avec un petit script donnant le "focus" au bloc principal au moment de l'ouverture de la page.

<script type="text/javascript">
  document.getElementById("contenu").focus()
</script>

Combiner un menu gauche fixe avec un design fluide

Consultez notre page consacrée au design fluide.

Le copyright de cette page appartient à css-faciles.

 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.
Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS Problèmes et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir [image] Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Reflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Dans cette page :


PNG

Portable Network Graphics

Le Portable Network Graphics est un format ouvert d'images numériques, qui a été créé pour remplacer le format GIF, à l'époque propriétaire et dont la compression était soumise à un brevet.

Catégories :

Définitions :

  • format d'image compressée (bmp, eps, gif, jpeg, png, tiff, vectoriel, ... ) www. multimania. com/compressions/png. html (source : iut-orsay)
Portable Network Graphic
Extension de fichier : | . png
Type MIME : | image/png
Développé par : | W3C
Type de format : | format d'image matriciel sans perte
Standard (s) : | ISO 15948, IETF RFC 2083
Spécification : | Format ouvert

Le Portable Network Graphics (PNG) est un format ouvert d'images numériques, qui a été créé pour remplacer le format GIF, à l'époque propriétaire et dont la compression était soumise à un brevet. Le PNG est un format non destructeur particulièrement adapté pour publier des images simples comprenant des aplats de couleurs. On prononce habituellement PNG comme "ping" ou lettre à lettre : "P-N-G".

Il a été normalisé par l'ISO (ISO/CEI 15948 :2004).

PNG est une spécification pour Internet et l'objet d'un RFC. Il a été créé pour contourner la licence de GIF qui était utilisé à ce moment, CompuServe refusant de laisser utiliser son format gratuitement. PNG a dans ce cas été défini mais en augmentant les capacités de GIF.

Utilisation

Une image PNG avec un fond transparent
La même image sur un fond opaque permet d'observer la transparence

Pour les images synthétiques

PNG est spécifiquement approprié quand il s'agit d'enregistrer des images synthétiques destinées au Web comme des graphiques, des icônes, des images représentant du texte (bonne conservation de la lisibilité), ou des images avec peu de dégradés. Le PNG surpasse régulièrement le format GIF tant en ce qui concerne la taille (avec une palette de couleurs bien choisie) que la qualité dans la mesure où il n'est pas limité à 256 couleurs.

Pour les photos

Les caractéristiques de PNG lui permettent d'enregistrer des photographies sans perte de données, mais au détriment de la taille du fichier résultant qui reste la majorité du temps particulièrement supérieure à celle de formats spécifiques aux photographies comme JPEG (ou JPEG 2000).

Détails sur le format

PNG permet essentiellement d'enregistrer les images matricielles sous différents formats :

  • 1 bit par conséquent monochrome (mais pas nécessairement noir et blanc)
  • 2 bits pour les images en quadrichromie
  • 4 bits servant à choisir parmi une palette de maximum 16 couleurs contenues dans le fichier
  • 8 bits en niveaux de gris (256 niveaux)
  • 8 bits servant à choisir parmi une palette de maximum 256 couleurs contenues dans le fichier (équivalent au format GIF)
  • 24 bits en 16 777 216 (couleurs vraies)
  • 32 bits, soit 232 ou 4 294 967 296 couleurs.
  • 48 bits, soit 248 ou 281 474 976 710 656 couleurs.
Voir l'article Image numérique pour l'explication de ces notions.

Après l'application d'un filtre prédictif qui permet généralement d'obtenir qui plus est hauts niveaux de compression, le tout est compressé sans pertes suivant l'algorithme deflate'' (RFC 1951), généralement avec zlib.

Les composantes des pixels ou les entrées de palette sont données soit au format RVB (rouge, vert, bleu) , soit au format RVBA (avec un canal alpha supplémentaire pour la translucidité). Alors, 8 ou 16 bits supplémentaires sont utilisés par pixel ou par entrée de palette, ce qui fait 16 bits pour une image en niveaux de gris, 32 bits pour une image en couleurs vraies et 64 bits pour une image en 4 canaux de 16 bits chacun.

La translucidité

La présence d'un canal alpha définissant différents niveaux de transparence le rend parfait pour la composition sur les pages web. Cette caractéristique est bien implémentée par la majorité des navigateurs web actuels (2007) à l'exception d'Internet Explorer 6 et antérieurs. Il existe cependant des astuces pour les webmestres désirant contourner cette limitation, comme les scripts PNG Behaviour, IE7 ou bobosola. Internet Explorer 7 gère correctement le canal alpha.

La transparence

Quand l'image PNG utilise une palette de 256 couleurs maximum, il est envisageable d'utiliser une des couleurs pour la transparence.

C'est le même comportement qu'avec le format GIF et cela fonctionne même avec Internet Explorer 6. Donc, les images web au format GIF peuvent être converties en cette version de PNG sans crainte d'incompatibilité avec la majorité des navigateurs web actuels (premier trimestre 2006), et avec l'avantage d'une taille de fichier fréquemment réduite et sans souci de brevet (le brevet GIF est néanmoins tombé en 2004 dans le domaine public).

Autres comparaisons avec GIF

Le PNG, d'ailleurs quelquefois nommé par récursivité PNG's Not GIF (PNG n'est pas GIF) , peut faire tout ce que le format GIF peut faire et même plus, comme la translucidité. Il n'a cependant pas été prévu pour faire des images animées, mais le format dérivé MNG a été créé par ses auteurs à cet effet (voir aussi le format APNG).

Voir aussi

Ce texte est issu de l'encyclopédie Wikipedia. Vous pouvez consulter sa version originale dans cette encyclopédie à l'adresse http://fr.wikipedia.org/wiki/Portable_Network_Graphics.
Voir la liste des contributeurs.
La version présentée ici à été extraite depuis cette source le 11/03/2009.
Ce texte est disponible sous les termes de la licence de documentation libre GNU (GFDL).
La liste des définitions proposées en tête de page est une sélection parmi les résultats obtenus à l'aide de la commande "define:" de Google.
Cette page fait partie du projet Wikibis.


CSS

Feuilles de style en cascade

Le langage informatique CSS permet de décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium.

Page(s) en rapport avec ce sujet :

Le langage informatique CSS (Cascading Style Sheets : feuilles de style en cascade) permet de décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient fréquemment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Les enjeux

Séparer la structure d'un document de ses styles de présentation

L'un des objectifs majeurs de CSS est de permettre la stylisation hors des documents. Il est par exemple envisageable de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS scindée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation apporte un certain nombre de bénéfices, permettant de perfectionner l'accessibilité, de changer plus aisément de structure[réf. nécessaire] et de présentation, et de diminuer la complexité de l'architecture d'un document.

Ainsi, les avantages des feuilles de style sont multiples :

Dans chaque média, les styles de présentation déterminés par l'auteur du document se combinent avec ceux par défaut de l'agent utilisateur et ceux issus des prédilections de l'utilisateur et de sa configuration personnelle.

Les capacités du récepteur peuvent être prises en compte par les auteurs, à destination des agents utilisateurs implémentant le module CSS3 «media queries»[1] : ce dernier sert à conditionner la prise en compte d'une feuille de style à des contraintes concernant surtout la résolution ou la capacité de restitution des couleurs.

Permettre la cascade des styles

La «cascade» est la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner :

  • peuvent avoir des propriétés de marges, de bordure, d'arrière-plan, de largeur ou de hauteur, etc. Dans un rendu vocal, des propriétés équivalentes permettent de déterminer des pauses dans la lecture avant ou après le contenu, de choisir une voix, de régler son débit ou son niveau sonore.
  • peuvent être déplacées comparé à leur position par défaut dans le flux, ou avoir un comportement spécifique dans ce dernier (permettre un rendu en colonnes adjacentes, se superposer aux boîtes voisines, ou être masquées par exemple).

    • Propriétés et valeurs

    Les caractéristiques applicables aux boîtes CSS sont exprimées sous forme de couples propriété : valeur.

    Les propriétés sont libellées avec mots-outils anglais tels que «width» (largeur), «font-size» (taille de la police de caractères) ou «voice-volume» (volume sonore du rendu vocal).

    Les valeurs peuvent être selon les cas exprimées avec unités normalisées d'autre part, ou de mots-clés propres à CSS. A titre d'exemple, une couleur de fond ou de texte peut être exprimée à l'aide du modèle RGB ou des mots clés black, blue, fuchsia, etc.

    Les propriétés CSS ont été établies selon un compromis entre deux contraintes opposées : favoriser la lecture des feuilles de styles par les agents utilisateurs en multipliant les propriétés individuelles, ou favoriser leur rédigéure par les auteurs en recourant à un nombre plus réduit de propriétés combinées. A titre d'exemple, la position d'une image d'arrière-plan est déterminée par une propriété unique (background-position), combinant les deux valeurs d'abscisse et d'ordonnée, et non par deux propriétés différentes. De même, il existe des propriétés raccourcies permettant aux auteurs de simplifier l'écriture d'une série de propriétés : le raccourci font permet, par exemple, de résumer en une seule règle la totalité des propriétés de police de caractères, de taille, de hauteur de ligne, de casse, de graisse et d'italique. Mais l'utilisation du caractère «/» rend bien plus complexe l'analyse syntaxique des feuilles de styles par les agents utilisateurs[2].

    Sélecteurs et blocs de règles

    Les propriétés sont regroupées par blocs de règles, délimités par les accolades {}. Chaque bloc est précédé d'un sélecteur désignant les éléments structurels auxquelles les propriétés concernées doivent être appliquées :

    p { font-size: 110%; font-family: Helvetica, sans-serif; }

    Bien que ce code CSS ne décrive pas la totalité de la présentation d'un document, il forme à lui seul une feuille de style à part entière. Il fixe pour les éléments p (paragraphe), le paramètre de taille à la valeur 110% et le paramètre de police à la valeur Helvetica, ou, si Helvetica est indisponible, une police générique sans serifs.

    p est un exemple de sélecteur simple. D'autres sélecteurs simples peuvent cibler plus particulièrement un ou plusieurs éléments en recourant aux identifiants ainsi qu'aux classes attribués aux éléments structurels : les identificateurs (attribut id) sont utilisés pour caractériser un élément unique (un menu, un mot... ), alors que les classes (attribut class) sont utilisées pour caractériser un ensemble d'éléments (comme des menus organisés de manière identique).

    Des sélecteurs contextuels, constitués par combinaisons de sélecteurs simples, permettent de viser des éléments selon leur position dans le document : a img ne désignera par exemple que les images présentes dans des liens.

    Pour permettre la cascade des styles, des règles de calcul de spécificité permettent au moteur de rendu CSS de déterminer le degré de priorité à appliquer à différents sélecteurs visant concurremment un même élément, et de trier ainsi les règles à lui appliquer[3]. Ce calcul repose sur la somme des valeurs données aux divers sélecteurs simples formant le sélecteur contextuel :

    • chaque type de sélecteur simple a sa valeur de priorité : 0, 0, 0, 1 pour un élément, 0, 0, 1, 0 pour une classe, 0, 1, 0, 0 pour un identifiant unique id.
    • la mention !important ajoutée dans la règle donne une spécificité de 1, 0, 0, 0.
    • l'origine du style est déterminante en dernier ressort : un attribut style présent dans le document HTML a la priorité sur les autres sources de styles auteur, pour permettre les surcharges locales des styles communs à une série de pages web. D'autre part, à priorités identiques, un style utilisateur l'emporte sur un style auteur, qui l'emporte sur le style par défaut de l'agent utilisateur.

    Les feuilles de styles sont par conséquent des documents textuels, dont la syntaxe se veut simple et intuitive, pour permettre leur lecture et leur rédigéure autant directement par l'auteur qu'avec un logiciel.

    Un concept parmi d'autres, présent dès l'origine du web

    Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web («WorldWideWeb», renommé ensuite «Nexus») sert à mettre en forme les documents avec ce qui serait actuellement reconnu comme une «feuille de style utilisateur»[4]. De même, les navigateurs Viola en 1992 et Harmony en 1993 recourent à un mécanisme identique servant à déterminer le rendu des polices de caractères, des couleurs ou de l'alignement du texte.

    Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les premières implémentations HTML ne comportant pas non plus d'éléments de présentation, une pression croissante s'exerce dans ce cas pour que les navigateurs permettent aux auteurs de déterminer eux-mêmes la mise en forme des pages web [5], dans une démarche issue de la publication imprimée électronique. C'est dans ce contexte, en 1994-1995, que le tout nouveau Netscape Navigator introduit les premiers éléments HTML de présentation à l'initiative de Marc Andreessen, tandis qu'apparaissent concurremment les premières propositions de formats de styles externes[6] : le «stylesheet proposal» de Pei Wei (créateur de Viola) [7], les «Stylesheets for HTML» de Robert Raisch (O'Reilly) [8], et enfin les «Cascading HTML Style Sheets» (CHSS) d'Håkon Wium Lie [9]. La naissance de CSS répond à une volonté de «proposer une alternative à l'évolution du HTML d'un langage de structuration vers un langage de présentation»[10].

    Une troisième voie de développement est aussi ouverte à la même époque : le langage de transformation DSSSL des documents SGML, élaboré par James Clark, suggère la possibilité d'un format de styles qui ne soit pas uniquement descriptif, et se rapproche d'un véritable langage de programmation [11]. Cette voie est suivie par Netscape, qui propose en 1996 au W3C les «JavaScript-Based Style Sheets» (JSSS) [12], implémentée par Netscape Navigator 4 en 1997.

    Les origines des CSS sont par conséquent liées à trois alternatives majeures :

    • HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration ?
    • Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur ?
    • La réponse aux besoins est-elle un format de description de la mise en forme, ou un langage de transformation ?

    Les premiers développements

    La première proposition de Cascading HTML Style Sheets formulée par Håkon Wium Lie retient l'attention de Dave Raggett, qui est dans ce cas le principal éditeur du projet de spécification HTML3.0. Partisan d'un HTML purement structurel, il encourage la publication d'un document de travail CHSS, pour que ce dernier puisse être présenté et discuté à la seconde conférence mondiale sur le WWW (Mosaic and the web', Chicago, 1994). Il modifie aussi avec Håkon Lie le navigateur Arena [13], pour permettre de tester ce format, et en fait la démonstration lors de la troisième conférence WWW en 1995.

    Parallèlement, Bert Bos, qui travaillait dans ce cas sur le navigateur Argo [14], et qui avait soumis au W3C son propre projet «Stream-based Style Sheet Proposal» (SSP), décide de joindre ses effets à ceux d'Håkon Lie. SSP ayant été développé avec l'idée d'être applicable non seulement à HTML, ainsi qu'à d'autres langages de balisage, Bert Bos et Håkon Lie reprennent cet objectif, et en font une des caractéristiques clés de ce qui devient dans ce cas CSS lui-même.

    Un autre aspect de CSS s'avère dans ce cas déterminant face aux alternatives existantes : CSS est le premier format à inclure l'idée de «cascade» (feuille de style en cascade), c'est-à-dire la possibilité pour le style d'un document d'être hérité à partir qui plus est d'une «feuille de style». Cela permet d'arbitrer entre plusieurs sources concurrentes de mise en forme d'un élément, et répond par conséquent à l'obligation de composer entre les prédilections stylistiques des auteurs et des utilisateurs.

    Le World Wide Web Consortium (W3C) devient opérationnel en 1995, et la liste de discussion www-style est dans ce cas créée[15]. La même année se tient à Paris un «W3C style sheet workshop» décisif pour l'avenir des CSS[16]. Y est surtout affirmée la volonté de conserver les feuilles de style sous une forme simple, ce qui exclut l'hypothèse JSSS de Netscape. D'autre part, Thomas Reardon (Microsoft) y annonce le support à venir de CSS dans les futures versions d'Internet Explorer : par conséquent, quand le W3C crée à la fin de l'année l'«HTML Editorial Review Board» (HTML ERB) pour ratifier les futures spécifications HTML, DOM et CSS, Netscape, représenté par Lou Montulli, se rallie finalement au projet CSS mené par Bert Bos et Håkon Lie.

    Vers une maturation complexe

    Contrairement aux logiciels, les spécifications CSS ne sont pas développées par versions successives, qui permettraient à un navigateur de se référer à une version surtout. CSS est développé par «niveaux», ce qui contraint chaque nouveau niveau à intégrer le précédent, et chaque implémentation à être compatible avec la précédente : CSS1 est par conséquent développé pour être un sous-ensemble de CSS2, qui est lui-même développé pour être un sous-ensemble de CSS3. Ceci explique en partie la lenteur de l'avancement normatif de CSS[17].

    CSS1, des implémentations complexes au cours de la guerre des navigateurs

    La spécification CSS1 finale est publiée le 17 décembre 1996, et définit une cinquantaine de propriétés. CSS1 se définit comme un «mécanisme de feuille de style simple, permettant aux auteurs ainsi qu'aux lecteurs d'attacher des styles (…) au document HTML»[18]. Cette simplicité se traduit par le choix d'un langage qui peut être facilement lu et rédigé directement par ses utilisateurs humains, et d'une terminologie conforme aux usages courants dans la publication informatique. Le choix éventuel d'exprimer CSS dans une syntaxe XML ou SGML, régulièrement évoquée pour éviter l'implémentation d'un nouveau mode d'analyse syntaxique, est par conséquent définitivement écartée[19].

    CSS1 ne décrit pas seulement sa propre grammaire : ce premier niveau décrit en effet une grammaire conçue pour permettre aux niveaux ultérieurs d'ajouter de nouvelles fonctionnalités, tout en autorisant la lecture de ces futures feuilles de styles par les implémentations d'origine. Ces nouvelles fonctionnalités ne seront pas comprises par les implémentations d'origine, mais pourront être identifiées comme telles, et ignorées. CSS garantit ainsi sa compatibilité ascendante.

    CSS1 définit principalement les propriétés de rendu typographique du texte : fontes (polices), couleur, taille des caractères, graisse, espacements, bordures et gestion des marqueurs de liste. Il n'est par conséquent pas toujours question de «mise en page» : la propriété float, qui sera ensuite massivement utilisée pour la mise en page CSS globale des designs web, n'est dans ce cas conçue que comme un moyen de placer localement, côte à côte, une portion réduite du contenu, tel qu'une image, et le reste du texte[20]. Compte-tenu des implémentations problématiques de CSS1, le détournement de l'élément HTML table pour gérer la mise en page globale reste dans l'immédiat la solution la plus fréquemment retenue par les auteurs de contenu web.

    En 1996, Internet Explorer 3.0 est le premier navigateur commercial à implémenter partiellement CSS alors que celle-ci est toujours en cours de formulation. Cette implémentation anticipée, menée par Chris Wilson [21] ne correspond pas à la spécification finale. En 1997, Internet Explorer 4.0 voit l'apparition d'un nouveau moteur de rendu, Trident, à l'origine du support croissant mais problématique de CSS dans les différentes versions de ce navigateur sous Windows, jusqu'à IE7 inclus[22].

    Netscape Navigator 4.0 suit le mouvement en 1997, malgré ses réticences historiques vis-à-vis de CSS[23] : dans le contexte de la guerre des navigateurs, il s'agit dans ce cas essentiellement d'éviter que Microsoft ne puisse s'affirmer comme le navigateur le plus conforme. Cependant, cette implémentation précipitée, basée sur des méthodes javascript internes, se révèle finalement peu exploitable par les producteurs de contenus. Netscape Navigator 4.0 apporte aussi une implémentation JSSS, qui restera sans lendemain[24]. Il faudra attendre le nouveau moteur de rendu Gecko et son intégration dans Netscape 6 pour parvenir à une véritable implémentation de CSS1.

    En 1998, alors que s'achève la guerre des navigateurs opposant Netscape et Microsoft, Opera 3.5, dont Håkon Lie est entre-temps devenu le directeur technique, parvient à une implémentation plus complète de CSS1, facilitée par la publication de la première «Test suite for Cascading Style Sheets (CSS) Level 1» créée essentiellement par Eric Meyer pour le W3C[25]. La présence de ces suites de test se révèle un atout majeur à la fois pour les implémentations dans les navigateurs et pour l'appropriation des techniques CSS par les auteurs (en fournissant des exemples détaillés des propriétés et de leurs valeurs).

    Enfin, sous l'impulsion de Tantek Çelik, Internet Explorer 5.0 pour Macintosh lancé en mars 2000, basé sur Tasman, un moteur de rendu spécifique sans rapport avec Trident, est le premier navigateur à supporter totalement (à plus de 99 %) CSS1. Pour assurer la compatibilité avec les précédentes pratiques de codage propre à chaque implémentation (la «soupe de balises»), et permettre un affichage correct des documents web qu'ils soient respectueux ou non des standards CSS et HTML, il est aussi le premier à mettre en œuvre la technique du doctype switching. Adoptée ensuite par l'ensemble des navigateurs, celle-ci devient ensuite l'une des clés de l'implémentation progressive de CSS : elle permet en effet au navigateur de conserver d'anciennes implémentations propriétaires pour des raisons de compatibilité, tout en ayant la possibilité d'opter, selon la syntaxe de la déclaration de type de document de la page, pour un mode de rendu conforme à de nouvelles implémentations standards[26].

    Durant cette période de la fin des années 1990, la conception web est avant tout dépendante de l'utilisation d'HTML comme format de présentation. La défaite de Netscape à l'issue de la guerre des navigateurs, le renouveau qui s'en suit via le projet Mozilla, la naissance d'IE5 Mac, ainsi qu'à un moindre titre l'évolution d'Internet Explorer Windows 5. x, amorcent cependant au début des années 2000 une nouvelle étape dans l'évolution des pratiques de conception des sites web par les auteurs : ces navigateurs permettent en effet de montrer que les pratiques historiques datant de l'époque de la guerre des navigateurs, mêlant structure et présentation, peuvent réellement être abandonnées au profit d'une démarche basée sur les feuilles de styles et le respect plus général des standards du web (au sens d'HTML et CSS). Jeffrey Zeldman, co-fondateur du Web Standards Project et fondateur d'A List apart en 1998, apparaît dans ce cas comme la figure emblématique de ce mouvement de promotion des standards[27]. Il est aussi l'inspirateur d'une démarche de conception «hybride», tirant profit des techniques CSS tout en demeurant provisoirement dans le cadre d'une mise en forme des documents basée sur les tableaux de présentation.

    CSS2, des ambitions précipitées

    Pour répondre aux besoins que la première spécification CSS1 ne couvrait pas toujours, CSS est attribué en 1997 à un nouveau groupe de travail au sein du W3C, présidé par Chris Lilley. En 2007, ce groupe comporte surtout des représentants d'Apple, Google, IBM, Microsoft, Adobe, de la Fondation Mozilla et d'Opera.

    Publié comme une recommandation en mai 1998, le second niveau de CSS étend énormément les possibilités théoriques des feuilles de styles en cascade, avec surtout à peu près 70 propriétés supplémentaires. À la mise en forme typographique du texte initiée avec CSS1 s'ajoutent en effet surtout :

    • la déclinaison en styles propres aux divers média dans lesquels une page web peut être restituée (impression, rendu par une synthèse vocale, par un système braille, par un système de projection, un mobile, etc. )
    • de nouvelles propriétés de positionnement à l'écran pour permettre la réalisation de mise en pages avancées, issues d'un document élaboré conjointement par Microsoft et Netscape[28]
    • un jeu de propriétés autorisant le téléchargement de polices de caractères spécifiques
    • de nouvelles propriétés servant à faire intervenir les prédilections de l'utilisateur dans la mise en forme d'un site.

    Cependant, cette richesse fonctionnelle ne rencontre qu'un écho limité dans ses implémentations :

    • La déclinaison par média est en partie un échec : les styles de rendus vocaux restent théoriques faute de prise en compte par les navigateurs vocaux et lecteurs d'écran. Ils s'avèrent d'autre part incompatibles avec le standard d'interaction vocale SSML. Il en est de même de l'affichage et de l'impression braille. Les styles d'impression ne sont que particulièrement partiellement adoptés par les navigateurs graphiques, tandis qu'une partie des navigateurs pour mobiles ignorent toujours au début des années 2000 le type de média CSS qui leur est dédié.
    • Seules quelques propriétés avancées de positionnement sont reconnues par la totalité des navigateurs graphiques, consolidant ainsi les pratiques de mise en page qui reposent sur des détournements de fonctionnalités CSS (dispositif des blocs flottants ou situés) et HTML (tableaux de mises en page).
    • Le téléchargement de polices de caractères suscite des implémentations non conformes et divergentes entre Netscape et Internet Explorer, et rencontre l'opposition des éditeurs de fontes, soucieux de préserver leurs intérêts commerciaux[29].

    Plusieurs causes sont évoquées pour expliquer ces difficultés et la lenteur des implémentations CSS2 :

    • la «sous-spécification ou quasi-inimplémentabilité de certaines sections»[30]. Håkon Lie souligne lui-même dans sa thèse sur les feuilles de style en cascade, en 2005, les risques de non implémentation ou de perte d'interopérabilité liés à des «fonctionnalités excessives», telles que les marqueurs de liste, les repères de coupe pour l'impression ou le téléchargement de polices de caractères. De même, la complexité des sélecteurs avancés est difficilement conciliable avec la gestion de la cascade.
    • l'absence d'intérêt de la part des fabricants de navigateurs pour des fonctionnalités qui ne répondaient pas obligatoirement à leurs objectifs stratégiques ou commerciaux.
    • l'interruption du développement d'Internet Explorer, navigateur dominant du marché, de 2001 à 2006. Håkon Lie écrivait en effet en 2005 : «2001 est un tournant pour CSS. C'est l'année où Microsoft produit Internet Explorer 6.0 qui offre une prise en charge fonctionnelle, quoiqu'incomplète et buggée, de CSS (…) Aucun autre navigateur n'a été capable de concurrencer WinIE en termes de nombre d'utilisateurs. WinIE a, par conséquent, déterminé le sous-ensemble de CSS utilisable par les auteurs. La prise en charge limitée de CSS par WinIE, combinée à un monopole de fait en matière de navigateur web, est aujourd'hui le plus grave problème du déploiement de CSS.»[31]

    CSS 2.1, retour aux implémentations

    Les retours d'implémentation de CSS2 amènent le groupe de travail CSS du W3C à rédiger à partir de 2001 une version révisée CSS 2.1 («CSS Level 2, Revision 1»), sur la base de ce qui était effectivement adopté par les différents navigateurs. Les objectifs de cette révision sont[32] :

    • de maintenir la compatibilité avec les parties de CSS2 qui sont beaucoup acceptés et mises en application.
    • d'incorporer dans la norme l'ensemble des errata CSS2 déjà publiés.
    • Quand les implémentations changent profondément de la spécification CSS2, de modifier la spécification pour qu'elle soit en accord avec les pratiques généralement admises.
    • de supprimer les systèmes CSS2 qui ont été refusés par la communauté CSS, vu leur manque d'implémentation. CSS 2.1 vise à refléter les mécanismes CSS qui ont été raisonnablement et beaucoup implémentés pour les langages HTML et XML en général (plutôt que pour un langage XML surtout, ou pour HTML seul).
    • de supprimer les mécanismes CSS2 qui seront rendus obsolètes par CSS3, et encourager ainsi l'adoption de mécanismes CSS3 à leur place.
    • d'ajouter un (très) petit nombre de nouvelles valeurs de propriétés, quand l'expérience d'implémentation a montré qu'elles répondaient à un besoin pour la mise en application de CSS2.

    CSS 2.1 corrige CSS2 sur de nombreux points de détail, en supprime certaines sections en tout ou partie (les styles vocaux défini sous le type de media «aural», les styles d'impression, les polices téléchargeables, dont les définitions plus probantes sont repoussées à la future CSS3), et l'explicite à partir des constats mis à jour lors des implémentations (la gestion avancée des blocs flottants via les «contextes de formatage»[33]).

    Après avoir connu 8 versions successives, CSS 2.1 est en juillet 2007 une recommandation candidate, c'est-à-dire le standard que doivent suivre les implémentations[34].

    En 2007, aucun navigateur n'a en effet achevé l'intégration de CSS 2.1 : celle-ci serait implémentée à 56 % par Internet Explorer 7, 91 % par Firefox 2 et 94 % par Opera 9[35]. D'autre part, seule une partie des navigateurs graphiques ont passé avec succès ou retenu comme objectif le test Acid2, lancé en 2005 par le Web Standards Project, à l'initiative d'Håkon Lie, pour faciliter surtout l'implémentation d'un choix de fonctionnalités CSS 2.1 reconnues comme les principales avancées nécessaires : positionnement d'éléments lors de l'affichage, généralisation du modèle de rendu en tableau à l'ensemble des éléments, contenu généré via CSS. L'utilisation professionnelle de CSS reste par conséquent limitée à un sous-ensemble arbitraire de celle-ci, déterminé par les implémentations communes.

    CSS3

    Le développement du troisième niveau des feuilles de styles en cascade débute dès 1999, parallèlement à celui de CSS 2.1.

    CSS3 devient «modulaire», pour favoriser ses mises à jours, mais également son implémentation par des agents utilisateurs aux capacités ainsi qu'aux besoins de plus en plus variés (navigateurs graphiques, navigateurs pour mobiles, navigateurs vocaux). Les navigateurs peuvent ainsi implémenter des sous-ensembles de CSS3[36].

    Dès lors, le degré d'avancement de CSS3 fluctue selon les modules et le degré de priorité qui leur a été donné par le groupe de travail CSS[37]. En 2007, les modules les plus avancés (recommandations candidates) concernent la mise en forme des annotations ruby, la négociation de style entre serveurs et agents utilisateurs («Media Queries»), le rendu web TV, la gestion des couleurs ou encore la prise en compte de la configuration de l'interface utilisateur. Dans d'autres cas, des modules peuvent atteindre le stade de recommendation candidate, mais être ensuite ramené au stade de document travail à cause des difficultés mises à jour suite à l'appel à implémentation. C'est par exemple le cas du module de typographie «CSS Text».

    De même, les implémentations fluctuent selon les stratégies et les besoins des différents navigateurs. Opera implémente par exemple les «Media Queries», qui répondent à ses besoins spécifiques de navigateur multi-plateforme embarqué sur des clients ayant des capacités d'affichage particulièrement variées. Firefox, davantage orienté vers le navigateur exploité comme plateforme, privilégie par contre des modules appropriés à cet usage comme le module sélecteurs avancés.

    Certains membres du groupe de travail CSS, mais aussi des développeurs web, ont soulevé le problème de la lenteur de l'avancement de CSS3 :

    • Pour Ian Hixon, «le groupe de travail CSS est actuellement atteint de dysfonctionnements chroniques» : son caractère trop fermé le prive des contributeurs nécessaires pour l'édition des spécifications, leur relecture ou encore la rédaction des suites de test[38]
    • Pour Daniel Glazman, cette lenteur s'explique par 3 erreurs originelles : le choix de développer CSS par niveau et non pas par versions successives, la priorité accordée à la révision CSS 2.1 au détriment de CSS3, le nombre excessif de modules CSS3 et la complexité des propriétés qui y sont développées[39].

    En 2008, aucun module n'est reconnu comme terminé par le W3C, et l'implémentation dans les navigateurs est par conséquent marginale, fréquemment à titre de test , comme les fonctions -moz-xxx du moteur Gecko, dont le préfixe limite l'utilisation aux seuls navigateurs basés sur Gecko.

    Indépendance de la présentation et de la structure

    CSS ambitionnait originellement l'indépendance entre structure et présentation d'un document.

    Ainsi, le site du CSS Zen Garden, créé en 2003 par Dave Shea, se veut la démonstration de la possibilité de modifier librement le rendu affiché d'une même page web, seulement grâce à CSS et sans aucune modification de son code HTML[40] : il présente, en décembre 2006, 986 désigns différents de sa page d'accueil [41]. Cependant, la majorité de ces designs reposent en tout ou partie sur le remplacement du contenu textuel de la page par des images CSS qui le reproduisent en enrichissant son aspect[42] : la liberté graphique repose toujours partiellement sur la transformation du texte en image. D'autre part, le CSS Zen Garden reste un exercice de style limité à un document unique, à la structure doublée d'éléments et attributs sémantiquement neutres, qui ne servent qu'à donner appui à des sélecteurs CSS. [43]

    S'il existe de nombreux exemples de documents HTML pour lesquels plusieurs feuilles de style ont été développées, il n'existe guère d'exemples de feuilles de style génériques, indépendantes de la structure du document. Les styles par défaut des agents utilisateurs en sont un exemple, mais limité à des effets typographiques simples, sans définition de mise en page[44]. En général, les feuilles de style dépendent étroitement de la structure du document à styliser et sont difficilement réutilisables sur des documents différemment structurés. C'est davantage à travers la création de design patterns HTML CSS que s'exploite cette indépendance potentielle des styles envers la structure spécifique des documents.

    D'une façon plus générale :

    • les difficultés et le manque d'implémentation d'une partie des propriétés CSS limitent la liberté de mise en page, et amènent à l'utilisation de propriétés contraignantes quant à la structure HTML (par exemple, la propriété float impose un ordre précis du contenu ainsi mis en colonne ; de nombreux effets de rendu reposent d'autre part sur une surcharge de balisage sémantiquement neutre, tel que div et span).
    • la réutilisation d'une structure unique sur des média ou des matériels différents grâce à des feuilles de styles est limitée par les contraintes liées aux contenus eux-mêmes ainsi qu'à la capacité des agents utilisateurs à restituer ceux-ci, et par l'obligation d'une négociation de présentation entre client et serveur. Des procédés d'adaptation spécifiques du contenu, de la structure et du rendu côté agent utilisateur se sont avérés nécessaires, tels, que, par exemple, la technologie ERA (Extensible Rendering Architecture développée par Opera. Internet Explorer suit une voie identique avec sa version 7 qui remodèle le rendu imprimé d'une page web pour l'optimiser.

    Accessibilité

    CSS facilite l'accessibilité d'une page web en donnant en dernier ressort à l'utilisateur le contrôle du rendu d'un document dans son navigateur : il est ainsi envisageable de l'adapter à des contraintes ou à des prédilections concernant par exemple la taille d'affichage des caractères ou les couleurs. En séparant structure et présentation, CSS facilite aussi l'écriture de documents structurés de manière sémantique, potentiellement plus exploitables par les aides techniques : la liberté de présentation des éléments de titrage permet par exemple de respecter strictement l'ordre hiérarchique formel de ceux-ci, ce qui permet en retour aux aides techniques d'en établir une table des matières navigable. Enfin, en donnant aux auteurs les moyens d'enrichir la mise en forme du texte, CSS sert à limiter le recours aux textes mis en images[45].

    Cependant, certaines utilisations de CSS peuvent aussi compromettre l'accessibilité du contenu :

    • en substituant à ce dernier des pseudo-contenus qui ne sont accessibles qu'aux utilisateurs qui peuvent percevoir le rendu CSS visuel : c'est le cas par exemple des informations qui seraient véhiculées par des images d'arrière plan.
    • en bouleversant la cohérence indispensable entre l'ordre linéaire de l'information dans le contenu structuré et l'ordre visuel du rendu CSS affiché. Les aides techniques telles que les lecteurs d'écran n'ont en effet accès qu'à cet ordre linéaire : une information qui ne prendrait son sens qu'en fonction de son positionnement CSS n'est pas compréhensible pour leurs utilisateurs.
    • dans une démarche d'accessibilité fondée sur la pertinence de la structure HTML, l'éventail des possibilités de mise en forme de contenu avec CSS peut faire faire perdre de vue l'obligation de baliser le contenu avec éléments signifiants. Il est par exemple envisageable de délimiter visuellement une citation en la mettant en italique ou en l'encadrant de guillemets, mais l'information sur l'origine de ce texte ne sera perceptible, au sens des normes d'accessibilité, que via l'utilisation des éléments q ou blockquote, qui sont les seuls servant à définir une citation HTML et d'en indiquer la source via l'attribut approprié (cite).

    Les méthodes d'application des directives d'accessibilité des contenus web (RGAA, UWEM par exemple) définissent par conséquent des règles d'usages des styles CSS[46].

    Simplicité

    CSS répond à une volonté de disposer d'un format de présentation simple, tant dans ses fonctionnalités que dans sa syntaxe, afin d'en faciliter la manipulation directe par les auteurs et les utilisateurs. Cependant, cette simplicité est remise en cause par plusieurs facteurs :

    • la difficulté à déterminer ainsi qu'à contrôler le résultat de la cascade quand les sources de styles se multiplient. Le rendu final d'un contenu précis dépend de la combinaison de plusieurs feuilles et peut dans ce cas devenir malaisé à faire évoluer. L'interdépendance des feuilles de styles peut rendre difficilement anticipable le résultat d'une modification apportée à l'une d'elle. Les auteurs sont dans ce cas positionnés devant un choix entre cette interdépendance qui optimise la quantité de code et la redondance de styles qui favorise sa maintenance[47].
    • La difficulté à écrire des styles utilisateurs sans disposer de compétences avancées. Les utilisateurs sont en principe les premiers bénéficiaires des CSS, qui leur donnent la possibilité d'adapter la présentation des pages web. Cependant, le mécanisme des styles se prête difficilement au développement d'environnements graphiques qui favoriseraient la manipulation des propriétés CSS[48]. Dans la pratique, le recours aux styles utilisateur reste par conséquent marginal.

    Notes et références

    1. ↑ Media Queries
    2. ↑ PhD Thesis : Cascading Style Sheets
    3. ↑ Cascade CSS et priorité des sélecteurs, Openweb, avril 2005
    4. ↑ Tim Berners-Lee, The WorldWideWeb browser
    5. ↑ Cascading Style Sheets, designing for the Web, Håkon Wium Lie et Bert Bos, ISBN 0-201-59625-3
    6. ↑ La plupart de propositions de formats de styles ont été faites durant les premières années du web. Seules les trois principales sont citées dans l'article, mais toutes ont, à un degré variable, influencé le format CSS final. Voir http ://www. w3. org/Style/History/.
    7. ↑ EMail Msg <9310222103.AA03264@sting.Berkeley.EDU>
    8. ↑ EMail Msg <199306101923.AA29318@ora.com>
    9. ↑ Cascading HTML Style Sheets -- A Proposal
    10. ↑ Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http ://people. opera. com/howcome/2006/phd/#h-28
    11. ↑ d'une façon plus générale, «De nombreuses participants à la liste de discussion www-talk, le lieu de rencontre électronique de la première communauté web, étaient d'accord sur le fait que le web tirerait profit des feuilles de styles. Cependant, il y avait un désaccord sur le point de savoir s'il avait besoin d'un nouveau langage de feuille de style, ou si l'un des langage déjà existants, créés au départ pour la publication imprimée, suffirait à ses besoins». Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http ://people. opera. com/howcome/2006/phd/#h-34
    12. ↑ JavaScript-Based Style Sheets
    13. ↑ Prédécesseur d'Amaya, Arena est le premier navigateur développé par le W3C, à l'origine à des fins de tests d'HTML3.0. Håkon Lie collabora à son développement à partir de 1994 et ce navigateur anticipa de nombreux développement ultérieurs de CSS2. Abandonné par le W3C comme plate-forme de test en 1996, Arena fut ensuite provisoirement tenu par le Yggdrasil Computing jusqu'en 1998. Voir http ://www. w3. org/Arena/
    14. ↑ Créé par Bert Bos en août 1994, Argo faisait parti d'un projet web de l'Université de Groningue. Voir http ://www. w3. org/People/all#bert
    15. ↑ les archives de cette liste dédiée au développement des CSS sont accessibles sur http ://lists. w3. org/Archives/Public/www-style/
    16. ↑ Report on the W3C style sheet workshop, Paris'95
    17. ↑ «You can Just Ship software with bugs in it to put out a new stable release because it's versioned. The next version replaces the old. You can always fix the leftover bugs in the next version. CSS dœsn't have versions. Any problems there are in the way CSS2.1 defines things can't be fixed in CSS3 except maybe by adding really confusing sets of switches. CSS3 cannot change anything in CSS2.1, it can only build on top of it. , What is the CSS Working Group Doing?, Cascading Style Sheets Working Group Blog», 2 juillet 2007
    18. ↑ Cascading Style Sheets, level 1, abstract, http ://www. w3. org/TR/REC-CSS1
    19. ↑ «Au bout du compte, la possibilité d'être lu et rédigé par l'humain avait une valeur ajoutée plus élevée que la possibilité de réutiliser des analyseurs syntaxiques existants», Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http ://people. opera. com/howcome/2006/phd/#ch-problems
    20. ↑ «Floats were intended to be used to take small pieces of content out of the flow and let the rest of the text wrap around them. They were not intended to be used for the main content of a page, nor were they designed for it. Nevertheless, use of floats for the main content of a page is quite common today». David Baron, membre du groupe de travail CSS du W3C, Overuse of floats considered harmful.
    21. ↑ «Program Manager» puis «Platform Architect of the Internet Explorer Platform team», Chris Wilson est à partir de 1996 un des acteurs majeurs du développement CSS. Voir http ://blogs. msdn. com/cwilso/
    22. ↑ Le moteur de rendu Trident mêle en fait deux technologies de rendu graphique : CSS y est concurrencé par le mécanisme connu sous le nom de «haslayout», mis en évidence par reverse engineering en 2005 par un groupe de développeurs indépendants étudiants les bugs de rendu CSS d'Internet Explorer Voir On having layout par Ingo Chao, et "HasLayout" Overview (Markus Mielke, Microsoft)
    23. ↑ «Netscape retarde énormément le développement des feuilles de styles sur le web en diffusant en 1996 ses extensions propriétaires d'HTML ; elles offrent la gestion de la couleur, de la fonte ou même du clignotement (…) Netscape prône la simplicité : les rédacteurs de documents HTML maîtrisent ce format car il est simple ; il suffit par conséquent d'intégrer aux documents de nouveaux éléments HTML simples gérant la présentation.», Daniel Glazman, CSS2, des feuilles de styles pour le Web, décembre 1998, Éditions Eyrolles.
    24. ↑ «Since its inception Netscape had been sceptical towards style sheets, and the company's first implementation turned out to be a half-hearted attempt to stop Microsoft from claiming to be more standards-compliant than themselves. The Netscape implementation supports a broad range of features - for example, floating elements - but the Netscape developers did not have time to fully test all the features which are supposedly supported. The result is that many CSS properties cannot be used in Navigator 4». Bert Bos et Håkon Lie, Cascading Style Sheets, http ://www. w3. org/Style/LieBos2e/history/
    25. ↑ cf. CSS1 Test Suite, Version History, http ://www. w3. org/Style/CSS/Test/CSS1/current/vhistory
    26. ↑ Henri Sivonen, Activating the Right Layout Mode Using the Doctype Declaration
    27. ↑ «Une complexe prise de conscience est en effet envisageable, car le paysage des navigateurs a commencé à changer : même si Microsoft semble exercer un quasi-monopole de fait avec Internet Explorer, un renouveau est en cours. En effet, des navigateurs alternatifs voient le jour (…) Timidement amorcée avec Mozilla 0.6, Opera4 et même Internet Explorer 5, l'adoption progressive par les navigateurs des standards HTML4, XHTML1, CSS, ECMASCRIPT (…) s'est avéré une obligation après les excès de la période précédente», Tristan Nitot et Laurent Denis, préface à l'édition française de Design web : utiliser les standards, Jeffrey Zeldman, 2006.
    28. ↑ Positioning HTML Elements with Cascading Style Sheets, W3C Working Draft, 1997
    29. ↑ «CSS2 offers a mechanism for describing and selecting fonts from the web. However, the feature is not much used. Two major reasons for this might be : First, there is no universal font format which all vendors support; and second, font designer want to be compensated for their work and no suitable payment mechanism is available», Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http ://people. opera. com/howcome/2006/phd/#ch-problems
    30. ↑ Daniel Galzman, «Les standards HTML et CSS des origines à mercredi dernier», http ://disruptive-innovations. com/zoo/slides/20060922/
    31. ↑ Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http ://people. opera. com/howcome/2006/phd/#h-339
    32. ↑ About the CSS 2.1 Specification, CSS 2.1 vs CSS 2, http ://www. w3. org/TR/CSS21/about. html#css2.1-v-css2
    33. ↑ Float, clear et contextes de formatage, Blog & Blues, juin 2006
    34. ↑ «There is no doubt that we will still find (small) bugs in the specification, but given the type of errors we fixed recently, we have reason to believe that the spec is good enough for implementers and users alike. We want people to start implementing and using CSS 2.1 for real (and tell us about any remaining problems, of course) », Bert Bos, éditeur de CSS 2.1, http ://www. w3. org/blog/CSS/2007/07/20/cssan2_1_is_a_candidate_recommendation
    35. ↑ Évaluations d'implémentation réalisées par David Hammond, web browser standards support
    36. ↑ «In such cases, a user agent may implement a subset of CSS. Subsets of CSS are limited to combining selected CSS modules, and once a module has been chosen, all of its features must be supported.», Introduction to CSS3, http ://www. w3. org/TR/css3-roadmap/#whymods
    37. ↑ Cascading Style Sheets Current Work, http ://www. w3. org/Style/CSS/current-work
    38. ↑ «An open group can iterate much faster than a closed group. With an open group we can get test implementations, feedback, tests, and discussion straight away, instead of waiting months and then pulling back the curtain and presenting a fait accompli, at which points comments are perceived more as a pain than a help. », Ian Hixon, http ://ln. hixie. ch/?start=1181118077&count=1
    39. ↑ Daniel Glazman, Calling for a new CSS revolution
    40. ↑ CSS Zen Garden
    41. ↑ CSS Zen Garden Comprehensive Design List
    42. ↑ Le Zen des CSS, Dave Shea & Molly Holzschlag, traduction française, éditions Eyrolles, novembre 2005, page 14
    43. ↑ «Depuis le lancement de CSS Zen Garden sont apparues des techniques de remplacement d'images sans recours à un span. Par conséquent, la majorité des éléments span sont devenus inutiles. Et les classes supplémentairesn'étant pas exploitées dans 98 % des maquettes soumises, elles sont elles aussi redondantes. La liste d'éléments div et span vides à la fin du document est aussi superflue, sauf pour les possibilité d'ouverture offertes au designer.», Molly Hollzschlag, Dave Shea, Le Zen des CSS.
    44. ↑ CSS1 propose un exemple de styles destiné surtout aux navigateurs : Sample style sheet for HTML 2.0. CSS2 définit une feuille de style type mais indicative pour cet usage : Default style sheet for HTML 4. Avec XHTML2.0, ces styles types sont susceptibles de devenir normatifs : Style sheet for XHTML 2.
    45. ↑ «However, pictures were also a threat to the web. Designers started to encode text in images in order to achieve certain fonts or other special effects. In order for HTML to remain a logical markup language (as opposed to a presentational language) a style sheet language was needed. So, the motivation for developing style sheets was twofold : we wanted to give authors the presentational effects they craved, while stopping HTML from sliding down the ladder of abstraction to become a presentational language», Interview with Håkon Wium Lie, 31 mars 2005, http ://www. webstandards. org/2005/03/31/interview-with-hkon-wium-lie/
    46. ↑ A titre d'exemple, le test RGAA Accessibilité des informations affichées comme fonds d'éléments via les styles CSS.
    47. ↑ Dave Shea, {{Redundancy vs. Dependency}}
    48. ↑ Håkon Wium Lie, Cascading Style Sheets, Thesis submitted for the degree of Doctor Philosophiœ, Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 2005, http ://people. opera. com/howcome/2006/phd/#h-337

    Voir aussi

    • Conception de sites web
    • Feuille de style

    Recommandations du W3C
    • (en) Cascading Style Sheets, level 1, recommandation du W3C, 17 décembre 1996, revu le 11 janvier 1999
      • (fr) Les feuilles de style en cascade, niveau 1, traduction non officielle
    • (en) Cascading Style Sheets, level 2, CSS2 Specification, recommandation du W3C, 12 mai 1998
      • (fr) Les feuilles de style en cascade, niveau 2, Spécification CSS2, traduction non officielle
    • (en) Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, recommandation candidate du W3C, 19 juillet 2007
    • (en) Cascading Style Sheets Current Work, état d'avancement des travaux du Cascading Style Sheets Working Group, dont le développement de CSS3

    Bibliographie

    • (en) Cascading Style Sheets, Håkon Wium Lie, Thèse de doctorat en philosophie, Faculté de Mathématiques et de Sciences naturelles, Université d'Oslo, 2005
    • (en) , Cascading Style Sheets, designing for the Web, Håkon Wium Lie et Bert Bos, ISBN 0-201-59625-3
    • (fr) Le Zen des CSS, Dave Shea & Molly Holzschlag, 17 novembre 2005, Éditions Eyrolles, ISBN 2212116993
    • (fr) Design web : utiliser les standards, Jeffrey Zeldman, novembre 2006, Éditions Eyrolles, ISBN 2212120265
    Gecko.
    Ce texte est issu de l'encyclopédie Wikipedia. Vous pouvez consulter sa version originale dans cette encyclopédie à l'adresse http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade.
    Voir la liste des contributeurs.
    La version présentée ici à été extraite depuis cette source le 11/03/2009.
    Ce texte est disponible sous les termes de la licence de documentation libre GNU (GFDL).
    La liste des définitions proposées en tête de page est une sélection parmi les résultats obtenus à l'aide de la commande "define:" de Google.
    Cette page fait partie du projet Wikibis.


CSS : vos premiers pas

Qu'est-ce que c'est ? Comment les utiliser ?

Les CSS (Cascading Style Sheets, c'est à dire "feuilles de styles en cascade") sont utilisés pour définir la présentation des pages Web.

Grâce à eux, votre code HTML ne vous servira désormais qu'à définir la structure de vos contenus. Les CSS vous permettront de créer vos styles et le design général de votre site Internet.

Les styles HTML

Si vous souhaitez modifier le type de caractère d'une portion de texte sans l'aide des CSS, vous devez utiliser la balise <font>, en écrivant par exemple <font face="Times">.

Pour définir la couleur de l'arrière plan et la bordure d'un tableau ainsi que le retrait (padding) de chacune de ses colonnes, vous utiliserez le code suivant :

<table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">

Cette approche présente cependant plusieurs inconvénients :

  1. Vous devez répéter la même définition de style à chaque fois que vous souhaitez l'utiliser dans votre page où dans les diverses pages de votre site Internet
  2. A chaque fois que vous souhaiterez modifier ce style, vous devrez reparcourir le contenu de toutes vos pages pour mettre à jour, une par une, les diverses définitions qu'elles contiennent
  3. Ces répétitions augmentent la taille de vos pages
  4. Vos styles sont figés, le contenu se présentent de la même façon pour tous les usages possibles : écran, imprimante, PDA, lecteurs vocaux,...

Comment créer un site avec les CSS

Les CSS représentent une nouvelle façon d'appliquer des styles aux éléments HTML.

Ils vous permettent de définir d'importe quelle propriété de style comme la bordure, la couleur de fond, le type de caractère, l'espace entre les lettres, etc. (nous reviendront plus tard sur la manière d'y parvenir).

Il y a trois façon de définir des styles CSS :

  1. Dans le corps du code HTML
  2. Dans l'en-tête de la page
  3. Dans une feuille de style totalement séparée du code HTML
1- Les CSS dans le corps du code HTML (simple, mais pas idéal)

Vous pouvez définir des styles CSS directement dans la définition d'une balise HTML. Dans l'exemple ci-dessous, nous utilisons une balise <div> qui permet de créer une "boîte" à l'intérieur d'un contenu :

Code :

<div style="background-color:orange; border:1px solid black; color:yellow; font-size:150%; padding:1em;"> Cette balise div a du style !</div>

Ce qui donne :

Cette balise div a du style !

Cette approche est très proche des styles définis en pur HTML. Elle présente les mêmes inconvénients.

Elle ne présente donc un intérêt que si vous êtes certain que le style défini ne sera utilisé qu'une seule et unique fois. S'il y a la moindre chance pour que vous ayez à nouveau besoin de ce style sur une page ou à plusieurs endroit d'une même page, il est grandement préférable utiliser l'une des deux autres méthodes proposées plus bas. Cela facilitera la maintenance et l'évolution de votre site.

2- Les CSS dans l'en-tête de la page

Plutôt que d'utiliser la méthode précédente, il est préférable de définir vos styles CSS une fois pour toute dans une section particulière de votre page Web (on utilise habituellement la section <head>).

Exemple :

<head>
<style type="text/css">
  div {
    background-color:#339;
    color:#fff;
    padding:15px;
    border-bottom:5px solid red;
    margin-bottom:15px;
      }
</style>
</head>

<body>
<div>
Cette phrase est présentée en fonction du style défini dans l'en-tête
</div>
<div>
Cette phrase aussi, et pourtant le style n'a été défini qu'une fois !
</div>
</body>

Ce qui donne :

Cette phrase est présentée en fonction du style défini dans l'en-tête
Cette phrase aussi, et pourtant le style n'a été défini qu'une fois !

Avec cette nouvelle façon de procéder, vous n'avez besoin de définir votre style qu'une seule fois. Dans notre exemple, le style défini s'appliquera automatiquement à toutes les balises <div> de la page.

Cette méthode, vous poermet d'appliquer le même style plusieurs fois dans la même page, mais pas à plusieurs pages d'un coup. Pour aller plus loin dans la standardisation de votre site, vous devrez utiliser la troisième méthode.

3- Les CSS dans une feuille de style totalement séparée du code HTML

La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages HTML. Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.

Cette méthode permet également de définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.). Nous reviendrons plus tard sur cet aspect.

Une page HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles. Nous examinerons ce point dans notre chapitre Héritages et cascades.

Voici un exemple de styles définis dans un document séparé :

Document "mes-styles.css"

body {
  background-color:#ccf;
  letter-spacing:.1em;
}
p {
  font-style:italic;
  font-family:times,serif;
}

Document "ma-page.html"

<head>
<link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
<p>Voici un exemple de paragraphe.</p>
<p>Et voici un deuxième paragraphe.</p>
</body>

Et voici le résultat :

Voici un exemple de paragraphe.

Et voici un deuxième paragraphe.

Comme dans la méthode précédente (CSS dans l'en-tête de la page), le style n'a été défini qu'une seule fois et peut être utilisé plusieurs fois. La différence entre cette méthode et la précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages. Il suffira d'ajouter la mention <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" /> dans ces pages pour que notre feuille de style s'y applique.

Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la feuille de styles à laquelle cette page fait référence. Cette feuille de style sera gardée en mémoire par le navigateur et n'aura pas besoin d'être rechargée lors de la lecture des pages suivantes. Le résultat est un gain de temps de chargement global et une économie de bande passante pour le serveur de votre site.

La méthode "<link href=..." permet également de mettre en place plusieurs feuilles de styles destinées aux différents media (imprimante, navigateurs de PDA, etc...).

Vous pouvez en effet souhaiter mettre en place une présentation particulière (sans les menus, par exemple) destinée à l'impression de vos documents. Voici une liste des valeurs les plus couramment utilisées pour link :

<link href="general.css" rel="stylesheet" type="text/css" media="all"> | Remplacez "general.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style commune à tous les media.
<link href="ecran.css" rel="stylesheet" type="text/css" media="screen, projection"> | Remplacez "ecran.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux écrans.
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld"> | Remplacez "mobile.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux PDA et téléphones mobiles.
<link href="impression.css" rel="stylesheet" type="text/css" media="print"> | Remplacez "impression.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux imprimantes.

Note : Le site blog-and-blues pourra vous apporter des détails sur ces sélecteur de media.

Pour clore ce chapitre, précisons enfin que la déclaration "<link href=..." n'est pas la seule façon de faire appel à une feuille de style séparée. On peut également utiliser la formulation suivante :

Cette définition de style est à placer dans la section <head> de votre page.

<style type="text/css">
  @import url(styles.css) all;
</style>

Vous devrez remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style. Vous pouvez également remplacer "all" par le type de media auquel se destine votre feuille de style.

Le résultat sera exactement le même que si vous aviez déclaré <link href="styles.css" media="all" rel="stylesheet" type="text/css" />, à deux nuances prés :

  • Internet Explorer (versions 6 ou inférieures) ne reconnaît pas le type de media avec "@import". La feuille de style ne sera ni importée ni appliquée si vous avez précisé un media. Utilisez la formulation suivante : <style type="text/css"> @import url(styles.css)</style> si vous voulez que votre déclaration soit reconnue par IE6.
  • La règle "@import" permet d'importer une feuille de styles à l'intérieur d'une autre feuille de style. La déclaration aura alors la forme simple suivante : @import url(styles.css). Vous devrez seulement remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style.

Note : à lire aussi "link ou @import ?" proposé par Alsacreations.

4- Avantages des feuilles de styles séparées

Il y a de multiples avantages à séparer les feuilles de styles du contenu. Citons en particulier :

  1. La réduction de la taille des pages : Les définitions de style de sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois
  2. La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation.
  3. Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site
  4. Scinder le travail de rédaction et le travail de présentation : Vous pouvez commencer à rédiger le contenu de vos pages sans vous soucier de leur présentation finale. Pensez simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes, classes et ID,...). Vous pourrez travailler votre mise en page et votre design plus tard.

Comment les CSS s'appliquent aux éléments HTML

Quelques règles suffisent pour pouvoir séparer le contenu et sa présentation. L'essentiel est de comprendre comment établir le lien entre un style et la phrase à laquelle s'applique le style. Ce mécanisme est heureusement assez simple :

1- Comment appliquer un style aux balises HTML standards

Avec les CSS, vous pouvez changer la présentation de toutes les balises HTML standards. Il vous suffit de spécifier le nom de la balise et de faire figurer vos définitions comme suit :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

p {
  font-weight:bold;
  line-height:1.3em;
}

<p>Ce style va s'appliquer à moi car je suis un paragraphe.</p>

<div>Mais il n'appliquera pas à moi.</div>

Le code ci-dessus aura pour effet de mettre en gras et d'augmenter la hauteur de ligne de tous les paragraphes

La syntaxe générale de définition est la suivante :

  1. Préciser le nom de la balise en premier
  2. Encadrer les définitions par des accolades{ }
  3. Placer un point virgule ; derrière chaque définition
2- Comment utiliser des classes pour appliquer un style

Vous pouvez attribuer à chaque élément HTML une ou plusieurs classes. C'est vous qui définirez le nom de ces classes et qui déciderez de leurs styles.

Les styles définis dans les classes remplaceront les styles "normaux" des éléments auxquels ils s'appliquent.

Pour créer une classe, vous devez simplement faire figurer son nom précédé d'un point. Pour éviter toute ambiguïté, votre nom de classe ne doit pas comporter d'espace.

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style {
  color:red;
}

Pour appliquer le style défini dans votre classe à un élément, ajouter la mention class="nom-du style" dans la définition de la balise :

<p class="mon-style">Le style s'applique à ce paragraphe </p>

<p>Mais pas à celui-là</p>

Cette façon de procéder est très pratique car elle permet d'appliquer les réglages de votre classes et de nombreux éléments, même s'ils ne sont pas du même type :

<p class="mon-style">Le style peut s'appliquer à ce paragraphe </p>

<div class="mon-style">Et aussi à cette balise ! </div>

3- Les éléments HTML peuvent avoir plusieurs classes

Chaque élément HTML peut avoir aucune, une ou plusieurs classes. Pour appliquer plusieurs classes au même élément, précisez simplement la liste de classes en séparant leurs noms par un espace :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style1 {
  color:yellow;
}
.mon-style2 {
  background-color:#A0A0A0;
  font-weight:bold;
}

<p class="mon-style1 mon-style2">Les styles des deux classes s'appliquent à ce paragraphe</p>

<p class="mon-style2">Alors que ce paragraphe n'a qu'une seule classe </p>

4- Comment utiliser des "ID" pour appliquer un style

Les éléments HTML peuvent se voir attribuer un "ID" (identification) en plus ou à la place d'une classe.

Le principe de l'ID est très similaire à celui de la classe à une exception prés :

  • Plusieurs éléments peuvent avoir la même classe.
  • Il ne doit y avoir qu'un seul élément ayant un ID donné.

Vous pourriez parfaitement vous contenter d'utiliser les classes pour tous vos styles et oublier complètement l'existence des ID. Leur utilisation permet simplement de clarifier les choses et de mieux structurer vos pages :

  • On utilise les classes pour définir l'aspect des mots, phrases et paragraphes.
  • On utilise les ID pour placer des blocs dans la page (sachant qu'on a généralement jamais deux blocs placés exactement au même endroit).

Pour créer un ID, vous devez simplement faire figurer son nom précédé d'un dièse #. Pour éviter toute ambiguïté, votre nom d'ID ne doit pas comporter d'espace.

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

#mon-style {
  color:red;
}

Pour appliquer le style défini dans votre ID à un élément, ajouter la mention ID="nom-du style" dans la définition de la balise :

<p ID="mon-style">Le style s'applique à ce paragraphe </p>

<p>Mais pas à celui-là</p>

Priorité des styles, les uns par rapports aux autres

1- Styles par défaut, styles standards, classes et ID

Par défaut, chaque type de balise à une présentation particulière dans chaque navigateur. Si vous n'avez défini aucun style particulier pour la balise <p>, il est possible que le texte contenu dans ces balises ne se présente pas exactement de la même façon dans Internet Explorer et dans FireFox, par exemple.

Lorsque vous définissez vous-même le style d'une balise standard avec une définition telle que p {blablabla}, vous obligez tous les navigateurs à afficher votre texte de la même façon (la votre !).

Si vous attribuez une classe à un paragraphe, les styles que vous aurez définis dans cette classe remplaceront également les styles standards du paragraphe et seront même prioritaires par rapports aux styles que vous aurez définis sous la forme p {blablabla}.

Si vous attribuez un ID à un paragraphe, les styles définis dans l'ID seront prioritaires par rapport à tous les autres styles pouvant s'appliquer à ce paragraphe.

Si vous définissez deux fois le même style dans 2 classes différentes et que les 2 classes s'appliquent à la même balise, c'est la dernière classe citées dans la déclaration class="classe1 classe2" qui sera prioritaire.

Si vous définissez 2 fois le même style pour la même balise standard, la même classe ou le même ID, c'est la dernière définition qui sera prioritaire.

En résumé, voici l'ordre des priorités (ceci est valable pour toutes les balises HTML) :

  1. Style standard défini par le navigateur
  2. Style standard redéfini en CSS (la dernière définition est prioritaire)
  3. Style de classe CSS (la dernière définition est prioritaire)
  4. Style d'ID (la dernière définition est prioritaire)

Exemple 1 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style1 {
  color:brown;
  font-weight:bold;
}
.mon-style2 {
  color:green;
}

Résultat : <p class="mon-style1 mon-style2">Ce paragraphe s'affiche en vert parce que le style "mon-style2" est le dernier à s'appliquer</p>

Exemple 2 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

p {
  color:brown;
}
.mon-style {
  color:green;
  font-weight:bold;
}

Résultat : <p class="mon-style">Ce paragraphe s'affiche en vert parce que la classe est prioritaire par rapport au style standard de la balise</p>

Exemple 3 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style {
  color:brown;
  font-weight:bold;
}
.mon-style {
  color:green;
}

Résultat : <p class="mon-style">Ce paragraphe s'affiche en vert parce que c'est la dernière (re)définition de style qui est prioritaire </p>

Exemple 4 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

#mon-style1{
  color:green;
}
.mon-style2 {
  color:brown;
  font-weight:bold;
}

Résultat : <p id="mon-style1" class="mon-style2">Ce paragraphe s'affiche en vert parce que l'ID est prioritaire sur la classe </p>

6- Emboîtement de balises

Dans un cas d'emboîtement de balises tel que celui-ci :

<body>
  <div>
    <p>

      bla bla bla

    </p>
  </div>
</body>

Les différents styles attribués aux balises <body>, <div> et <p> vont se combiner pour définir quel sont les styles définitifs qui seront appliqués au texte "bla bla bla".

Si le même style est défini, puis redéfini dans ces différentes balises (la couleur du texte, par exemple), c'est la dernière définition qui l'emportera sur les autres.

Si un style particulier n'est défini que dans <body> il doit logiquement s'appliquer à l'ensemble du contenu de <body>.

En vérité, certains styles (tels que le couleur, par exemple) se transmettent automatiquement aux balises emboîtées, tandis que d'autres (tels que les marges, par exemple) ne se transmettent pas. Lorsqu'ils se transmettent, on dira que le contenu des balises <div> et <p> aura "hérité" des propriétés de <body>.

Ce phénomène est décrit en détail dans la page Héritages et cascades.

Le copyright de cette page appartient à css-faciles.

 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


tutorial menu deroulant en css sans javascript

logo tuto fr
Proposez vous aussi vos tutos
et publiez les sur le site !
  • Tuto
  • Tous les tutos
    • Télephoner gratuitement
      • Voipdiscount
      • Lycos globe7 phone
    • Aircrack, Crack wep
    • Menu deroulant en CSS
    • Daemon tool
    • Float's mobile agent
    • Pdf pass recovery
    • Erreur 404 perso
    • Tout les tutos
  • A venir
    • Tutoriaux
    • Autre
  • Vidéos
  • Forum
  • A propos
Partie 1 (partie 2)

Tutorial menu d roulant en css

compatible tout navigateurs et sans javascript

logo css Vous commencer un site web, il va bien vous falloir un menu :D
Pourquoi ne pas en faire un déroulant, animé, en CSS et pourquoi pas sans javascript ... et compatible tout navigateurs (firefox, intenet explorer, safari.. )

Je vais donc vous guider pour faire votre menu deroulant en css (vertical ou horizontal) sans utiliser js.

Tout le Wifi chez Wifi-Highpower: cartes, antennes, routeurs, Alfa Network, Awus036H...

Sommaire:

  • 1:// Ebauche en html
  • 2:// Préparation pour le CSS
  • 3:// Mise en page CSS
  • 4:// Finition embellissement

  • Partie 2:
    • 1:// Menu horizontal
    • 2:// Ajustements du menu
    • 3:// Gérons differentes tailles de sous-menu
    • Liens

1://Une ébauche de menu simpliste sans fioritures.

On construis donc notre menu en html avec les balises ul et li habituelles.
On commence par ouvrir la balise ul
On place nos balises li
Et pour faire des sous menu on place une balise <li>, on rajoute une balise <ul> suivis de " <li> sous menu </li>" puis on ferme la sous liste avec </ul> et enfin on ferme le li </li>
Et faites de meme en cas de sous sous menu. Et même pour les sous sous sous menu :D

<div id="menu">
<ul>
<li><a href="menu 1">menu 1</a></li>
<li><a href="menu 2">menu 2</a>
<ul>
<li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
<li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="menu 3">menu 3</a></li>
<li><a href="menu 4">menu 4</a>
<ul>
<li><a href="Sous menu 4.1">Sous menu 4.1</a>
<ul>
<li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
<li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
<li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="menu 5">menu 5</a></li>
</ul>
</div>

Ce qui nous donne ceci:

  • menu 1
  • menu 2
    • Sous menu 2.1
    • Sous menu 2.2
  • menu 3
  • menu 4
    • Sous menu 4.1
      • Sous sous menu 4.1.1
      • Sous sous menu 4.1.2
      • Sous sous menu 4.1.3
    • Sous menu 4.2
  • menu 5

2:// Préparation pour le style CSS

Tout le Wifi chez Wifi-Highpower: cartes, antennes, routeurs, Alfa Network, Awus036H...

On apllique des classe aux element de meme "hauteur" dans la liste (menu, sousmenu) pour appliquer des propriétés groupées avec css :D
Cela va nous aider à ne pas retapé 30 fois les meme choses et à rendre notre menu deroulant en css évolutif

On classe donc les listes suivant different niveaux; niveau1, 2 et 3 qui represente la profondeur horizontale de la liste.
Ensuite applique une class aux balise li qui vont etre racines de sous menu elles aussi.

<div id="menu">
<ul class="niveau1">
<li><a href="menu 1">menu 1</a></li>
<li class="sousmenu"><a href="menu 2">menu 2</a>
<ul class="niveau2">
<li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
<li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="menu 3">menu 3</a></li>
<li class="sousmenu"><a href="menu 4">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
<li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
<li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="menu 5">menu 5</a></li>
</ul>
</div>

Rien ne change donc pour la presentation.

  • menu 1
  • menu 2
    • Sous menu 2.1
    • Sous menu 2.2
  • menu 3
  • menu 4
    • Sous menu 4.1
      • Sous sous menu 4.1.1
      • Sous sous menu 4.1.2
      • Sous sous menu 4.1.3
    • Sous menu 4.2
  • menu

3:// Mise en page avec CSS

Finis la rigolade mise en page sommaire, on prépare le terrain:

/*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#menu {
width: 100px;
}

div#menu ul {
padding: 0;
width: 100px;
border:1px solid;
margin:0px;
}

/*On positionne les elements du menu */
div#menu ul li {
position:relative;
list-style: none; /*on enleve les icones de liste */
border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
}

div#menu ul ul {
position: absolute;
top: 0;
left: 100px; /*100px correspond au d calage a droite, on d cale de la taille du ul de base*/
}

div#menu li a {
text-decoration: none; /* plus de soulignement pour les liens */
}

Ce qui nous donne une première mise en page du menu

On va maintenant se servir des classes que l'on a créé précedemment:
On applique un fond different pour les "li sousmenu" juste pour les reconnaitre et comprendre un peu, cette étape ne sert fondamentalement à rien pour la finalité.

/*fond jaune pr les sous-menu*/
div#menu li.sousmenu {
background: yellow;
}

Voir le resultat

On insere ensuite dans le css un petit fichier qui va servir a internet explorer pour les propriétées hover (car il ne supporte pas les propriétées css2 on utilise donc les behavior )
Grace à ce petit fichier, on va pouvoir cacher ou montrer certaines parties du menu en fonction du survol de ceux ci par la souris. (hover). Il ne sera utilisé que par ie, les autres navigateurs n'auront pas besoin de js et avec la venu de ie7 il deviendra bientot inutile.

On insere donc ce fichier dans le CSSt. Il suffit de le copier ensuite dans le meme repertoire que la page.

/* fichier pour internet explorer */
body {
}

/* On cache tous les sous menu avec la propri t display none */
div#menu ul ul {
position: absolute;
top: 0;
left: 100px;
display:none
}

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
display:block;
}

Si vous l'executer en local, il se peut que vous ayez une alerte de sécurité mais celle ci ne se produira pas une fois en ligne car le fichier csshover.htc ne sera pas local ;)

4:// On va rendre tout ca un peu plus joli (au moin on va essayer :D )

Fond blanc pour le menu, fond different au survol, rajout d'une fleche, reglage des bordures ...

Tout le Wifi chez Wifi-Highpower: cartes, antennes, routeurs, Alfa Network, Awus036H...
/* fond blanc pour le menu */
div#menu a {
color:#000000
}

/* fond different au survol de la souris entre les sous-menu et les "basiques"*/
div#menu li:hover {
background: #EDD
}

div#menu li.sousmenu:hover {
background: #EBB;
}

/* Rajout d'une petite fleche pour les sous menu (j'ai pioch cette astuce sur le web ;) )*/
div#menu li.sousmenu {
background: url(fleche.gif) 95% 50% no-repeat;
}

/* on rajoute une bordure a gauche et des padding, on doit donc r ajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {
text-decoration: none;
padding: 4px 0 4px 8px;
display:block; border-left:
8px solid #BBB; width:84px
}

/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {
border-left-color: red;
}
div#menu ul ul li a:hover {
border-left-color: #00FF00;
}
div#menu ul ul ul li a:hover {
border-left-color: #0000FF;
}

Et voila deja un petit r sultat. telecharger le css

© Copyright 2005-2006 Tuto-fr.com par Billyboylindien
Déclaré à la cnil: Dossier nÝ 1142196
Rc v2.0


Pompage.net - La vengeance des menus déroulants

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

La vengeance des menus déroulants

Par Patrick Griffiths et Dan Webb

Notre premier article sur les menus déroulants «Suckerfish dropdowns», publié sur A List Apart, a montré avec un certain succès qu'on pouvait mettre en œuvre des menus déroulants sur une base de CSS : ils se sont révélés légers, accessibles, et fonctionnaient dans Internet Explorer grâce à leur imitation de la pseudo-classe :hover.

Vous les avez aimés, les revoilà : ils sont plus accessibles, encore plus légers (seulement 12 lignes de Javascript), bénéficient d'une compatibilité accrue (ils fonctionnent sous Opera et Safari sans devoir utiliser le moindre hack) et peuvent avoir plusieurs niveaux de profondeur.

Menus déroulants à un niveau

Bon, on ne va pas tergiverser. Le HTML auquel on a affaire va ressembler à ceci :

<ul id="nav">
<li><a href="/traduction/deroulants#">Squaliformes</a>
    <ul>
        <li><a href="/traduction/deroulants#">Echinorhinidés</a></li>
        <li><a href="/traduction/deroulants#">Oxynotidés</a></li>
        <li><a href="/traduction/deroulants#">Squalidés</a></li>
    </ul>
</li>

<li><a href="/traduction/deroulants#">Orectolobiformes</a>
    <ul>
        <li><a href="/traduction/deroulants#">Parascylliidés</a></li>
        <li><a href="/traduction/deroulants#">Brachaeluridés</a></li>
        <li><a href="/traduction/deroulants#">Orectolobidés</a></li>
        <li><a href="/traduction/deroulants#">Stégostomatidés</a></li>
        <li><a href="/traduction/deroulants#">Hémiscylliidés</a></li>
    </ul>
</li>

<!-- etc. -->

</ul>

Voilà : une bonne vieille liste non numérotée, bien structurée.

Pour démarrer, nous avons besoin d'un style de base :

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}

Remarquez qu'il vaut mieux indiquer une largeur (width) dans le sélecteur #nav li, sinon Opera va péter un câble. Rappelez-vous aussi que dès qu'on fait flotter des éléments, le contenu situé en-dessous du menu déroulant doit être dégagé (avec clear: left).

Bien sûr, il faut cacher les listes que l'on veut voir se dérouler, mais pour avoir une meilleure accessibilité on évitera d'utiliser display: none, qui dissimule des éléments à certains lecteurs d'écran (comme on peut fréquemment le constater dans les articles portant sur les remplacements d'images). Vous pensez peut-être qu'il y a mille façons de régler ce problème, mais après avoir expérimenté de façon exhaustive tout ce qui est width, height, margin, top ou clip à travers un grand nombre de navigateurs, la meilleure solution (pour ce qui est des listes à plusieurs niveaux, en tous cas) réside dans une manipulation de la propriété left.

Les spécifications CSS affirment que pour une boîte positionnée de façon absolue, les valeurs top, right, bottom et left doivent créer un décalage par rapport au bloc qui la contient. Malheureusement, Opera décide de décaler les boîtes positionnées en absolu par rapport à la page, ce qui explique pourquoi les premiers "Suckerfish Dropdowns" ne fonctionnaient pas sous Opera : ils s'appuyaient sur les propriétés top et left avec des longueurs explicites.

Donc, à la place de display: none, on utilise left: -999em pour expédier la liste déroulante hors de notre champ de vision, et ensuite left: auto (plutôt que left: 0) pour la ramener en position :

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

#nav li:hover ul {
    left: auto;
}

Le problème est entièrement réglé pour tous les navigateurs qui supportent la pseudo-classe :hover, mais pour Internet Explorer il va falloir balancer le Javascript "Suckerfish" :

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

En gros, ce code va appliquer la classe "sfhover" aux items ("li") de la liste ("ul") nommée ("id") "nav", lorsque ces items sont survolés par la souris. Cette classe est ensuite retirée en utilisant une expression régulière lorsque la souris quitte la zone.

Donc, maintenant que les Suckerfish sont bourrés de nouvelles classes, l'étape suivante consiste simplement à répéter le sélecteur :hover avec les sélecteurs de classe "sfhover" :

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}

Et voilà. Vous avez un beau menu déroulant à un niveau.

Menus déroulants à plusieurs niveaux

L'article d'origine sur les "Suckerfish Dropdowns" ne s'intéressait qu'aux menus déroulants à un niveau, mais en étendant un peu la logique de cascade, il s'avère tout à fait possible de créer également des menus déroulants à plusieurs niveaux en CSS. Et, contrairement au code Javascript "Suckerfish" d'origine, la fonction "sfhover" applique le comportement à tous les items ("li") descendant de "nav", pas seulement aux enfants directs : donc, les menus déroulants à plusieurs niveaux sont désormais tout à fait utilisables, même avec Internet Explorer.

Pour commencer, disons que nous avons affaire à une structure de liste avec davantage de niveaux, comme celle-ci :

<ul id="nav">

<li><a href="/traduction/deroulants#">Squaliformes</a>
    <ul>
        <li><a href="/traduction/deroulants#">Echinorhinidés</a>

            <ul>
            <li><a href="/traduction/deroulants#">Echinorhinus brucus</a></li>
            <li><a href="/traduction/deroulants#">Echinorhinus cookei</a></li>

            </ul>
        </li>
        <li><a href="/traduction/deroulants#">Oxynotidés</a>
            <ul>
            <li><a href="/traduction/deroulants#">Oxynotus paradoxus</a></li>
            <li><a href="/traduction/deroulants#">Oxynotus bruniensis</a></li>
            <li><a href="/traduction/deroulants#">Oxynotus caribbaeus</a></li>
            <li><a href="/traduction/deroulants#">Oxynotus centrina</a></li>
            <li><a href="/traduction/deroulants#">Oxynotus japonicus</a></li>

            </ul>
        </li>
        <li>
        <!-- etc. -->
        </li>

    </ul>
</li>

<li><a href="/traduction/deroulants#">Orectolobiformes</a>
    <!-- etc. -->
</li>

</ul>

Nous allons devoir rajouter quelques petites choses à la méthode originale. Tout d'abord, la liste de troisième niveau (dans notre exemple "Echinorhinus brucus", "Echinorhinus cookei", etc) doit se dérouler sur le côté de l'item de liste qui lui correspond (en l'occurence "Echinorhinidés"), il faut donc rajouter cette règle qui s'appliquera à tous les menus déroulants après le premier :

#nav li ul ul {
    margin: -1em 0 0 10em;
}

Comme on ne peut pas préciser explicitement le point de départ supérieur de nos boîtes en position absolue, elles se situeront sous la ligne de l'item de liste survolé, ce qui explique pourquoi le niveau de listes suivant doit être placé à -1em. Mais cela ne suffira pas à élever suffisamment les menus pour qu'ils arrivent au niveau de l'item de liste correspondant, parce que les hauteurs de ligne par défaut sont supérieures à 1em (souvent 1.2em), on doit donc rajouter un petit quelque chose à la règle initiale de l'élément ul :

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}

À cause de l'effet de cascade qui veut que l'affichage de la liste de deuxième niveau révèle également celle du troisième niveau, il faut aussi cacher explicitement cette liste de troisième niveau (souvenez-vous que nous devons répéter la pseudo-classe :hover avec la classe .sfhover) :

#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
}

Bien sûr, on peut passer outre cette règle de façon à afficher lorsque l'item de liste correspondant sera survolé, en étendant le principe d'affichage du menu déroulant (qui donnait ceci, avec le menu à un seul niveau : #nav li:hover ul, #nav li.sfhover ul { left: auto; }) :

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
    left: auto;
}

Et avec ça nous obtenons un solide menu déroulant à deux niveaux.

En suivant la même logique, vous pouvez fabriquer autant de niveaux de menus que vous le voulez :

Pour les menus déroulants à trois niveaux :

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav

li li li.sfhover ul {
    left: auto;
}

Et pour quatre niveaux, même si c'est peu probable...

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover

ul ul ul, #nav li.sfhover ul ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul,

#nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
    left: auto;
}

Exemples

À ce stade, vous avez peut-être déjà regardé les exemples très dépouillés à un, à deux, et à trois niveaux, ce qui est sans doute l'idéal pour observer le code source de la manière la plus claire et basique possible; mais bien entendu vous pouvez rendre tout ceci plus agréable à l'œil. Vous pouvez même en faire un menu vertical au lieu d'un horizontal.

Fiche technique

  • Article original : Son of Suckerfish Dropdowns
  • Auteur : Patrick Griffiths et Dan Webb
  • Date de parution : 18 mai 2004
  • Traduction : Frédéric Chotard
  • Date de traduction : février 2005
  • Thème : CSS
  • Niveau : Intermédiaire

À propos de l'auteur

Patrick Griffiths est un artisan du web basé à Londres qui possède un penchant pour la musique soul, l’évolution, et les promenades de son site de compagnie, HTML Dog. Selon son humeur, il peut préférer le surnom PTG.

Humble développeur web le jour, Dan Webb se transforme la nuit venue en invincible DJ. On ne sait pas ce qui lui demande le plus de pouvoirs, la mise en place de sites aux standards pour différentes instances gouvernementales britanniques, ou la mise à feu des boîtes de nuit londoniennes.

Articles du même auteur

  • Déclarations XHTML
  • Du stretching pour vos sites

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Intermédiaire

  • Tests de contenu
  • La grille infinie
  • Mettre en place l’expérience utilisateur : une étude de cas
  • La cryptographie et le Web : hachage, salage et autres recettes
  • Comment vous assurer que vos emails HTML s’affichent correctement et arrivent à bon port ?
  • Javascript non-intrusif, chapitre 4 : l’appel des scripts de la forêt
  • Javascript non-intrusif, chapitre 2 : comment retrouver les éléments que l’on veut manipuler
  • Javascript non-intrusif, chapitre 1 : le grand nettoyage !
  • Définir des tailles de police dynamiques cohérentes avec CSS
  • Contraste et sens

CSS

  • Principes à connaître pour améliorer vos feuilles de styles
  • Quelles mesures CSS, pour quel usage ?
  • Formulaires : une méthode de validation qui a de l’avenir
  • Pour des sélecteurs CSS raccourcis
  • La grille infinie
  • La propriété border-image en CSS3
  • Dimensionner ses fontes avec rem
  • Introduction au positionnement CSS
  • Formulaires HTML5 : prenez la clé des champs
  • Font-weight est toujours cassé pour l’ensemble des navigateurs sauf un

© 2001-2018 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site


!important

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

!important

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Augmente l'importance d'une valeur de propriété dans l'ordre de cascade. Ce mot-clé est une déclaration pouvant être associée à n'importe quelle valeur de propriété. La syntaxe exige un point d'exclamation entre la valeur de la propriété et le mot-clé important. Le point d'exclamation peut être précédé et suivi d'espaces blancs supplémentaires.

Internet Explorer 5 et 6 ne prennent pas en compte cette propriété et cette particularité est souvent utilisée pour définir des règles CSS qui seront interprétées différemment par IE6 et les autres navigateurs.

Voir à ce sujet :

  • !important est ignoré par IE6
  • Le Hack !Important

Syntaxe CSS
!important
Valeur(s) possible(s) pour cette déclaration :

Aucune. Cette déclaration doit normalement suivre une propriété.

Exemple
p {font-size: 14pt ! important}
S'applique à
Toutes les propriétés.
Javascript
[window.]document .getElementById("elementID") .style .getPropertyPriority("styleAttribute")
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


azimuth

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

azimuth

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Si une personne se trouve au centre d'un espace sonore circulaire (tel qu'une salle équipée d'un système Surround Sound), la propriété azimuth définit l'angle horizontal de la source du son (dans un navigateur à synthèse vocale, par exemple). Voir aussi la propriété elevation.
Syntaxe CSS
azimuth: angle | Constante || direction
Valeur(s) possible(s) pour cette propriété :

dessin azimuth Jusqu'à deux valeurs (autres que inherit). L'une représente l'angle, dans le sens des aiguilles d'une montre, en partant du point se trouvant exactement en face; la seconde représente un mouvement incrémentiel de 20 degrés vers la gauche ou vers la droite. La valeur d'angle peut être n'importe quelle valeur comprise entre -360 et +360 (inclus), suivie des lettres « deg » (90deg, par exemple). La valeur 0deg représente le point situé directement en face de l'auditeur. Pour définir l'angle vers la gauche de l'auditeur, vous pouvez utiliser la valeur -90deg ou 270deg. Vous pouvez également choisir une valeur Constante_d'angle dans une vaste bibliothèque de descriptions correspondant à des points fixes autour du cercle. Si vous ajoutez le modificateur behind, les valeurs ne désignent plus les points situés en face de l'auditeur, mais derrière lui.

Pour la valeur de direction, vous avez le choix entre deux constantes: leftwards | rightwards. Ces valeurs déplacent le son de 20 degrés dans la direction indiquée.

Valeur | Equivaut à | Valeur | Equivaut à
center | 0deg | center behind | 180deg
center-right | 20deg | center-right behind | 160deg
right | 40deg | right behind | 140deg
far-right | 60deg | far-right behind | 120deg
right-side | 90deg | right-side behind | 90deg
left-side | 270deg | left-side behind | 270deg
far-left | 300deg | far-left behind | 240deg
left | 320deg | left behind | 220deg
center-left | 340deg | center-left behind | 200deg
Valeur initiale

center

Exemple
h1 {azimuth: 45deg}
p.aside {azimuth: center-right behind}
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


background

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

background

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Forme courte de propriété permettant de définir, à l'aide d'une seule instruction, cinq propriétés de style d'arrière-plan distincts (mais apparentés).

Les valeurs de cette propriété peuvent être spécifiées dans n'importe quel ordre et doivent être séparées par des espaces.

Syntaxe CSS
 background: background-attachment
|| background-color
|| background-image
||
background-position
|| background-repeat
Valeur(s) possible(s) pour cette propriété :

Toute combinaison des cinq valeurs de propriété de style possibles, dans n'importe quel ordre. Toute propriété qui n'est pas explicitement définie conserve sa valeur initiale. Pour plus de détails sur les valeurs possibles de chaque propriété, cliquez sur les liens proposés ci-dessus.

Valeur initiale

Aucun.

Exemple
body {background: url(watermark.jpg) repeat fixed}
S'applique à

Tous les éléments.

Javascript

[window.]document .getElementById("elementID") .style.background

Autres propriétés appartenant à la même famille :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Remarques générales :

Il est intéressant de définir une couleur de fond même dans le cas ou l'on définit également une image de fond. Voici pourquoi :

  • L'image de fond peut ne pas se charger sur certains navigateurs
  • L'image de fond peut mettre du temps à se charger en cas de mauvaise connection. Dans l'intervalle, l'internaute ne verra que la couleur de fond.
  • L'image de fond peut ne pas couvrir la totalité du bloc auquel elle est attachée. Les parties non couvertes auront la couleur de fond.

Dans le cas où le bloc auquel vous attribuez image et couleur comporte du texte, vous devez veiller scrupuleusement à maintenir un contraste suffisant entre la couleur du texte et celle du fond afin de ne pas nuire à la lisibilité du texte.

Au moment où vous créez votre site, et surtout si vous lui appliquez une image de fond de page, prenez garde à ne pas attribuer d'images trop "lourdes" (taille trop importante en termes de volume de données) afin de ne pas trop ralentir le chargement de vos pages.

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


background-attachment

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

background-attachment

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

La propriété background-attachment permet, lorsque vous appliquez une image d'arrière-plan à un élément (à l'aide de la propriété background-image), de définir si l'image défile par rapport au document. L'image peut soit rester fixe dans la zone visible de l'élément, soit bouger avec l'élément lorsque vous faites défiler le contenu. Lorsque l'image d'arrière-plan est fixe, le contenu défile sur cette image comme un générique de film défile sur un écran de cinéma ou de télévision.

Syntaxe CSS
background-attachment: fixed | scroll
Valeur(s) possible(s) pour cette propriété :

Si vous spécifiez la valeur fixed, l'image restera fixe dans la zone visible de l'élément; si vous spécifiez la valeur scroll, l'image défilera en même temps que le contenu du document.

Valeur initiale

scroll

Exemple
body {background-attachment: fixed}
S'applique à

Tous les éléments.

Javascript

[window.]document .getElementById("elementID") .style.backgroundAttachment

Autres propriétés appartenant à la même famille :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


background-color

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

background-color

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la couleur d'arrière-plan de l'élément. La propriété background-color d'un élément imbriqué peut sembler avoir été héritée de son parent; en réalité la valeur initiale est "transparent", c'est-à -dire que la couleur de l'élément parent immédiat est visible à travers l'espace libre de l'élément enfant.

Syntaxe CSS
background-color: couleur
Valeur(s) possible(s) pour cette propriété :

Toute spécification de couleur valide ou transparent.

Pour plus de détails sur les valeurs possibles pour cette propriété, consultez notre page consacrée à la couleur.

Valeur initiale

transparent

Exemple
.highlighter {background-color: yellow}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .backgroundColor
Autres propriétés appartenant à la famille "background" :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Remarques

Il est intéressant de définir une couleur de fond même dans le cas ou l'on définit également une image de fond. Voici pourquoi :

  • L'image de fond peut ne pas se charger sur certains navigateurs
  • L'image de fond peut mettre du temps à se charger en cas de mauvaise connection. Dans l'intervalle, l'internaute ne verra que la couleur de fond.
  • L'image de fond peut ne pas couvrir la totalité du bloc auquel elle est attachée. Les parties non couvertes auront la couleur de fond.

Dans le cas où le bloc auquel vous attribuez image et couleur comporte du texte, vous devez veiller scrupuleusement à maintenir un contraste suffisant entre la couleur du texte et celle du fond afin de ne pas nuire à la lisibilité du texte.

Prenez garde à ne pas attribuer d'images trop "lourdes" (taille trop importante en termes de volume de données) afin de ne pas trop ralentir le chargement de vos pages.

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


background-image

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

background-image

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit l'image d'arrière-plan à associer (le cas échéant) à l'élément. Si vous définissez également une couleur d'arrière-plan (background-color) pour l'élément, celle-ci s'affiche en cas d'échec de chargement de l'image; sinon, l'image se superpose à la couleur. Dans ce cas, la couleur est visible à travers les pixels transparents de l'image. Voir aussi la propriété background-attachment.

Syntaxe CSS
background-image: url | none | initial | inherit
Valeur(s) possible(s) pour cette propriété :

Pour spécifier une adresse URL (Universal Resource Locator), utilisez l'instruction url( ), en indiquant la valeur de la propriété entre les parenthèses.
Pour empêcher le chargement d'une image dans l'arrière-plan de l'élément, vous pouvez omettre la propriété ou spécifier la valeur none.
Pour mettre cette propriété à sa valeur initiale, utilisez la veuleur initial.
Pour que l'image de font prenne la valeur de l'element parent, utilisez inherit.

Valeur initiale

none

Exemple
h1 {background-image: url(watermark.jpg)}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .backgroundImage
Autres propriétés appartenant à la même famille :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Remarques

Il est intéressant de définir une couleur de fond même dans le cas ou l'on définit également une image de fond. Voici pourquoi :

  • L'image de fond peut ne pas se charger sur certains navigateurs
  • L'image de fond peut mettre du temps à se charger en cas de mauvaise connection. Dans l'intervalle, l'internaute ne verra que la couleur de fond.
  • L'image de fond peut ne pas couvrir la totalité du bloc auquel elle est attachée. Les parties non couvertes auront la couleur de fond.

Dans le cas où le bloc auquel vous attribuez image et couleur comporte du texte, vous devez veiller scrupuleusement à maintenir un contraste suffisant entre la couleur du texte et celle du fond afin de ne pas nuire à la lisibilité du texte.

Prenez garde à ne pas attribuer d'images trop "lourdes" (taille trop importante en termes de volume de données) afin de ne pas trop ralentir le chargement de vos pages.

Astuce pour le "rollover" des boutons :

Sur la page "Fast rollover without preload" du site wellestyled, vous trouverez une merveilleuse astuce pour gérer les trois états possibles d'un bouton en lui attribuant une seule image de fond. Cette image doit simplement comporter les trois apparences du bouton et se voit plus ou moins décalée pour les afficher une à une. Voici un exemple d'image :

3 images en une seule

et le code correspondant :

CSS

#monbouton a
{display:block;width:120px;
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#c60;
background: url("../illustrations/3states-button.gif") 0 0 no-repeat;}
#monbouton a:hover {background-position: -157px 0;color:
#E9BE75;}
#monbouton a:active {background-position: -314px 0; color:#FFFFFF;}
}

HTML

<span id="monbouton"><a href="#monlien">Bouton exemple</a></span>

Et voici le résultat. Placez votre souris dessus et cliquez pour voir son fonctionnement :

Bouton exemple

Un bouton géré de cette façon sera plus réactif qu'un bouton utilisant 3 images distinctes. Cette astuce est compatible avec tous les navigateurs.

Vous pouvez créer un site en utilisant cette technique pour tous les boutons, y compris les menus de votre site.

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


background-position

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

background-position

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit l'emplacement du bord gauche et du bord supérieur de l'image d'arrière-plan spécifiée à l'aide de la propriété background-image. Cette propriété se comporte de façon irrégulière dans Internet Explorer 4 pour Macintosh.

Syntaxe CSS
background-position: [pourcentage | longueur] {1,2} |
[top | center | bottom] || [left | center | right]
Valeur(s) possible(s) pour cette propriété :

Vous pouvez spécifier un ou deux pourcentages, chacun représentant le pourcentage de la largeur et de la hauteur (respectivement) du cadre de l'élément de bloc au niveau duquel l'image (ou les images répétées) doivent commencer.

Si vous n'indiquez qu'un seul pourcentage, celui-ci s'applique à la mesure horizontale et la mesure verticale est automatiquement fixée à 50 %.

Au lieu d'un pourcentage, vous pouvez spécifier une longueur (exprimée dans l'unité de mesure la mieux adaptée au support). Vous pouvez aussi combiner un pourcentage et une longueur.

Au lieu des valeurs numériques, vous pouvez créer des combinaisons de valeurs prises dans les deux jeux de valeurs constantes. Sélectionnez-en une dans chaque jeu, par exemple top left, top right ou bottom center. Lorsque vous spécifiez deux valeurs, vous devez les séparer par un espace.

Valeur initiale

0% 0%

Exemple
div.marked {background-image: url(mon_image.jpg);
background-position: center top}
S'applique à

Eléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT).

Javascript

[window.]document .getElementById("elementID") .style .backgroundPosition

Autres propriétés appartenant à la même famille :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


background-position-x, background-position-y

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

background-position-x,
background-position-y

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la position du bord gauche (x) ou supérieur (y) de l'image d'arrière-plan spécifiée au moyen de la propriété background-image.

Syntaxe CSS
background-position-x: [pourcentage | longueur] | [left | center | right ]
background-position-y: [pourcentage | longueur] | [top | center | bottom]
Valeur(s) possible(s) pour ces propriétés :

Vous pouvez spécifier un ou deux pourcentages, chacun représentant le pourcentage de la largeur et de la hauteur (respectivement) du cadre de l'élément de bloc au niveau duquel l'image (ou les images répétées) doivent commencer.

Au lieu d'un pourcentage, vous pouvez spécifier une longueur (exprimée dans l'unité de mesure la mieux adaptée au support).

Au lieu des valeurs numériques, vous pouvez utiliser une valeur constante d'axe par attribut (left | center | right ou top | center | bottom).

Valeur initiale

0%

Exemple
div.marked {background-image: url(watermark.jpg);
background-position-x: center}
S'applique à

Eléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT).

Javascript

[window.]document .getElementById("elementID") .style.backgroundPositionX
[window.]document .getElementById("elementID") .style.backgroundPositionY

Autres propriétés appartenant à la même famille :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


background-repeat

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

background-repeat

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Indique la nécessité ou non de répéter l'image d'arrière-plan (spécifiée à l'aide de la propriété background-image) et, le cas échéant, les axes de répétition. Vous pouvez utiliser la fonction de répétition d'images d'arrière-plan pour créer des bandes horizontales et verticales.

Syntaxe CSS
background-repeat: no-repeat | repeat | repeat-x | repeat-y
Valeur(s) possible(s) pour cette propriété :

Avec la valeur no-repeat, une instance de l'image apparaît dans l'élément à l'emplacement défini par la propriété background-position (par défaut, dans l'angle supérieur gauche). Les répétitions normales se produisent le long des deux axes, mais une image peut être répétée sur une seule ligne (repeat-x) ou une seule colonne (repeat-y) .

Valeur initiale

repeat

Exemple
body {background-image: url(icon.gif); background-repeat: repeat-y}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .backgroundRepeat
Autres propriétés appartenant à la même famille :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


behavior

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

behavior

Hérité : non - Compatibilité : IE 5.5,6,7 uniquement.
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété ne fonctionnera qu'avec Internet Explorer. Elle est utilisée pour associer un script javascript à un objet HTML.

Le site Babylon-Design propose une utilisation de cette propriété pour simuler la propriété :hover inconnue d'Internet Explorer 5/6.

Syntaxe CSS
behavior: uri[, uri[, ...]]
Valeur(s) possible(s) pour cette propriété :

Valeur d'URL au formatage CSS, dans laquelle l'URL pointe vers un fichier .htc externe, l'ID d'un élément object destiné à charger dans la page un contrôle ActiveX de comportement ou l'un des comportements intégrés par défaut (au format url(#default#behaviorName)). Les noms de comportements par défaut sont les suivants:

Pour plus de détails sur l'action des comportements par défaut et les conditions de sécurité requises pour leur utilisation, visitez http://msdn2.microsoft.com/en-us/library/ms531081.aspx.

anchorClick | anim | clientCaps | download
homePage | httpFolder | mediaBar | saveFavorite
saveHistory | saveSnapshot | userData |
Valeur initiale

Aucun.

Exemple
input.numOnly {behavior: url(numInput.htc)}
S'applique à

Tous les éléments.

Javascript

[window.]document .getElementById("elementID") .style.behavior
[window.]document .getElementById("elementID") .behaviorUrns[i]

Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une seule instruction, la largeur, le style et/ou la couleur des quatre côtés de la bordure d'un élément. Les valeurs qui ne sont pas explicitement définies conservent leur valeur initiale. Si vous ne voulez pas définir quatre côtés identiques, vous disposez de nombreuses autres propriétés permettant de définir individuellement la largeur, le style et la couleur d'un ou de plusieurs côtés.

En complément de cette propriété, vous pouvez également consulter la propriété outline.

Le comportement par défaut des navigateurs en matière de bordures étant différent, chaque règle de style relative à une bordure (border) doit inclure les paramètres de largeur et de style. Si l'un ou l'autre de ces paramètres n'est pas spécifié, la bordure risque de ne pas être visible dans l'un ou l'autre des navigateurs.

Internet explorer 5.+ et 6.+ interprétent différement les propriétés border en fonction du DocType de la page.

bord dans IE 5/6 Si le doctype est :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
alors la bordure est à l'intérieur du bloc. La bordure est donc incluse dans la taille (width) du bloc. Cette interpétation n'est pas conforme aux recommendations du W3C.

bord dans Mozilla Si le doctype est :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ou toute autre forme valide de doctype XHTML,
alors Internet Explorer va interpréter border comme les autres navigateurs.

Syntaxe CSS
border: largeur || style || couleur
Valeur(s) possible(s) pour cette propriété :

Pour en savoir plus sur les valeurs possibles pour "largeur" et "style", reportez-vous aux propriétés border-width et border-style.

Valeur initiale

Aucun.

Exemple
p {border: 10px groove darkred}
S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .border = "10px groove darkred";

Testez vous-même la propriété border

Epaisseur Style Couleur

Voici le style appliqué à l'élément <p> ci-dessous : border: 10px groove darkred;

Exemple

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-bottom, border-left, border-right, border-top

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-bottom,
border-left,
border-right,
border-top

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces quatre propriétés permettent de définir, à l'aide d'une seule instruction, la largeur, le style et/ou la couleur d'un seul côté de la bordure d'un élément. Les propriétés qui ne sont pas explicitement définies par cette propriété adoptent leur valeur initiale.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS
border-bottom: largeur || style || couleur
border-left: largeur || style || couleur
border-right: largeur || style || couleur
border-top: largeur || style || couleur
Valeur(s) possible(s) pour cette propriété :

Pour en savoir plus sur les valeurs des propriétés largeur et style, reportez-vous à la description des propriétés border-bottom-width et border-bottom-style.

Valeur initiale

Aucun.

Exemple
p {border-bottom: 3px solid lightgreen}
p {border-left: 6px solid lightgreen}
p {border-right: 3px solid lightgreen}
p {border-top: 6px solid lightgreen}
S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .borderBottom
[window.]document .getElementById("elementID") .style .borderLeft
[window.]document .getElementById("elementID") .style .borderRight
[window.]document .getElementById("elementID") .style .borderTop

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-bottom-color, border-left-color, border-right-color, border-top-color

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-bottom-color,
border-left-color,
border-right-color,
border-top-color

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Chacune de ces propriétés permet de définir la couleur d'un seul côté de la bordure d'un élément. Veillez à ne pas abuser de cette fonction en mélangeant des couleurs qui ne vont pas ensemble. Pour définir la couleur de plusieurs côtés d'une bordure à l'aide d'une seule instruction, voir la propriété border-color.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS

border-bottom-color: couleur
border-left-color: couleur
border-right-color: couleur
border-top-color: couleur

Valeur(s) possible(s) pour cette propriété :

Toute spécification de couleur valide ou none.

Pour plus de détails sur les valeurs possibles pour cette propriété, consultez notre page consacrée à la couleur.

Valeur initiale

none

Exemple
p {border-bottom-color: gray}
div {border-left-color: #33c088}
p.special {border-right-color: rgb(150, 75, 0)}
h3 {border-top-color: rgb(100%, 50%, 21%)}
S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .borderBottomColor
[window.]document .getElementById("elementID") .style .borderLeftColor
[window.]document .getElementById("elementID") .style .borderRightColor
[window.]document .getElementById("elementID") .style .borderTopColor

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-bottom-style, border-left-style, border-right-style, border-top-style

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-bottom-style,
border-left-style,
border-right-style,
border-top-style

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Chacune de ces propriétés définit le style de ligne à appliquer à un seul côté de la bordure d'un élément.

Une propriété de style définissant un côté spécifique d'une bordure a priorité sur une propriété global définissant les quatre côtés à la fois (tel que border ou border-style); il faut toutefois que la propriété spécifique apparaisse après la propriété dans la règle de style global (dans l'ordre du code source).

Pour définir le style de plusieurs côtés d'une bordure à l'aide d'une seule instruction, voir la propriété border-style.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS
border-bottom-style: style
border-left-style: style
border-right-style: style
border-top-style: style
Valeur(s) possible(s) pour cette propriété :

Les valeurs de style sont des constantes associées à des méthodes spécifiques d'affichage des bordures. Les différentes versions des navigateurs ne reconnaissent pas toutes la totalité des valeurs des recommandations CSS. Les valeurs de style prises en charge sont indiquées dans le tableau suivant.

La façon dont les navigateurs interprètent les définitions des valeurs de style est loin d'être universelle. Le tableau suivant propose un récapitulatif de tous les styles affichés dans Internet Explorer 6 pour Windows et Explorer 5 pour Macintosh. Les navigateurs plus récents supportent tous ces styles, mais ne vous attendez pas à une représentation identique avec chacun d'entre eux.

Valeur | IE/Windows | IE/Mac | CSS
dashed | 5.5 | 4 | 1
dotted | 5.5 | 4 | 1
double | 4 | 4 | 1
groove | 4 | 4 | 1
hidden | s.o | 4 | 2
inset | 4 | 4 | 1
none | 4 | 4 | 1
outset | 4 | 4 | 1
ridge | 4 | 4 | 1
solid | 4 | 4 | 1
Valeur initiale

none

Exemple
p {border-style: solid; border-bottom-style: none}
div {border-left-style: ridge}
S'applique à

Tous les éléments.

Javascript

[window.]document .getElementById("elementID") .style .borderBottomStyle
[window.]document .getElementById("elementID") .style .borderLeftStyle
[window.]document .getElementById("elementID") .style .borderRightStyle
[window.]document .getElementById("elementID") .style .borderTopStyle

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-bottom-width, border-left-width, border-right-width, border-top-width

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-bottom-width,
border-left-width,
border-right-width,
border-top-width

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Chacune de ces propriétés définit la largeur à appliquer à un côté de la bordure d'un élément. Voir la propriété border-width pour définir la largeur de plusieurs côtés de la bordure à l'aide d'une seule instruction.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS
border-bottom-width: thin | medium | thick | length
border-left-width: thin | medium | thick | length
border-right-width: thin | medium | thick | length
border-top-width: thin | medium | thick | length
Valeur(s) possible(s) pour cette propriété :

Trois constantes, thin | medium | thick, permettent au navigateur de définir le nombre exact de pixels à utiliser pour afficher la bordure. Pour une plus grande précision, vous pouvez spécifier une valeur numérique.

Valeur initiale

medium

Exemple
h2 {border-bottom-width: 2px}
div {border-left-width: thin}
p.special {border-right-width: 0.5em}
S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .borderBottomWidth
[window.]document .getElementById("elementID") .style .borderLeftWidth
[window.]document .getElementById("elementID") .style .borderRightWidth
[window.]document .getElementById("elementID") .style .borderTopWidth

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-collapse

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-collapse

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5.5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si les bordures des éléments de tableau adjacents (cellules, groupes de lignes, groupes de colonnes) doivent être affichées séparément ou fusionnées en ignorant les remplissages ou les marges éventuelles entre les bordures adjacentes.

Un tableau défini sur la base du modèle de bordures séparées peut également définir des propriétés de style border-spacing et empty-cells (si les navigateurs cible les prennent en charge).

Syntaxe CSS
border-collapse: collapse | separate
Valeur(s) possible(s) pour cette propriété :

Constantes: collapse | separate.

Valeur initiale

separate

S'applique à

L'élément table.

Autres propriétés appartenant à la même famille :

border-spacing
border-collapse
caption-side
empty-cells
speak-header
table-layout

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-color

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-color

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet d'appliquer à plusieurs côtés d'une bordure la même couleur ou une couleur différente. Vous pouvez fournir de une à quatre valeurs de couleur séparées par un espace. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ces valeurs doivent être appliquées.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS
border-color: couleur {1,4}
Valeur(s) possible(s) pour cette propriété :

La propriété accepte une, deux, trois ou quatre valeurs de couleur , selon le nombre de côtés et les côtés spécifiques auxquels vous souhaitez appliquer les couleurs. Les valeurs spécifiées sont interprétées comme l'indique le tableau suivant.

Nombre de valeurs | Effet
1 | La valeur spécifiée est appliquée aux quatre côtés de la bordure.
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche

Pour plus de détails sur les valeurs possibles pour cette propriété, consultez notre page consacrée à la couleur.

Valeur initiale

La propriété de style "couleur" de l'élément (qui est hérité quand il n'est pas spécifiquement attribué pour l'élément).

Exemple
h2 {border-color: red blue red}
div {border-color: red rgb(0,0,255) red}
S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .borderColor

Testez vous-même la propriété border

Epaisseur Style Couleur

Voici le style appliqué à l'élément <p> ci-dessous : border: 10px groove darkred;

Exemple

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-spacing

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-spacing

Hérité : oui &nbsp;&nbsp;-&nbsp;&nbsp; Compatibilité : FF, Mozilla, Opera, Safari tous les navigateurs sauf IE - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine l’espacement (le cas échéant) entre toutes les bordures des cellules d’un tableau. Cette propriété exige que la propriété border-collapse soit paramétré comme separate (il s’agit normalement de la valeur par défaut). Si vous ne spécifiez qu’une seule valeur de longueur, celle-ci est appliquée à l’espacement horizontal et vertical entre les cellules; si vous spécifiez deux valeurs, la première est appliquée à l’espacement horizontal et la seconde à l’espacement vertical.

Syntaxe CSS
border-spacing: longueur [ longueur ]
Valeur(s) possible(s) pour cette propriété :

Valeurs de longueur. Si vous ne voulez pas d’espacement le long d’un axe, spécifiez la valeur zéro.

Valeur initiale

0

S’applique à

L’élément table .

Autres propriétés appartenant à la même famille :

border-spacing
border-collapse
caption-side
empty-cells
speak-header
table-layout

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d’évitement et raccourcis clavier Droits de copie
Aller au menu


border-style

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-style

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet d'appliquer à plusieurs côtés d'une bordure le même style ou un style différent. Vous pouvez fournir de une à quatre valeurs de style de bordure séparées par un espace. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ce style doit être appliqué.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS
border-style: Style {1,4}
Valeur(s) possible(s) pour cette propriété :

exemples border-style Les valeurs de style sont des constantes dont la liste est données ci-contre.

La façon précise dont les navigateurs interprètent les définitions des valeurs de style est loin d'être universelle. Le tableau suivant offre un récapitulatif des styles affichés dans Internet Explorer 6 pour Windows et Explorer 5 pour Macintosh. Les navigateurs plus récent supportent toutes les valeurs, mais ne vous attendez pas à une représentation identique dans tous les navigateurs.

Valeur | IE/Windows | IE/Mac | CSS
dashed | 5.5 | 4 | 1
dotted | 5.5 | 4 | 1
double | 4 | 4 | 1
groove | 4 | 4 | 1
hidden | 7 | 4 | 2
inset | 4 | 4 | 1
none | 4 | 4 | 1
outset | 4 | 4 | 1
ridge | 4 | 4 | 1
solid | 4 | 4 | 1
Nombre de valeurs | Effet
1 | La valeur spécifiée est appliquée aux quatre côtés de la bordure.
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale

none

Exemple
h1 {border-style: ridge; border-width: 3px}
div {border-style: solid double; border-width: 4px}
S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .borderStyle

Testez vous-même la propriété border

Epaisseur Style Couleur

Voici le style appliqué à l'élément <p> ci-dessous : border: 10px groove darkred;

Exemple

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


border-width

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

border-width

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet d'appliquer à plusieurs côtés d'une bordure la même largeur ou une largeur différente. Vous pouvez spécifier entre une et quatre valeurs de longueur/largeur, séparées par des espaces. Le nombre de valeurs détermine les côtés auxquels seront affectées ces largeurs.

Pour la façon particulière dont Internet Explorer interprête parfois ces propriétés, reportez-vous à la propriété border.

Syntaxe CSS
border-width: thin | medium | thick | longueur(s) {1,4}
Valeur(s) possible(s) pour cette propriété :

Trois constantes, thin | medium | thick, permettent au navigateur de définir le nombre exact de pixels à utiliser pour afficher la bordure. Pour une plus grande précision, vous pouvez spécifier une longueur (pour en savoir plus sur les valeurs de longueur, reportez-vous au début du présent chapitre).

Cette propriété accepte une, deux, trois ou quatre valeurs de borderWidth, séparés par des espaces, selon le nombre de côtés et les côtés spécifiques auxquels vous souhaitez appliquer les styles. Les valeurs spécifiées sont interprétées de la façon suivante:

Nombre de valeurs | Effet
1 | La valeur spécifiée est appliquée aux quatre côtés de la bordure.
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale

medium (IE et NN 6); 0 (NN 4)

Exemple
h1 {border-style: ridge; border-width: 3px 5px 3px}
div {border-style: solid double; border-width: 4px}
S'applique à

Tous les éléments, mais uniquement les éléments de niveau bloc et éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) dans IE 4 et 5 pour Windows.

Javascript

[window.]document .getElementById("elementID") .style .borderWidth

Testez vous-même la propriété border

Epaisseur Style Couleur

Voici le style appliqué à l'élément <p> ci-dessous : border: 10px groove darkred;

Exemple

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


bottom

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

bottom

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

La spécification CSS exige que cette propriété définisse la position du bord inférieur du contenu d'un élément (sans compter les bordures et/ou les marges) par rapport au bord inférieur du conteneur parent immédiat.

Le comportement d'IE pour Windows est assez inattendu lorsque l'élément positionné utilise le contexte de positionnement <body> : au lieu de choisir le bas du document comme côté de comparaison, ces navigateurs utilisent le bas de l'espace correspondant à la fenêtre du navigateur (la zone visible, dans la terminologie CSS).

Par conséquent, la position précise du bas de l'élément varie en fonction de la taille de la fenêtre du navigateur de l'utilisateur. En raison de cette différence, il est plus pratique d'utiliser la propriété bottom pour un élément positionné et imbriqué dans un autre élément positionné.

Dans le cas d'un élément à positionnement relatif, le décalage est calculé par rapport au côté inférieur de l'emplacement où l'élément devrait normalement apparaître.

Syntaxe CSS
bottom: longueur | pourcentage | auto
Valeur(s) possible(s) pour cette propriété :

Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur.

Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la hauteur du conteneur parent immédiat.

Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage vertical inférieur de l'élément par rapport à sa position naturelle dans le cadre destiné à le recevoir.

Valeur initiale

auto

S'applique à

Tous les éléments positionnés.

Javascript

[window.]document .getElementById("elementID") .style .bottom

Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


caption-side

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

caption-side

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari tous les navigateurs sauf IE - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Positionne l'élément caption (légende d'un tableau) au dessus ou au dessous de l'élément table qui l'englobe (certaines valeurs risquent de ne pas fonctionner dans tous les navigateurs). Cette propriété remplace certaines valeurs dépréciées de la propriété align de l'élément caption.

Syntaxe CSS
caption-side: top | bottom | left | right
Valeur(s) possible(s) pour cette propriété :

L'une des quatre constantes suivantes: top | bottom | left | right.

Valeur initiale

top

S'applique à

Eléments caption.

Javascript
[window.]document .getElementById("elementID") .style .captionSide
Autres propriétés appartenant à la même famille :

border-spacing
border-collapse
caption-side
empty-cells
speak-header
table-layout

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


clear

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

clear

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si l'élément de niveau bloc peut être affiché dans la même bande horizontale qu'un élément flottant voisin, tel qu'une image. Généralement, la propriété de style float d'un autre élément avoisinant est paramétré sur left ou right.

Pour empêcher l'élément actuel d'être affiché dans la même bande que le bloc flottant, paramétrez la propriété clear sur le même côté (left ou right). Si vous ne savez pas avec certitude à quel endroit le chevauchement potentiel risque de se produire, paramétrez la propriété clear sur both.

Un élément dont la propriété clear est paramétré sur une valeur autre que none est affiché au début de la première ligne disponible sous l'élément flottant.

Syntaxe CSS
clear: both | left | none | right
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes : both | left | none | right.

Valeur initiale

none

Exemple
<img src="logo.gif" height="40" width="60" style="float: right">
<h1 style="clear: right">Giantco Corporation</h1>
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .clear
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


clip

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

clip

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit une zone de découpe d'un élément positionnable. La zone de découpe (clipping) est la zone du calque de l'élément dans laquelle apparaît le contenu. Il est possible de placer l'élément constituant le contenu dans un élément div dont la propriété clip définit la zone de détourage souhaitée. Dans le cas d'une image, on peut appliquer directement la propriété clip directement sur l'élément img. Attention ! Dans les deux cas, l'élément auquel on attribue la propriété clip doit également avoir la propriété position:absolute !

Syntaxe CSS
clip: rect(ValeurHaut ValeurDroite ValeurBas ValeurGauche) | auto
Valeur(s) possible(s) pour cette propriété :

Pour CSS2, la seule forme reconnue de la propriété clip est rect. Il se peut que d'autres formes soient admises à l'avenir.

Lorsque vous spécifiez les longueurs des côtés de la zone de détourage, suivez toujours l'ordre suivant: top, right, bottom, left. La valeur auto définit la zone de découpe sur le bloc qui contient le contenu.

Valeur initiale

auto

Exemple
<img src="desk1.gif" style="position: absolute; clip: rect(10px 110px 80px 10px)" height="90" width="120">
S'applique à

Eléments de niveau bloc, éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) et éléments positionnés.

Javascript
[window.]document.getElementById("elementID").style.clip = "rect(0 300 0 100)";
Testez vous-même la propriété clip

La démonstration ci-dessous s'applique au recadrage d'une image dans un conteneur.
Vous pouvez compenser les marges en jouant sur les positions y et x avec des valeurs négatives.

Haut Droite Gauche Bas
Position Y Position X

Voici le style appliqué à l'élément <img> ci-dessous :
position:absolute;
clip:rect(0px 300px auto 100px); top:0px; left:-100px
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


color

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

color

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la couleur du texte affiché au premier-plan de l'élément. Pour certains éléments de type graphique, tels que les contrôles de formulaire, la propriété color peut également être appliquée aux bordures, ou autres parties, d'un élément. Ce comportement dépend du navigateur et peut donc varier d'un navigateur à l'autre.

Syntaxe CSS
color: couleur
Valeur(s) possible(s) pour cette propriété :

Pour plus de détails sur les valeurs possibles pour la propriété color, consultez notre page consacrée à la couleur.

Valeur initiale

black

Exemple
th {color: darkred}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style.color
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


content

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

content

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari tous les navigateurs sauf IE - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Celui-ci définit le contenu ou la source du contenu à afficher avant et/ou aprés l'élément actuel. Dans le jargon CSS, on appelle contenu généré ce type de contenu. Cette propriété ne se définit que lorsque les pseudo-éléments :before et :after sont associés à un élément.

Les balises HTML du texte de contenu ne font l'objet d'aucune interprétation; en revanche, si la situation le permet, un document externe peut être attribué à la propriété content.

Le site babylon-design propose une page illustrant les possibilités offertes par cette propriété (à consulter avec FireFox puisque IE ne reconnait pas encore cette propriété.)

Syntaxe CSS
content: string | uri | counter | attr(attrName) | open-quote | close-quote |
no-open-quote | no-close-quote | inherit
Valeur(s) possible(s) pour cette propriété :

Les types de guillemets de type « no » vous permettent de spécifier l'effet de ces guillemets (dans le cadre de l'imbrication des guillemets) sans afficher le symbole de guillemets. Plusieurs chaînes séparées par des espaces peuvent suivre le nom de propriété content: .

La valeur counter permet à une feuille de style de contrôler les motifs de numérotation pour les séquences d'éléments (sections ou illustrations, par exemple). Cela suppose que la numérotation n'est pas incluse dans le contexte réel, mais qu'elle est uniquement déterminée par le contexte affiché de l'élément dans le document. Par conséquent, si vous supprimez d'un document un paragraphe numéroté au cours de la phase d'édition, la numérotation de paragraphe du document s'ajuste automatiquement lors de l'affichage de la page.

Pour utiliser un compteur, vous devez lui attribuer un identifiant (par conséquent, cette procédure permet la présence de plusieurs compteurs dans un même document, par exemple, un pour les sections, un autre pour les sous-sections). Les autres propriétés CSS (counter-increment et counter-reset) exigent des valeurs qui pointent vers un compteur identifié afin de contrôler la séquence de numérotation.

Les compteurs offrent un potentiel important à de longs documents structurés.

Vous pouvez consulter une illustration de l'utilisation des compteurs sur le site ljouanneau.

Valeur initiale

"" (chaîne vide)

Exemple
p.note:before {content:"==>"}
S'applique à

Tous les éléments accompagnés des pseudo-éléments :before et/ou :after.

Autres propriétés appartenant à la même famille :

content
counter-increment
counter-reset
quotes

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


counter-increment, counter-reset

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

counter-increment,
counter-reset

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari tous les navigateurs sauf IE - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces propriétés contrôlent la séquence de numérotation d'un compteur CSS servant au contenu généré (reportez-vous à la propriété content). La propriété counter-increment définit le montant (et la direction) du changement pour chaque accès au compteur pendant l'affichage. La propriété counter-reset vous permet d'affecter un nombre spécifique au compteur (valeur par défaut: zéro).

Syntaxe CSS
counter-increment: counterID [ posOrNegInteger ] | none
counter-reset: counterID [ posOrNegInteger ] | none
Valeur(s) possible(s) pour cette propriété :

counterID est un identifiant affecté à une propriété de style content:counter(counterID). La valeur optionnelle (nombre entier) est séparée par un espace après counterID. Vous pouvez combiner plusieurs ID compteur au sein du même attribut de style en enchaînant des paires séparées par des espaces d'ID et de valeurs entières.

La valeur counter permet à une feuille de style de contrôler les motifs de numérotation pour les séquences d'éléments (sections ou illustrations, par exemple). Cela suppose que la numérotation n'est pas incluse dans le contexte réel, mais qu'elle est uniquement déterminée par le contexte affiché de l'élément dans le document. Par conséquent, si vous supprimez d'un document un paragraphe numéroté au cours de la phase d'édition, la numérotation de paragraphe du document s'ajuste automatiquement lors de l'affichage de la page.

Les compteurs offrent un potentiel important à de longs documents structurés.

Vous pouvez consulter une illustration de l'utilisation des compteurs sur le site ljouanneau.

Valeur initiale

none

Exemple
h1 {counter-reset:subSection}
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

content
counter-increment
counter-reset
quotes

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


cue

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

cue

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les feuilles de style audio uniquement, cette propriété propose une forme courte de propriété permettant de définir les propriétés cue-before et cue-after. Un « cue » est un son (ou icône auditive) pouvant être utilisé pour délimiter la lecture du contenu d'un document. Les valeurs de la propriété cue sont des adresses URI (Universal Resource Identifier) correspondant à des ressources sonores.

Syntaxe CSS
cue: cue-before || cue-after
Valeur(s) possible(s) pour cette propriété :

Si vous spécifiez deux valeurs, la première est appliquée à la propriété cue-before et la seconde à la propriété cue-after. Si vous spécifiez une seule valeur, la même icône auditive est appliquée à cue-before et à cue-after.

Valeur initiale

none

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


cue-after, cue-before

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

cue-after, cue-before

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les feuilles de style audio uniquement, un « cue » est un son (ou icône auditive) pouvant être utilisé pour délimiter la lecture du contenu d'un document. Les propriétés cue-before et cue-after sont les adresses URI (Universal Resource Identifier) de fichiers son devant être joués avant et après la restitution du contenu (par synthèse vocale ou au moyen d'un support audio quelconque).

Syntaxe CSS
cue-after: uri | none
cue-before: uri | none
Valeur(s) possible(s) pour cette propriété :

Adresse URL complète ou relative (au format CSS) d'un fichier son dont le type MIME est pris en charge par le navigateur. Vous pouvez appliquer la même valeur aux deux propriétés à l'intérieur du même sélecteur si cela peut avoir une signification particulière pour l'auditeur.

Valeur initiale

none

Exemple
li {cue-before: url(ding.wav); cue-after: url(dong.wav)}
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


cursor

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

cursor

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Formes de curseurs Définit la forme que doit avoir le curseur lorsque le pointeur de la souris survole l'élément. L'apparence précise des curseurs dépend du système d'exploitation.

Avant de modifier la forme d'un curseur, examinez les curseurs standard utilisés par le navigateur et le système d'exploitation. En effet, les utilisateurs s'attendent à ce qu'une forme de curseur ait la même signification dans toutes les applications.

La figure ci-contre présente un récapitulatif des curseurs pour chacun des paramètres constants.

Syntaxe CSS
cursor: cursorType || uri
Valeur(s) possible(s) pour cette propriété :

Un type de curseur compte parmi les noms de curseur implémentés. Le tableau suivant indique les types de curseur pris en charge par les divers navigateurs et le standard CSS.

Veuillez noter que IE 6 et 7 pour Windows implémentent les curseurs téléchargeables. Le paramètre IE 6 pour une adresse URL externe exige l'adresse d'un fichier de curseur portant l'extension .cur ou .ani (que vous créez au moyen d'un utilitaire graphique permettant la création de curseurs Windows).

Nom de curseur | IE/Windows | IE/Mac | CSS
alias | s.o | s.o | s.o
all-scroll | 6 | s.o | s.o
auto | 4 | 4 | 2
cell | s.o | s.o | s.o
col-resize | 6 | s.o | s.o
context-menu | s.o | s.o | s.o
copy | s.o | s.o | s.o
count-down | s.o | s.o | s.o
count-up | s.o | s.o | s.o
count-up-down | s.o | s.o | s.o
crosshair | 4 | 4 | 2
default | 4 | 4 | 2
e-resize | 4 | 4 | 2
grab | s.o | s.o | s.o
grabbing | s.o | s.o | s.o
hand | 4 | 4 | s.o
help | 4 | 4 | 2
move | 4 | 4 | 2
n-resize | 4 | 4 | 2
ne-resize | 4 | 4 | 2
no-drop | 6 | s.o | s.o
not-allowed | 6 | s.o | s.o
nw-resize | 4 | 4 | 2
pointer | 4 | 4 | 2
progress | 6 | s.o | s.o
row-resize | 6 | s.o | s.o
s-resize | 4 | 4 | 2
se-resize | 4 | 4 | 2
spinning | s.o | s.o | s.o
sw-resize | 4 | 4 | 2
text | 4 | 4 | 2
url(uri) | 6 | s.o | 2
vertical-text | 6 | s.o | s.o
w-resize | 4 | 4 | 2
wait | 4 | 4 | 2
Valeur initiale

auto

Exemple
a.helpLink {cursor: help}
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

cursor
filter(new style)
filter(old style) -!important
opacity
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkShadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
white-space

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


direction

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

direction

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit le sens d'affichage des éléments de contenu incorporés (texte ou autre) et l'ordre de remplissage des cellules de tableau sur une ligne. Similaire à la propriété dir de la plupart des éléments, la propriété de style direction vous permet d'annuler et de redéfinir le sens d'affichage par défaut pour d'autres langues ou contenus spéciaux.

Syntaxe CSS
direction: ltr | rtl
Valeur(s) possible(s) pour cette propriété :

Une valeur de direction (deux au choix). La valeur ltr signifie left-to-right (de gauche à droite), la valeur rtl right-to-left (de droite à gauche).

Valeur initiale

ltr

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


display

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

display

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

L'aspect le plus courant de la propriété de style display dans DHTML consiste à configurer les scripts de sorte qu'ils basculent entre l'affichage et le masquage complet de l'élément et de son espace. Lorsque la propriété a pour valeur none, l'élément est masqué et tous les contenus avoisinants sont redimensionnés pour remplir l'espace qu'il occuperait normalement.

Ceci est à distinguer de la propriété visibility qui réserve un espace pour l'élément même si ce dernier n'est pas affiché. Cependant, pour restaurer le mode d'affichage par défaut de l'élément, vous pouvez attribuer l'un des types d'affichage courant (block et inline) ou le type plus spécifique de l'élément (par exemple, list-item pour un élément li), s'il est pris en charge par vos navigateurs cibles.

Dans le même temps, la propriété display vous permet de remplacer le comportement d'affichage par défaut des éléments. Un élément de type "en-ligne" peut alors se comporter comme un élément "bloc" et vice-versa (voir Eléments bloc et en-ligne). Grace à cette propriété, n'importe quel élément peut également se comporter comme une partie de tableau.

Syntaxe CSS
display: valeur
Valeur(s) possible(s) pour cette propriété :

Les spécifications CSS identifient divers types d'affichages, mais la prise en charge des navigateurs est plus limitée. Le tableau suivant indique les types pris en charge.

Type d'affichage | IE/Windows | IE/Mac | CSS
block | 5 | 4 | 2
compact | s.o | s.o | 2
inline | 5 | 4 | 2
inline-block | 5.5 | s.o | s.o
inline-table | s.o | 5 | 2
list-item | 5 | 5 | 2
marker | s.o | s.o | 2
none | 4 | 4 | 2
run-in | s.o | 5 | 2
table | s.o | 5 | 2
table-caption | s.o | 5 | 2
table-cell | s.o | 5 | 2
table-column-group | s.o | 5 | 2
table-footer-group | 5.5 | 5 | 2
table-header-group | 5 | 5 | 2
table-row | s.o | 5 | 2
table-row-group | s.o | 5 | 2
Valeur initiale

Fonction de l'élément.

Exemple
.hidden {display: none}
S'applique à

Tous les éléments (mais certains types d'affichage s'appliquent à des éléments spécifiques).

Javascript
[window.]document .getElementById("elementID") .style .display
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


elevation

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

elevation

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Si une personne se trouve au centre d'un espace sonore circulaire (tel qu'une salle équipée d'un système Surround Sound), la propriété elevation définit l'angle vertical de la source du son (sur un navigateur à synthèse vocale, par exemple). Voir aussi la propriété azimuth.

Syntaxe CSS
elevation: angle | angleConstant
Valeur(s) possible(s) pour cette propriété :

valeurs possibles pour elevation Soit une valeur d'angle spécifique (exprimée en degrés), soit l'une des cinq constantes disponibles. La valeur d'angle peut être n'importe quelle valeur comprise entre -90 et +90 (inclus), suivie des lettres « deg » (90deg, par exemple). La valeur 0deg correspond à un point situé au niveau des oreilles de l'auditeur. Pour définir un angle au dessus de ce niveau, vous devez spécifier une valeur positive (45deg), pour un angle au dessous de ce niveau, une valeur négative (-45deg). Vous pouvez également choisir une valeur angleConstant dans une vaste bibliothèque de descriptions correspondant à des points fixes autour du cercle.

En combinant cette propriété à la propriété azimuth, vous pouvez placer un son à n'importe quel point d'une scène de Surround Sound sphérique.

Valeur | Equivaut à
above | 90deg (directement au dessus)
below | -90deg (directement au dessous)
higher | +10 degrés du niveau actuel
level | 0deg (au niveau des oreilles de l'auditeur)
lower | -10 degrés du niveau actuel
Valeur initiale

level

Exemple
h1 {elevation: -45deg}
p.heavenly {elevation: above}
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


empty-cells

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

empty-cells

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari tous les navigateurs sauf IE - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si un élément td vide affiche des bordures et son arrière-plan dans un tableau. Les cellules environnantes ne changent pas de position lorsqu'une cellule vide est masquée. En revanche, la cellule est totalement transparente, et l'arrière-plan du tableau peut donc transparaître dans l'espace.

Syntaxe CSS
empty-cells: show | hide
Valeur(s) possible(s) pour cette propriété :

Deux constantes sont possibles: show | hide .

Valeur initiale

show

Exemple
td {border: salmon inset 3px; empty-cells: hide}
S'applique à

Eléments td.

Autres propriétés appartenant à la même famille :

border-spacing
border-collapse
caption-side
empty-cells
speak-header
table-layout

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


filter (new style)

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

filter (new style)

Hérité : non - Compatibilité : IE seulement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit, pour Internet Explorer, le filtre statique ou de transition qui va permettre d'afficher ou de modifier le contenu d'un élément au moyen du contrôle ActiveX DXImageTransform.

Ce nouveau mécanisme de filtre a la même action que la propriété filter (old style), mais, à l'instar de la plupart des noms de filtre, il utilise une nouvelle syntaxe pour invoquer le contrôle ActiveX.

Syntaxe CSS
filter:progid:DXImageTransform .Microsoft .filterType1(paramName1=value1,
paramName2=value2,...)
progid:DXImageTransform .Microsoft .filterType2(paramName1=value1,...) ...
Valeur(s) possible(s) pour cette propriété :

Chaque type de filtre doit être précédé par la référence au contrôle ActiveX (progid:DXImageTransform.Microsoft.), et les divers types de filtre correspondant à un même attribut de style filter sont séparés par un espace. Chaque type de filtre est suivi d'un couple de parenthèses permettant de définir les paramètres de comportement du filtre pour l'élément actuel.

Un paramètre consiste généralement en un couple nom/valeur relié par le signe égal. Les types de filtre qui contrôlent les transitions sont également assortis de méthodes qui indiquent aux scripts de figer l'affichage pendant la modification de certains propriétés visibles de l'élément (également sous le contrôle du script), puis de lire la transition.

Valeur initiale

Aucun.

Exemple
.fastStuff {filter:progid:DXImageTransform .Microsoft .MotionBlur(add=1,
direction=225)}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .filters["DXImageTransform .Microsoft .filterName"]
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


filter (old style)

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

filter (old style)

Hérité : non - Compatibilité : IE seulement.
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit, pour Internet Explorer, le filtre visuel, de transition ou de fondu à appliquer au contenu d'un élément. Un filtre visuel peut être appliqué à un élément pour produire des effets tels que retournement du contenu, néon, ombre portée et bien d'autres. Un filtre de transition agit sur la visibilité ou l'aspect d'un élément.

La valeur du filtre de transition détermine quel effet visuel doit être appliqué à la transition entre le masquage et l'affichage de l'élément (ou vice versa). Parmi les effets possibles, on peut citer l'effet de volet horizontal ou vertical. Un filtre de fondu détermine la vitesse de la transition entre deux états de visibilité.

Voir également la propriété filter (new style).

Syntaxe CSS
filter: filterType1(paramName1=value1, paramName2=value2,...)
filterType2(paramName1=value1,...) ...
Valeur(s) possible(s) pour cette propriété :

Vous pouvez associer à chaque propriété filter plusieurs types de filtre, en les séparant par des espaces. Chaque type de filtre est suivi d'un couple de parenthèses permettant de définir les paramètres de comportement du filtre pour l'élément actuel. Un paramètre consiste généralement en un couple nom/valeur relié par le signe égal.

Valeur initiale

Aucun.

Exemple
.fastStuff {filter: blur(add=true, direction=225)}
S'applique à

Eléments body, button, img, input, marquee, table, td, textarea, tfoot, th, thead, tr et éléments div et span à positionnement absolu.

Javascript
[window.]document .getElementById("elementID") .filters["filterName"]
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


float

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

float

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Précise de quel côté du conteneur l'élément doit s'aligner, déterminant ainsi le positionnement des autres contenus par rapport à l'élément.

Si cette propriété a pour valeur none, l'élément apparaît dans le même ordre que dans le code source et une ligne de contenu textuel environnant, au plus, apparaît dans la même bande horizontale.

Syntaxe CSS
float: alignmentSide | none
Valeur(s) possible(s) pour cette propriété :

La valeur alignmentSide peut être l'une des constantes suivantes: left | right.

Valeur initiale

none

Exemple
img.navButton {float: right}
S'applique à

Tous les éléments, à l'exception des éléments positionnés (ou du contenu généré).

Javascript
Pour Explorer :
[window.]document .getElementById("elementID") .style.styleFloat
Pour les autres navigateurs:
[window.]document .getElementById("elementID") .style.cssFloat
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


font

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

font

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une seule instruction, plusieurs propriétés relatifs aux polices de caractères.

Certains navigateurs sont plus souples que d'autres en ce qui concerne les valeurs obligatoires et optionnelles, mais cette propriété devrait au moins spécifier font-size et font-family dans cet ordre. L'ordre des types de valeurs séparées par des espaces n'est pas important.

Dans CSS2, des constantes supplémentaires permettent d'appliquer à chaque propriété de police des polices système nommées qui sont dotées de valeurs fixes.

Syntaxe CSS
font: font-style || font-variant || font-weight || font-size[/Hauteur de ligne] ||
font-family | ConstanteCSS2
Valeur(s) possible(s) pour cette propriété :

Pour la syntaxe et des exemples de types de valeur applicables aux propriétés de police et de ligne, voir la section consacrée à la propriété en question. Si vous insérez une barre oblique avant la valeur "hauteur de ligne", vous pouvez utiliser une seconde valeur de longueur dans une séquence de valeurs susceptible d'atteindre une certaine longueur de valeurs pour cette propriété: la valeur "hauteur de ligne" doit toujours accompagner la valeur font-size requise, séparée par une barre oblique.

Les constantes de police CSS2 sont les suivantes: caption | icon | menu | message-box | small-caption | status-bar. Ces constantes désignent les polices du navigateur et du système d'exploitation utilisées par l'ordinateur client. Leur apparence précise varie par conséquent en fonction du système d'exploitation mais est conforme aux attentes de l'utilisateur pour un type particulier de police. Autrement dit, vous devez utiliser ces styles lorsque leur fonction reflète une fonction du système d'exploitation ou du navigateur.

Valeur initiale

Aucun.

Exemple
body {font: 12px serif}
h2 {font: bolder small-caps 16px "Lucida Console", Arial, sans-serif}
.iconCaption {font: 10px/1.1em caption}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .font
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


font-family

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

font-family

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit, sous forme de liste classée par ordre de préférence, la famille de polices à utiliser pour afficher le contenu. Vous pouvez inclure un ou plusieurs noms dans cette liste, en les séparant par des virgules. Si un nom de famille de polices se compose de plusieurs mots, il doit être entouré de guillemets.

Une famille de polices peut comporter plusieurs variantes. Par exemple, une famille de polices Helvetica peut comporter une version Gras et une version Italique distinctes. Lorsque vous spécifiez une liste de noms de police, le navigateur vérifie si une police correspondant au premier nom de la liste est présente sur l'ordinateur client. Si ce n'est pas le cas, le navigateur passe au nom suivant de la liste. Par conséquent, il est conseillé de commencer la liste par le nom le plus spécialisé et de finir par le nom le plus générique. Le dernier nom de la liste doit être celui de la famille de polices générique (serif, sans-serif, cursive, fantasy ou monospace) la plus proche de la police souhaitée. En effet, de nombreuses polices disponibles sur un système d'exploitation peuvent ne pas l'être sur un autre système.

Les navigateurs conformes aux spécifications CSS2 doivent être en mesure de reconnaître les codes de caractères Unicode et d'y substituer des polices équivalentes prenant en charge des langues spécifiques. Cela permet à un navigateur de combiner, dans le même élément, des polices de langues et de systèmes d'écriture différents, du moment que chacune de ces polices est spécifiée dans la valeur de la propriété.

Syntaxe CSS
font-family: fontFamilyName [, fontFamilyName [, ...]]
Valeur(s) possible(s) pour cette propriété :

Nombre quelconque de noms de police, séparés par des virgules. Les noms constitués de plusieurs mots doivent être placés entre guillemets. Les noms de famille génériques reconnus sont les suivants: serif | sans-serif | cursive | fantasy | monospace.

Valeur initiale

Valeur par défaut du navigateur.

Exemple
body {font-family: "Century Schoolbook", Times, serif}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .fontFamily
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


font-size

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

font-size

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la taille de caractères de l'élément.

Plusieurs méthodes sont disponibles.

  • Un ensemble de constantes (xx-small, x-small, small, medium, large, x-large, xx-large) permet de définir des tailles dites absolues. En réalité, ces tailles ne sont absolues que pour un navigateur et un système d'exploitation donnés, car leur point de référence varie en fonction de ces derniers (analogue aux anciennes tailles de police HTML de 1 à 7). Elles garantissent toutefois qu'un élément auquel est appliqué la propriété large sera affiché en caractères plus grands qu'un élément auquel est appliqué la propriété medium.
  • Un autre ensemble de constantes (larger, smaller) permet de définir des tailles dites relatives. Du fait que la propriété font-size est hérité de l'élément parent, ces tailles relatives sont appliquées à l'élément parent pour déterminer la taille de caractères de l'élément actuel. C'est au navigateur de déterminer exactement de combien la taille de police doit être agrandie ou réduite, et cela dépend en grande partie de la façon dont la taille de police de l'élément parent a été définie. Si elle a été définie à l'aide d'une propriété de taille absolue (large, par exemple) et que vous appliquez à l'élément enfant la propriété larger, les caractères sont affichés dans la taille x-large du navigateur. Les incréments ne sont pas aussi nets lorsque la taille de caractères de l'élément parent est définie sous forme de longueur ou de pourcentage.
  • Si vous spécifiez une longueur pour la propriété font-size, choisissez l'unité qui convient le mieux pour les polices affichées sur le périphérique de sortie, par exemple les pixels (px) pour l'affichage écran et les points (pt) ou les cadratins (em) pour la sortie imprimée. Les valeurs de cadratin sont calculées en fonction de la taille de police de l'élément parent.
  • Vous pouvez également définir la propriété font-size sous forme de pourcentage, lequel sera calculé par rapport à la taille de caractères de l'élément parent.

Certains navigateurs gênent les efforts que vous"pouvez déployer pour définir la taille précise des polices, puisqu'ils utilisent leurs propres paramètres (ou ceux de l'utilisateur) pour définir une taille moyenne (« medium »). C'est pourquoi beaucoup de concepteurs choisissent souvent les constantes de taille relative pour leurs spécifications font-size. Ce choix signifie que le concepteur renonce à un certain niveau de contrôle sur l'affichage pour les divers navigateurs et systèmes d'exploitation, mais les tentatives visant à établir un contrôle trop strict pour un affichage uniforme se soldent bien souvent par une intense frustration.

Syntaxe CSS
font-size: TailleAbsolue | TailleRelative | longueur | pourcentage
Valeur(s) possible(s) pour cette propriété :
  • Pour une taille de caractères absolue, l'une des constantes suivantes: xx-small | x-small | small | medium | large | x-large | xx-large.
  • Pour une taille relative, l'une des constantes suivantes: larger | smaller.
  • Pour un pourcentage, la valeur pourcentage suivie du signe %.
Valeur initiale

medium (pour l'élément BODY); la valeur font-size de l'élément parent (pour tous les autres).

Exemples
body {font-size: 14pt}
p.teeny {font-size: x-small}
em {font-size: larger}
span.larger {font-size: 150%}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style.fontSize
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


font-size-adjust

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

font-size-adjust

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Permet à un élément de conserver, en cas de substitution de la police, la hauteur x (à savoir la hauteur mesurée en x) de la première police spécifiée dans la liste des polices à utiliser. Le facteur z est le rapport entre la hauteur du cadratin et la hauteur x d'une police.

Des polices différentes, malgré une taille de caractères identique, peuvent paraître plus grandes ou plus petites que les polices avoisinantes, sur une page paramétrée sur la même taille; le facteur z permet de calculer le rapport décrit plus haut et de l'appliquer aux autres polices afin d'en ajuster la taille.

Même si la taille résultant de ce calcul est supérieure ou inférieure à celle de la première police spécifiée dans la liste, la taille perçue par l'oeil est nettement plus précise. Cela permet en outre d'égaliser les mesures horizontales des polices afin que les lignes soient coupées au même endroit, quelle que soit la police.

Syntaxe CSS
font-size-adjust: 0.47
Valeur(s) possible(s) pour cette propriété :

Nombre représentant le rapport hauteur/largeur de la police préférée (l'éditeur de la police en question devrait pouvoir vous l'indiquer) ou none.

Valeur initiale

none

S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .fontSizeAdjust
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


font-stretch

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

font-stretch

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la police affichée sous forme d'un espacement entre deux caractères qui est déterminé par rapport à la famille de polices spécifiée. Les navigateurs de la version 6 ne choisissent pas de condenser ou d'étendre artificiellement les spécifications de la famille de polices.

Syntaxe CSS
font-stretch: stretchType | normal
Valeur(s) possible(s) pour cette propriété :

Pour une taille de caractères absolue, l'une des constantes suivantes: ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | extra-expanded | ultra-expanded. Pour une taille relative, l'une des constantes suivantes: narrower | wider.

Valeur initiale

normal

S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .fontStretch
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


font-variant

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

font-variant

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si l'élément doit être affiché tout en majuscules, les minuscules du code source étant affichées en majuscules plus petites. Si une famille de polices comprend une variante Petites capitales, le navigateur doit normalement utiliser cette dernière.

Dans la plupart des cas, cependant, le navigateur affiche les minuscules du code source en majuscules de plus petite taille que les majuscules normales. En pratique, les versions d'Internet Explorer pour Windows antérieures à la version 6 restituent le contenu intégral du code source sous forme de majuscules de même taille que la police de l'élément parent, quelle que soit la casse du code source.

Syntaxe CSS
font-variant: Constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: normal | small-caps.

Valeur initiale

normal

Exemple
em {font-variant: small-caps}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .fontVariant
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


font-weight

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

font-weight

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la graisse (épaisseur) de la police de caractères à appliquer à l'élément. Le système de classification des graisses CSS est extrêmement précis et, si la plupart des navigateurs ne sont pas en mesure de reproduire à l'écran les graisses les plus subtiles, celles-ci se justifient lors de l'impression des contenus. Ce système utilise une échelle numérique allant de 100 à 900, par incréments de 100. Ainsi, 100 correspond à la graisse (font-weight) la plus fine pouvant être affichée et 900 à la plus épaisse. La propriété normal (graisse par défaut de n'importe quelle police) équivaut à une valeur de graisse (font-weight) de 400; la propriété standard bold (gras) équivaut à 700. D'autres paramètres (bolder et lighter) vous permettent de spécifier une graisse dont la valeur est relative à celle de l'élément parent.

Les spécifications CSS2 comportent un guide des correspondances entre les graisses et les noms des polices, ainsi que les caractéristiques internes de certains formats de définition de police. Par exemple, le format de la définition de police OpenType dispose de neuf emplacements pour les graisses. Dans ce cas, les valeurs numériques de la propriété font-weight correspondent directement aux définitions de graisse de cette police. S'il existe, dans la famille de polices, une police dont le nom contient le mot Medium et une autre libellée Book, Regular, Roman ou Normal, une correspondance est automatiquement établie entre la police Medium et la graisse 500 (l'autre police correspondant à 400). Toutes les polices comportant le mot Bold se voient attribuer la valeur de graisse 700. Si une famille de polices ne dispose pas de la totalité des neuf graisses, le navigateur effectue la meilleure interpolation possible, mais il est fort probable que certaines valeurs de graisse génèrent des polices de même graisse.

Syntaxe CSS
font-weight: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

Valeur initiale

normal

Exemple
p em {font-weight: bolder}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .fontWeight
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


height

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

height

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6 (voir texte),7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la hauteur d'un élément de niveau bloc, remplacé et positionné (sans compter les bordures, le remplissage et les marges).

Internet Explorer pour Windows inclut les marges supérieures et inférieures, ainsi que le remplissage et les bordures dans le calcul de la hauteur d'un élément, tant que vous n'activez pas le mode de compatibilité aux normes d'Internet Explorer 6 (reportez-vous à l'élément DOCTYPE).

Si les normes CSS sont respectées, la hauteur s'applique uniquement à la partie contenu d'un élément, quels que soient les bordures, le remplissage ou les marges.

Toutefois, et même avec un DOCTYPE correct, Explorer 6 n'interprête pas correctement la propriété "height" et la considère comme "min-height" : elle s'allongera en fonction du contenu. Ce problème est réglé avec la version 7 de ce navigateur.

Syntaxe CSS
height: longueur | pourcentage | auto
Valeur(s) possible(s) pour cette propriété :

Si vous spécifiez la valeur auto, le navigateur détermine automatiquement la hauteur de l'élément en fonction de l'espace requis pour afficher son contenu.

Valeur initiale

auto

Exemple
div#announce {height: 240}
textarea {height: 90%}
S'applique à

Tous les éléments sauf les éléments incorporés non remplacés, les éléments colonne de tableau et les éléments groupe de colonnes.

Javascript
[window.]document .getElementById("elementID") .style.height
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


ime-mode

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

ime-mode

Hérité : non - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle la présence de l'éditeur de méthode d'entrée dans Internet Explorer pour Windows, pour les versions de navigateur et de système qui prennent en charge les langues tels que le chinois, le japonais et le coréen.

Syntaxe CSS
ime-mode: active | auto | disabled | inactive
Valeur(s) possible(s) pour cette propriété :

Quatre constantes sont possibles: active | auto | disabled | inactive.

Valeur initiale

auto

Exemple
input {ime-mode: active}
S'applique à

Eléments input et textarea.

Javascript
[window.]document .getElementById("elementID") .style .imeMode
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


layer-background-color, layer-background-image

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

layer-background-color,
layer-background-image

Hérité : non - Compatibilité : Netscape Navigator uniquement.
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces propriétés spécifiques à Navigator 4 permettent d'étendre, par l'intermédiaire du remplissage, l'image et la couleur d'arrière-plan d'un élément positionné jusqu'à sa bordure. Les valeurs sont identiques à celles des propriétés background-color et background-image de CSS. Reportez-vous à background-color, background-image et padding.

Autres propriétés appartenant à la même famille :

background (pour définir en une seule fois tout ce qui se rattache au fond)
background-attachment (précise si le fond défile avec le contenu ou non)
background-image (définit l'image placée en fond de bloc)
background-position (définit la position de l'image de fond)
background-position-x (définit la position horizontale de l'image de fond)
background-position-y (définit la position verticale de l'image de fond)
background-repeat (précise si l'image doit être répétée ou non)
background-color (définit une couleur de fond pour un élément)
layer-background-image (Image d'arrière plan et de la bordure dans Netscape Navigator)
layer-background-color (Couleur d'arrière plan et de la bordure dans Netscape Navigator)

et pour des indications générales sur l'utilisation de ces propriétés :
Pompage ou MammouthLand

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


layout-flow

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

layout-flow

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Destiné principalement aux langues qui affichent les caractères sous formes de phrases verticales, cette propriété contrôle la progression du contenu, de gauche à droite ou de droite à gauche. Microsoft recommande d'utiliser à la place la propriété writing-mode.

Syntaxe CSS
layout-flow: horizontal | vertical-ideographic
Valeur(s) possible(s) pour cette propriété :

Deux constantes sont possibles: horizontal | vertical-ideographic.

Valeur initiale

horizontal

Exemple
body {layout-flow: vertical-ideographic}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .layoutFlow
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


layout-grid

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

layout-grid

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété vous permet de définir un ou plusieurs propriétés de grille de présentation (layoutGridChar, layoutGridLine, layoutGridMode et layoutGridType) avec une instruction d'affectation. Ces propriétés sont surtout utilisés pour les contenus en langues asiatiques.

Syntaxe CSS
layout-grid: layout-grid-mode | layout-grid-type | layout-grid-line |
layout-grid-char
Valeur(s) possible(s) pour cette propriété :

Pour la syntaxe et des exemples de types de valeur applicables aux propriétés de police et de ligne, voir la section consacrée à la propriété en question.

Valeur initiale

both loose none none

Exemple
body {layout-grid: both fixed 14px 14px}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .layoutGrid
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


layout-grid-char

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

layout-grid-char

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle la taille de la grille des caractères d'une langue asiatique pour les éléments de niveau bloc.

Syntaxe CSS
layout-grid-char: length | auto | none
Valeur(s) possible(s) pour cette propriété :

Longueur exprimée sous la forme d'une unité de mesure absolue ou d'un pourcentage. Ou l'une des constantes suivantes: auto | none.

Valeur initiale

none

Exemple
body {layout-grid-mode:both; layout-grid-char: 14px}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .layoutGridChar
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


layout-grid-line

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

layout-grid-line

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle la hauteur de ligne de la grille des caractères d'une langue asiatique pour les éléments de niveau bloc.

Syntaxe CSS
layout-grid-line: longueur | auto | none
Valeur(s) possible(s) pour cette propriété :

Longueur exprimée sous la forme d'une unité de mesure absolue ou d'un pourcentage. Ou l'une des constantes suivantes: auto | none.

Valeur initiale

none

Exemple
body {layout-grid-mode:both; layout-grid-line: 14px}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .layoutGridLine
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


layout-grid-mode

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

layout-grid-mode

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si la grille des caractères d'une langue asiatique doit être à une ou deux dimensions.

Syntaxe CSS
layout-grid-mode: constante
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes suivantes: both | char (pour les éléments internes) | line (pour les éléments de niveau bloc) | none.

Valeur initiale

both

Exemple
body {layout-grid-mode:both}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .layoutGridMode
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


layout-grid-type

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

layout-grid-type

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine la façon dont les grilles de présentation répondent aux caractères de largeur variable.

Syntaxe CSS
layout-grid-type: Constante
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes suivantes: fixed | loose | strict.

Valeur initiale

fixed

Exemple
div.kor {layout-grid-type:strict}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .layoutGridType
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


left

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

left

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les éléments positionnables, définit la position du bord gauche du cadre d'un élément (contenu plus remplissage, bordure et/ou marge de gauche) par rapport au bord gauche du conteneur père. Dans le cas d'un élément à positionnement relatif, le décalage est calculé par rapport au côté gauche de l'emplacement où l'élément devrait normalement apparaître.

Syntaxe CSS
left: longueur | pourcentage | auto
Valeur(s) possible(s) pour cette propriété :

Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur.

Vous pouvez également spécifier un pourcentage, qui sera calculé par rapport à la largeur du cadre parent immédiat.

Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage horizontal (à gauche) de l'élément par rapport à sa position naturelle dans le cadre destiné à le recevoir.

Valeur initiale

auto

Exemple
h1 {position: relative; left: 2em}
#logo {position: absolute; left: 80px; top: 30px}
S'applique à

Eléments positionnés.

Javascript
[window.]document .getElementById("elementID") .style .left
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


letter-spacing

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

letter-spacing

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit l'espacement entre les caractères à l'intérieur d'un élément. Les navigateurs définissent généralement l'interlettrage en fonction des définitions de police et de la méthode de restitution utilisée par le système d'exploitation. Pour annuler ces paramètres par défaut, il vous suffit d'affecter une valeur à la propriété letter-spacing.

Une valeur négative diminue l'interlettrage; dans ce cas, n'oubliez pas de vérifier le résultat avec différents systèmes d'exploitation.

Syntaxe CSS
letter-spacing: longueur | normal
Valeur(s) possible(s) pour cette propriété :

Les meilleurs résultats sont obtenus avec des unités basées sur la taille des caractères affichés (em et ex). La propriété normal correspond à l'interlettrage appliqué par le navigateur en l'absence d'intervention extérieure.

Valeur initiale

normal

Exemple
.tight {letter-spacing: -0.03em}
blockquote {letter-spacing: 1.1em}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .letterSpacing
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


line-break

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

line-break

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle les règles qui régissent le saut de ligne pour un texte en japonais.

Syntaxe CSS
line-break: normal | strict
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes suivantes: normal | strict.

Valeur initiale

normal

Exemple
p {letter-break: strict}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .lineBreak
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


line-height

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

line-height

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la hauteur de la zone contenant une ligne physique du contenu. La hauteur de cette ligne est normalement déterminée par la hauteur de ligne (line-height) de la plus haute police d'une ligne de texte ou par la hauteur du plus haut objet.

Syntaxe CSS
line-height: normal | nombre | longueur | pourcentage
Valeur(s) possible(s) pour cette propriété :

Si vous spécifiez la valeur normal, le navigateur calcule automatiquement l'interlignage pour la totalité de l'élément, produisant une valeur dont peuvent hériter les éléments imbriqués. Si vous spécifiez un nombre (number) supérieur à zéro, celui-ci sert de multiplicateur et est appliqué à la taille de caractères de l'élément actuel. Par conséquent, si un élément imbriqué hérite du multiplicateur de hauteur de ligne (line-height) de ses parents, ce multiplicateur est appliqué à la propriété font-size de l'élément actuel (c'est le multiplicateur qui est hérité, pas la valeur calculée du parent). Si vous spécifiez une longueur (length), celle-ci est appliquée à la hauteur de la zone de ligne. Si vous spécifiez un pourcentage (pourcentage), celui-ci sert de multiplicateur et est appliqué à la taille de caractères de l'élément actuel. Dans ce cas, les éléments imbriqués peuvent hériter de la valeur calculée.

Valeur initiale

normal

Exemple
p {line-height: normal} /* valeur par défaut du navigateur; */
p {line-height: 1.1} /* Nombre; */
p {line-height: 1.1em} /* Longueur; */
p {line-height: 110%} /* pourcentage de la taille de la police times */
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .lineHeight
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


list-style

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

list-style

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une instruction unique, jusqu'à trois propriétés de style de liste. Les propriétés qui ne sont pas explicitement définies conservent leur valeur initiale.

Ces propriétés définissent les caractéristiques d'affichage des marqueurs de liste des éléments ol et ul.

Syntaxe CSS
list-style: list-style-type || list-style-position || list-style-image
Valeur(s) possible(s) pour cette propriété :

Pour plus de détails sur les valeurs possibles des propriétés list-style-type, list-style-position et list-style-image, voir la section consacrée à chacune de ces propriétés. Vous pouvez spécifier dans la même instruction un, deux ou trois propriétés de style de liste, dans n'importe quel ordre.

Vous pouvez également consulter le site yoyodesign qui consacre un chapitre important aux listes.

Valeur initiale

Aucune.

Exemple
ul {list-style: square outside none}
S'applique à

Eléments dd, dt, li, ol et ul et tout autre élément doté de la propriété de style display:list-item.

Javascript
[window.]document .getElementById("elementID") .style .listStyle
Autres propriétés appartenant à la même famille :

list-style
list-style-image
list-style-position
list-style-type
marker-offset

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


list-style-image

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

list-style-image

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Spécifie l'adresse URL (Universal Resource Locator) d'une image à utiliser comme puce de liste. Cette propriété pouvant être héritée, sa valeur peut annuler et remplacer la valeur précédement définie dans le parent de l'élément auquel elle est appliquée.

Le site yoyodesign consacre un chapitre important aux listes.

Syntaxe CSS
list-style-image: none | uri
Valeur(s) possible(s) pour cette propriété :

La valeur uri (Universal Resource Identifier) est l'adresse URL complète ou relative (au format CSS) d'un fichier image lisible par le navigateur (bmp, jpg, gif, png, etc.)

Valeur initiale

none

Exemple
ul {list-style-image: url(images/folder.gif)}
li.file {list-style-image: url(images/doc.gif)}
S'applique à

Eléments dd, dt, li, ol et ul et tout autre élément doté de la propriété de style display:list-item.

Javascript
[window.]document .getElementById("elementID") .style.listStyleImage
Autres propriétés appartenant à la même famille :

list-style
list-style-image
list-style-position
list-style-type
marker-offset

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


list-style-position

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

list-style-position

Hérité : oui - Compatibilité : IE 4 CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si la puce doit être affichée à l'intérieur ou à l'extérieur (en retrait négatif) de la liste.

Lorsque la propriété list-style-position a pour valeur inside et que le contenu est un texte, la puce fait partie intégrante du bloc de texte. Dans ce cas, l'élément de liste est aligné normalement et la puce n'apparaît pas en retrait négatif.

Le site yoyodesign consacre un chapitre important aux listes.

Syntaxe CSS
list-style-position: inside | outside
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: inside | outside.

Valeur initiale

outside

Exemple
ul {list-style-position: inside}
S'applique à

Eléments dd, dt, li, ol et ul et tout autre élément doté de la propriété de style display:list-item.

Javascript
[window.]document.getElementById("elementID").style.listStylePosition
Autres propriétés appartenant à la même famille :

list-style
list-style-image
list-style-position
list-style-type
marker-offset

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


list-style-type

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

list-style-type

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit le type de puce à afficher pour chaque élément. Cette propriété s'applique uniquement si la valeur de list-style-image est none (ou que cette propriété n'est pas spécifié).

Les valeurs constantes disponibles pour cette propriété se divisent en deux catégories :

  • La première s'utilise avec les éléments ul et permet d'afficher des puces en forme de disque plein, de cercle vide ou de carré.
  • La seconde s'utilise avec les éléments ol et permet de produire des listes numérotées préfixées par des chiffres arabes, des chiffres romains (majuscules ou minuscules) ou des lettres de l'alphabet (majuscules ou minuscules), dans l'ordre ascendant, ainsi que des séquences de caractères supplémentaires dans d'autres langues si le navigateur et le système d'exploitation prennent ces langues en charge.

Le site yoyodesign consacre un chapitre important aux listes.

Syntaxe CSS
list-style-type: listStyleType
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes, en fonction du type d'éléments de liste.

Pour ul: circle | disc | square.

Pour ol: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha.

Valeur initiale

disc (pour ul de premier niveau); decimal (pour ol).

Exemple
ul {list-style-type: circle}
li {list-style-type: upper-roman}
S'applique à

Eléments dd, dt, li, ol et ul et tout autre élément doté de la propriété de style display:list-item.

Javascript
[window.]document .getElementById("elementID") .style .listStyleType
Autres propriétés appartenant à la même famille :

list-style
list-style-image
list-style-position
list-style-type
marker-offset

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


margin

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

margin

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une seule instruction, plusieurs marges (jusqu'à quatre) d'un élément. Une marge est un espace vide situé à l'extérieur de la bordure d'un élément et qui sépare ce dernier des éléments avoisinants ou imbriqués, surtout ceux dotés eux-mêmes de bordures.

Vous pouvez spécifier entre une et quatre valeurs de marge, séparées par des espaces. Le nombre de valeurs spécifiées détermine à quelles marges ces valeurs doivent être appliquées.

Syntaxe CSS
margin: épaisseur | auto {1,4}
Valeur(s) possible(s) pour cette propriété :

Cette propriété accepte une, deux, trois ou quatre valeurs, selon le nombre et le type de marges que vous souhaitez définir. La propriété "épaisseur"peut avoir pour valeur une longueur, un pourcentage de la taille de l'élément parent immédiat ou la constante auto. Les valeurs spécifiées sont interprétées de la façon suivante:

Nombre de valeurs | Effet
1 | La valeur est appliquée aux quatre marges
2 | La première valeur est appliquée aux marges du haut et du bas, et la seconde valeur aux marges de droite et de gauche
3 | La première valeur est appliquée à la marge du haut, la seconde aux marges de droite et de gauche, et la troisième à la marge du bas
4 | Chaque valeur est appliquée, respectivement, à la marge du haut, de droite, du bas et de gauche
Valeur initiale

0

Exemple
p.highlight {margin: 10px 20px}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .margin
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


margin-bottom, margin-left, margin-right, margin-top

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

margin-bottom, margin-left,
margin-right, margin-top

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces propriétés permettent de définir individuellement les quatre marges d'un élément. Une marge est un espace situé à l'extérieur de la bordure d'un élément et qui n'est pas compté dans la largeur ou la hauteur de ce dernier.

Syntaxe CSS
margin-bottom: épaisseur | auto
margin-left: épaisseur| auto
margin-right: épaisseur| auto
margin-top: épaisseur| auto
Valeur(s) possible(s) pour cette propriété :

La propriété "épaisseur" peut avoir pour valeur une longueur, un pourcentage de la taille de l'élément parent immédiat ou la constante auto.

Valeur initiale

0

Exemple
blockquote {margin-left: 20; margin-top: 10}
#narrowCol {margin-left: 30%; margin-right: 30%}
S'applique à

Tous les éléments.

Javascript
[window.]document.getElementById("elementID") .style .marginBottom
[window.]document.getElementById("elementID") .style .marginLeft
[window.]document.getElementById("elementID") .style .marginRight
[window.]document.getElementById("elementID") .style .marginTop
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


marker-offset

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

marker-offset

Hérité : non - Compatibilité : Opera uniquement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle l'espace entre les marqueurs d'éléments d'une liste (qui occupent leur propre cadre dans le modèle de cadre CSS) et le cadre qui contient le texte des éléments de liste. Exige que les valeurs des éléments de la liste soient réglées pour définir un marker de style affichage.

Syntaxe CSS
marker-offset: longueur | auto
Valeur(s) possible(s) pour cette propriété :

Longueur ou la constante auto.

Valeur initiale

auto

Exemple
li:before {display:marker; marker-offset:4em}
S'applique à

Répertorie les éléments réglés sur le mode d'affichage marker (généralement avec une pseudo-classe :before ou :after).

Autres propriétés appartenant à la même famille :

list-style
list-style-image
list-style-position
list-style-type
marker-offset

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


marks

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

marks

Hérité : non - Compatibilité : Opera 7 uniquement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété de contexte de page détermine si la page doit être affichée avec des repères de rognage ou de cadrage. Cette propriété doit être défini dans une règle @page.

Syntaxe CSS
marks: markType | none
Valeur(s) possible(s) pour cette propriété :

Les constantes suivantes sont disponibles pour la propriété markType: crop | cross. crop marque l'endroit où les pages doivent être rognées, cross est utilisé pour l'alignement et le cadrage.

Valeur initiale

none

Exemple
@page {marks: crop}
S'applique à

Contexte de page.

Javascript
[window.]document .getElementById("elementID") .style.marks
Autres propriétés appartenant à la même famille :

page-break-before
page-break-after
page-break-inside
size
widows
orphan
marks
page

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


max-height, min-height

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

max-height,
min-height

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 6 (voir texte), 7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces propriétés vous permettent de définir la hauteur maximale et/ou minimale d'un élément. Vous pouvez définir ces limites quelle que soit la hauteur résultant du flux naturel du contenu.

Lorsque vous définissez la propriété max-height d'un élément dont le contenu peut excéder ce maximum, vous devez également affecter la valeur hidden à la propriété de style, afin de rogner ce contenu superflu. Dans le cas contraire, le contenu excédentaire va déborder dans le contenu des éléments subséquents.

Internet Explorer 6 pour Windows prend uniquement en charge la propriété min-height; il est de plus limité aux éléments td, th et tr dans un tableau dont la propriété de style table-layout est réglé sur fixed. Cette procédure est contraire aux spécifications CSS2; ces propriétés n'auront donc aucune incidence sur les éléments de tableau. Par conséquent, les paramètres min-height que vous créez pour les éléments td, th ou tr dans IE 6 n'ont aucune incidence sur les autres navigateurs.

IE 7 et les autres navigateurs interprêtent ces propriétés de façon correcte.

Le site AlsaCreations a publié une page consacrée à ces propriétés et explique comment les voir interprêtées par IE6.

Syntaxe CSS
max-height: longueur | pourcentage | none
min-height: longueur| pourcentage | none
Valeur(s) possible(s) pour cette propriété :

La valeur peut être un pourcentage, lequel sera calculé par rapport au conteneur de l'élément. La valeur none supprime toutes les contraintes, et le flux du contenu est donc naturel. La longueur peut être spécifiée en px, em, etc.

Valeur initiale

none (max-width); none (min-width).

S'applique à

Reportez-vous au premier paragraphe.

Javascript
[window.]document.getElementById("elementID") .style .minHeight
[window.]document .getElementById("elementID") .style .maxHeight
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


max-width, min-width

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

max-width,
min-width

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces propriétés vous permettent de définir la largeur minimale et/ou maximale d'un élément. Vous pouvez définir ces limites quelle que soit la largeur résultant du flux naturel du contenu à l'intérieur du conteneur parent.

Le site AlsaCreations a publié une page consacrée à ces propriétés et explique comment les voir interprêtées par IE6.

Syntaxe CSS
max-width: longueur | pourcentage | none
min-width: longueur | pourcentage | none
Valeur(s) possible(s) pour cette propriété :

La valeur peut être un pourcentage, lequel sera calculé par rapport au conteneur de l'élément. La valeur none supprime toutes les contraintes, et le flux de contenu est donc naturel. La longueur peut être spécifiée en px, em, etc.

Valeur initiale

none (max-width); none (min-width).

S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .minWidth
[window.]document .getElementById("elementID") .style .maxWidth
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


-moz-border-radius

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

-moz-border-radius

Hérité : non - Compatibilité : Mozilla uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir le rayon d'un ou plusieurs coins de bordure. Le nombre de valeurs spécifiées détermine à quels côtés de la bordure ces valeurs doivent être appliquées.

Les valeurs possibles pour cette propriété diffèrent des valeurs de la propriété border-radius figurant dans la norme préliminaire de CSS3.

Les membres du forum Alsacreations ont tenté de mettre en place des solutions compatibles avec Internet Explorer.

Syntaxe CSS
-moz-border-radius: radius {1,4}
Valeur(s) possible(s) pour cette propriété :

Vous pouvez définir un rayon d'angle de bordure au moyen d'une mesure de longueur (la longueur du rayon du cercle imaginaire qui a produit le coin arrondi). Plus la valeur est élevée, plus les angles seront arrondis. Le pixel est l'unité de mesure la plus appropriée pour l'affichage écran. Vous pouvez également utiliser une valeur de pourcentage comprise entre 0% (pas d'arrondi) à 50% (arrondi maximal). Ce bord arrondi ne rogne pas le contenu de l'élément.

Cette propriété accepte une, deux, trois ou quatre valeurs radius, selon le nombre de coins et les coins spécifiques auxquels vous souhaitez appliquer l'arrondi. Les valeurs spécifiées sont interprétées comme l'indique le tableau suivant.

Nombre de valeurs | Effet
1 | La valeur spécifiée est appliquée aux quatre coins.
2 | La première valeur est appliquée aux coins supérieur gauche et inférieur droit, et la seconde, aux coins supérieur droit et inférieur gauche
3 | La première valeur est appliquée au coin supérieur gauche, la deuxième aux coins supérieur droit et inférieur gauche, et la troisième, au coin inférieur droit
4 | Les angles supérieur gauche, supérieur droit, inférieur droit et inférieur gauche sont respectivement définis
Valeur initiale

0

Exemple
div.hotbox {-moz-border-radius:20px}
div.circle {-moz-border-radius:50%}
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


-moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

-moz-border-radius-bottomleft,
-moz-border-radius-bottomright,
-moz-border-radius-topleft,
-moz-border-radius-topright

Hérité : non - Compatibilité : Mozilla uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Permet de définir un coin arrondi pour une bordure. Les valeurs possibles pour cette propriété diffèrent des valeurs de la propriété border-radius figurant dans la norme préliminaire de CSS3.

Syntaxe CSS
-moz-border-radius-bottomleft: radius
-moz-border-radius-bottomright: radius
-moz-border-radius-topleft: radius
-moz-border-radius-topright: radius
Valeur(s) possible(s) pour ces propriétés :

Reportez-vous à -moz-border-radius.

Valeur initiale

0

Exemple
div.bizarro {-moz-border-radius-topright:10%; -moz-border-radius-bottomright:10% }
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

border-bottom-color, border-top-color, border-left-color, border-right-color (pour définir la couleur d'un seul bord d'un cadre)
border-bottom-style, border-top-style, border-left-style, border-right-style (pour définir le style d'un seul bord d'un cadre)
border-bottom-width, border-top-width, border-left-width, border-right-width (pour définir l'épaisseur d'un seul bord d'un cadre)
border-bottom, border-top, border-left, border-right, (pour définir toutes les caractéristiques d'un seul bord d'un cadre)
border-color (pour définir la couleur d'un cadre)
border-style (pour définir le style d'un cadre)
border-width (pour définir l'épaisseur d'un cadre)
border (pour définir toutes les caractéristiques d'un cadre).
-moz-border-radius, -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright (propriétés propres à Mozilla pour définir les formes d'angle d'un cadre).

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


-moz-opacity

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

-moz-opacity

Hérité : non - Compatibilité : Mozilla uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle le niveau d'opacité de l'élément. Plus la valeur est basse, plus l'élément sera transparent. Il s'agit de l'ancienne version propriétaire de Mozilla pour ce filtre.

Mozilla et Firefox sont aujourd'hui compatible avec la propriété CSS 3 opacity qu'il est préférable d'utiliser. Consulter également cette propriété pour en savoir plus sur son équivalence pour Internet Explorer.

Syntaxe CSS
-moz-opacity: Valeur
Valeur(s) possible(s) pour cette propriété :

Le niveau d'opacité est déterminé par un nombre à virgule flottante compris entre 0.0 et 1.0. La valeur 1.0 produit un affichage totalement opaque. Vous pouvez également utiliser des valeurs de pourcentage comprises entre 0% et 100%, mais la recommandation CSS3 proposée pour la propriété opacity n'accepte que des nombres.

Valeur initiale

1

Exemple
div#watermark {-moz-opacity:0.4}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style.MozOpacity
Autres propriétés appartenant à la même famille :

cursor
filter(new style)
filter(old style) -!important
opacity
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkShadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
white-space

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


opacity

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

opacity

Hérité : oui - Compatibilité : tous les navigateurs sauf IE - CSS 3
Classement alphabétique :

<!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

L'opacité d'un élément est le contraire de sa transparence : quand l'élément est "opaque" (valeur 1.0) il est visible, si vous fixez une valeur de 0, il devient totalement transparent, c'est à dire invisible. Une opacité de 90% (valeur 0.9) équivaut à une transparence de 10%.

Cette propriété est définie dans la norme CSS 3 mais elle est déjà supportée par Firefox (depuis sa version 1.7), Opera (depuis sa version 9) et Safari.

Les versions de Firefox/Mozilla antérieures à la version 1.7 ne supportaient pas cette propriété mais proposaient la propriété équivalente -moz-opacity qu'il peut être souhaitable d'intégrer dans vos définitions afin de rendre votre code compatible avec ces anciennes versions.

Internet Explorer ne supporte pas cette propriété mais permet d'obtenir un résultat équivalent avec la propriété filter en écrivant par exemple "filter:alpha(opacity= 50);" pour une opacité de 50%.

Pour plus de détail sur cette propriété, consultez Texte opaque sur fond translucide, ainsi que les pages en anglais, trés illustrées, de mandarindesign.

Syntaxe CSS
opacity: valeur

Pour obtenir une meilleure compatibilité avec les anciennes versions de Firefox et avec Explorer, écrivez :

opacity: valeur;
filter:alpha(opacity=valeur*100);
-moz-opacity:valeur;

Valeur(s) possible(s) pour cette propriété :
entre 0.0 (transparence complète) et 1.0 (opacité complète)
Valeur initiale

1.0

Exemple
 .semi-transparent
{
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .opacity

et pour Internet Explorer :

[window.]document .getElementById("elementID") .filters .alpha .opacity

Autres propriétés appartenant à la même famille :

cursor
filter(new style)
filter(old style) -!important
opacity
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkShadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
white-space

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


orphans

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

orphans

Hérité : oui - Compatibilité : Opera 7 seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette fonction est utilisée pour contrôler l'impression de la page. Elle définit le nombre minimum de lignes d'un paragraphe à afficher en bas d'une page avant un saut de page. Pour définir le nombre minimum de lignes à afficher en haut d'une page après un saut de page, voir la propriété widows.

Syntaxe CSS
orphans: NombreDeLignes
Valeur(s) possible(s) pour cette propriété :

Nombre entier représentant le nombre minimum de lignes.

Valeur initiale

2

S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style.orphans
Autres propriétés appartenant à la même famille :

page-break-before
page-break-after
page-break-inside
size
widows
orphan
marks
page

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


outline

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

outline

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une seule instruction, la largeur, le style et/ou la couleur des quatre bords du contour d'un élément. Les propriétés qui ne sont pas explicitement définis adoptent leur valeur initiale.

Il existe deux différences principales entre un contour et une bordure. En premier lieu, le contour n'occupe aucun espace dans le modèle de cadre CSS. Il ne crée donc aucun décalage horizontal ou vertical. Le contour est "sur-imprimé" sur l'élément, juste au-delà du rectangle de la bordure. En second lieu, CSS ne limite pas le contour à une forme rectangulaire; par exemple, le contour peut avoir la forme irrégulière d'un paragraphe non justifié.

Syntaxe CSS
outline: border-color || border-style || outline-width
Valeur(s) possible(s) pour cette propriété :

Reportez-vous aux propriétés respectifs dans les sections suivantes.

Valeur initiale

Aucun.

Exemple
blockquote {outline: darkred ridge 5px}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .outline
Autres propriétés appartenant à la même famille :

outline
outline-color
outline-style
outline-width

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


outline-color

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

outline-color

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle la couleur du contour d'un élément.

Pour en savoir plus sur la différence entre "border" et "outline" voir la propriété outline.

Syntaxe CSS
outline-color: couleur
Valeur(s) possible(s) pour cette propriété :

Valeur de couleur CSS. Une valeur contrôle tous les côtés du contour. Les spécifications CSS exigent également la constante invert, qui exécute une inversion algorithmique de la couleur d'arrière-plan.

Pour plus de détails sur les valeurs possibles pour cette propriété, consultez notre page consacrée à la couleur.

Valeur initiale

Les spécifications CSS 2 proposent d'utiliser par défaut la valeur invert.

Exemple
h2 {outline-color: salmon}
div {outline-color: rgb(0,0,255)}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .outlineColor
Autres propriétés appartenant à la même famille :

outline
outline-color
outline-style
outline-width

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


outline-style

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

outline-style

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle le style du contour d'un élément. Les motifs de bords sont identiques aux styles de bordure.

Pour en savoir plus sur la différence entre "border" et "outline" voir la propriété outline.

Syntaxe CSS
outline-style: borderStyle
Valeur(s) possible(s) pour cette propriété :

Les valeurs de style sont des constantes associées à des méthodes spécifiques d'affichage des bordures. Reportez-vous à border-style pour une liste et des exemples illustration. Une même valeur contrôle tous les bords du contour.

Valeur initiale

none

Exemple
h2 {outline-style: solid}
div {outline-style: groove}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .outlineStyle
Autres propriétés appartenant à la même famille :

outline
outline-color
outline-style
outline-width

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


outline-width

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

outline-width

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle l'épaisseur du contour d'un élément. Pour éviter que le contenu environnant s'affiche sous le contour, vous devriez envisager d'ajouter une marge autour de l'élément.

Pour en savoir plus sur la différence entre "border" et "outline" voir la propriété outline.

Syntaxe CSS
outline-width: thin | medium | thick | longueur
Valeur(s) possible(s) pour cette propriété :

Trois constantes, thin | medium | thick, permettent au navigateur de définir le nombre exact de pixels à utiliser pour afficher le contour. Pour une plus grande précision, vous pouvez aussi spécifier une longueur (pour en savoir plus sur les valeurs de longueur, reportez-vous au début de ce chapitre). Une même valeur contrôle tous les bords du contour.

Valeur initiale

medium

Exemple
h1 {outline-style: ridge; outline-width: 5px}
div {outline-style: solid; outline-width: 2px}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .outlineWidth
Autres propriétés appartenant à la même famille :

outline
outline-color
outline-style
outline-width

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


overflow

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

overflow

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la façon dont l'élément doit traiter un contenu dont les dimensions dépassent la hauteur et/ou la largeur spécifiées du conteneur. A l'exception de certains types de contenus qui exigent une largeur fixe (éléments pre, par exemple), un élément respecte par défaut la propriété width et règle tout problème de débordement en jouant sur la hauteur. Il est assez dangereux dans le cadre de la compatibilité entre les navigateurs d'attribuer la propriété overflow à l'élément body pour essayer de contrôler l'affichage des barres de défilement. Effectuez des tests approfondis sur votre code.

Si cette propriété a pour valeur visible, le conteneur est redimensionné en fonction de la largeur (si celle-ci est fixe) et de la hauteur du contenu. Si des bordures, des marges et un remplissage ont été définis pour l'élément, ils sont conservés dans le bloc de contenu redimensionné. Si la hauteur et la largeur, ainsi qu'une image ou une couleur d'arrière-plan, sont spécifiées pour l'élément, et si le contenu dépasse la taille définie, les résultats varient avec la famille de navigateurs. IE pour Windows étend la hauteur de l'arrière-plan pour pouvoir accueillir le contenu; le contenu suivant sera repoussé vers le bas pour accueillir le contenu excédentaire.

Si la propriété a pour valeur hidden, le bloc de contenu doit respecter les paramètres de hauteur et de largeur du conteneur, ce qui peut se traduire, dans certains cas, par un détourage du contenu. Les bordures et le remplissage sont conservés, mais il se peut que les marges disparaissent le long des bords détourés. Cette valeur n'entraîne pas l'affichage de barres de défilement.

Si la propriété a pour valeur scroll, des barres de défilement horizontal et vertical s'affichent normalement dans le rectangle du bloc de contenu, même si elles ne sont pas nécessaires. Ces barres ne sont activées que s'il est nécessaire de faire défiler le contenu dans un sens ou dans l'autre.

Si la propriété a pour valeur auto, les barres de défilement sont affichées uniquement si le contenu du bloc l'exige. En pratique, les navigateurs ajoutent uniquement une barre de défilement vertical lorsque le contenu est de type texte et peut s'ajuster à la largeur spécifiée de son conteneur.

Syntaxe CSS
overflow: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: auto | hidden | scroll | visible.

Valeur initiale

visible

Exemple
div.aside {position: absolute; top: 200px; left: 10px; height: 100px;
width: 150px; overflow: scroll}
S'applique à

Eléments de niveau bloc, éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) et éléments positionnés.

Javascript
[window.]document .getElementById("elementID") .style .overflow
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


overflow-x, overflow-y

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

overflow-x,
overflow-y

Hérité : non - Compatibilité : IE 5,6,7,8 uniquement.
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la façon dont l'élément doit traiter un contenu dont les dimensions dépassent la hauteur (x) ou la largeur (y) spécifiées du conteneur. L'utilisation de cette propriété IE/Windows est identique à celle de la propriété overflow standard, mais elle s'effectue le long d'un seul axe. Ce point est particulièrement utile si vous ne voulez afficher qu'une barre de défilement vertical ou horizontal avec un élément. Reportez-vous à la présentation de la propriété overflow.

Syntaxe CSS
overflow-x: constante
overflow-y: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: auto | hidden | scroll | visible.

Valeur initiale

visible

Exemple
body {overflow-x:hidden; overflow-y: scroll}
S'applique à

Eléments de niveau bloc, éléments remplacés (IMG, INPUT, TEXTAREA, SELECT et OBJECT) et éléments positionnés.

Javascript
[window.]document .getElementById("elementID") .style .overflowX
[window.]document .getElementById("elementID") .style .overflowY
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


padding

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

padding

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari - IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet de définir, à l'aide d'une seule instruction, les largeurs de remplissage des bords (jusqu'à quatre) d'un élément.

Le remplissage est l'espace vide qui entoure la zone de contenu d'un élément; cet espace s'étend jusqu'aux bordures de l'élément, s'il en existe, mais n'inclut pas ces dernières. Le remplissage reprend la couleur ou l'image d'arrière-plan de l'élément.

Lorsque vous insérez du remplissage dans un élément, vous augmentez la taille de son rectangle visible sans modifier pour autant la taille du bloc de contenu.

Vous pouvez spécifier entre une et quatre valeurs de remplissage, séparées par des espaces. Le nombre de valeurs spécifiées détermine à quels côtés doivent s'appliquer ces valeurs.

Syntaxe CSS
padding: valeur(s) {1,4}
Valeur(s) possible(s) pour cette propriété :

Cette propriété accepte une, deux, trois ou quatre valeurs, selon le nombre et le type de côtés auxquels vous souhaitez appliquer le remplissage. La propriété paddingThickness peut avoir pour valeur une longueur ou un pourcentage de la taille de l'élément parent immédiat. Les valeurs spécifiées sont interprétées de la façon suivante.

Nombre de valeurs | Effet
1 | La valeur de remplissage spécifiée est appliquée aux quatre côtés
2 | La première valeur spécifiée est appliquée aux côtés supérieur et inférieur, et la seconde valeur aux côtés droit et gauche
3 | La première valeur spécifiée est appliquée au côté supérieur, la seconde aux côtés droit et gauche, et la troisième au côté inférieur
4 | Chaque valeur spécifiée est appliquée, respectivement, au côté supérieur, droit, inférieur et gauche
Valeur initiale

0; IE pour Windows spécifie une valeur par défaut de 1 pour les éléments td et th.

Exemple
p.highlight {padding: 10px 20px}
S'applique à

Tous les éléments.

Eléments body, caption, div, iframe, marquee, table, td, textarea, tr pour IE 5 et ses versions antérieures pour Windows.

Javascript
[window.]document .getElementById("elementID") .style .padding
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


padding-bottom, padding-left, padding-right, padding-top

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

padding-bottom, padding-left,
padding-right, padding-top

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces quatre propriétés permettent de définir individuellement le remplissage à appliquer à chaque côté d'un élément. Le remplissage est l'espace vide qui entoure la zone de contenu d'un élément; cet espace s'étend jusqu'aux bordures de l'élément, s'il en existe, mais n'inclut pas ces dernières.

Le remplissage reprend la couleur ou l'image d'arrière-plan de l'élément.

Lorsque vous insérez du remplissage dans un élément, vous augmentez la taille de son rectangle visible sans modifier pour autant la taille du bloc de contenu.

Syntaxe CSS
padding-bottom: valeur
padding-left: valeur
padding-right: valeur
padding-top: valeur
Valeur(s) possible(s) pour cette propriété :

La valeur peut être une longueur ou un pourcentage de la taille de l'élément parent immédiat.

Valeur initiale

0; IE pour Windows spécifie une valeur par défaut de 1 pour les éléments td et th.

Exemple
blockquote {padding-left: 20; padding-top: 10}
#narrowCol {padding-left: 30%; padding-right: 30%}
S'applique à

Tous les éléments.

Eléments body, caption, div, iframe, marquee, table, td, textarea, tr pour IE 5 et ses versions antérieures pour Windows.

Javascript
[window.]document .getElementById("elementID") .style .paddingBottom
[window.]document .getElementById("elementID") .style .paddingLeft
[window.]document .getElementById("elementID") .style .paddingRight
[window.]document .getElementById("elementID") .style .paddingTop
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


page

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

page

Hérité : oui - Compatibilité : Opera 7 uniquement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette fonction est utilisée pour contrôler l'impression de la page. Elle vous permet de relier un élément de niveau bloc à une règle @page par l'intermédiaire d'un identifiant attribué à la règle. L'implémentation des règles @page est encore rudimentaire, mais la propriété de page, dont la valeur correspond à l'identifiant de la règle @page voulue, est en place pour adoption ultérieure.

Syntaxe CSS
page: pageRuleIdentifier | auto
Valeur(s) possible(s) pour cette propriété :

La valeur pageRuleIdentifier correspond au nom donné à une règle @page dans le même document.

Valeur initiale

auto

Exemple
table#results {page: printTable}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .page
Autres propriétés appartenant à la même famille :

page-break-before
page-break-after
page-break-inside
size
widows
orphan
marks
page

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


page-break-after, page-break-before

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

page-break-after,
page-break-before

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit l'endroit où doivent être placés les sauts de page lors de l'impression du document.

Attention : ces sauts de page ne sont appliqué que lors de l'impression, ils ne sont pas visibles dans un navigateur visuel comme ils le sont dans les applications de traitement de texte; à l'écran, les contenus longs défilent sans interruption.

Le traitement correct des pages sur les imprimantes repose sur le concept CSS2 de la zone de page. Les propriétés de style relatifs aux sauts de page permettent au navigateur de contrôler le contenu exact de chaque zone de page. Sans intervention extérieure (ou si cette propriété a pour valeur auto), le navigateur divise les pages pour l'impression en plaçant autant de contenu sur chaque page que celle-ci peut en contenir.

Pour insérer un saut de page forcé avant un élément, vous devez utiliser la propriété page-break-before:always pour cet élément. De la même façon, pour insérer un saut de page forcé après un élément, vous utiliserez la propriété page-break-after:always.

Les valeurs left et right supposent que le navigateur est capable de différencier les pages de gauche des pages de droite pour l'impression recto verso (comme indiqué dans les spécifications CSS2). Comme vous définirez sans doute des marges différentes pour chaque côté de la gouttière, le paramétrage des sauts de page au début d'une nouvelle section nécessite l'insertion de sauts de page suffisants pour que chaque nouvelle section commence sur une nouvelle page.

Syntaxe CSS
page-break-after: Constante
page-break-before: Constante
Valeur(s) possible(s) pour cette propriété :

Depuis sa version 4, Internet Explorer reconnaît quatre constantes: always | auto | left | right (mais traite left et right comme always). Les spécifications CSS2 y ajoutent la valeur avoid, qui demande au navigateur d'éviter, dans la mesure du possible, de placer un saut de page dans un élément.

Valeur initiale

auto

Exemple
div.titlePage {page-break-before: always; page-break-after: always}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .pageBreakAfter
[window.]document .getElementById("elementID") .style .pageBreakBefore
Autres propriétés appartenant à la même famille :

page-break-before
page-break-after
page-break-inside
size
widows
orphan
marks
page

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


page-break-inside

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

page-break-inside

Hérité : oui - Compatibilité : Opera 7 uniquement - CSS 2

Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si un saut de page imprimée est autorisé dans un élément. Particulièrement utile pour définir un conteneur contenant les éléments de bloc que vous voulez imprimer sur la même page.

Syntaxe CSS
page-break-inside: CONSTANTE
Valeur(s) possible(s) pour cette propriété :

L'une des deux constantes suivantes: avoid | auto.

Valeur initiale

auto

Exemple
div.together {page-break-inside: avoid}
S'applique à

Eléments de niveau bloc.

Autres propriétés appartenant à la même famille :

page-break-before
page-break-after
page-break-inside
size
widows
orphan
marks
page

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


pause

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

pause

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette forme courte de propriété permet, pour les feuilles de style audio, de définir à l'aide d'une seule instruction les propriétés pause-after et pause-before. Vous pouvez spécifier une ou deux valeurs pour cette propriété.

Syntaxe CSS
pause: durée | pourcentage {1,2}
Valeur(s) possible(s) pour cette propriété :

Cette propriété accepte une ou deux valeurs, selon que vous voulez affecter une valeur identique ou différente à pause-before et à pause-after. Si vous spécifiez une seule valeur pour la propriété pause, elle est appliquée à la fois à pause-before et à pause-after. Si vous spécifiez deux valeurs, la première est appliquée à pause-before et la seconde à pause-after.

Les durées (time) sont des nombres à virgule flottante suivis de l'unité ms (millisecondes) ou s (secondes). Il s'agit donc de durées absolues. Les pourcentages (percentage) sont calculés par rapport au nombre de mots par minute défini par la propriété speech-rate. La propriété speech-rate contrôle la durée (moyenne) d'un mot; de ce fait, si la propriété pause a pour valeur 100%, la durée de la pause est identique à la durée d'un mot; si la propriété a pour valeur 50%, la durée de la pause représente la moitié de la durée du mot.

Valeur initiale

Varie en fonction du navigateur.

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


pause-after, pause-before

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

pause-after, pause-before

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ces propriétés définissent, pour les feuilles de style audio, la durée de la pause à marquer avant ou après l'élément actuel. Vous pouvez appliquer ces deux propriétés au même élément pour marquer une pause avant et après ce dernier.

Syntaxe CSS
pause-after: time | pourcentage
pause-before: time | pourcentage
Valeur(s) possible(s) pour cette propriété :

Les durées (time) sont des nombres à virgule flottante suivis de l'unité ms (millisecondes) ou s (secondes). Il s'agit donc de durées absolues. Les pourcentages (pourcentage) sont calculés par rapport au nombre de mots par minute défini par la propriété speech-rate. La propriété speech-rate contrôle la durée (moyenne) d'un mot; de ce fait, si la propriété pause a pour valeur 100%, la durée de la pause est identique à la durée d'un mot; si la propriété a pour valeur 50%, la durée de la pause représente la moitié de la durée du mot.

Valeur initiale

Varie en fonction du navigateur.

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


pitch

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

pitch

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Ce paramètre définit, pour les feuilles de style audio, la fréquence moyenne de la voix de synthèse utilisée pour la sortie vocale.

Syntaxe CSS
pitch: fréquence | Constante
Valeur(s) possible(s) pour cette propriété :

Une fréquence peut être n'importe quel nombre positif à virgule flottante suivi de l'unité Hz (Hertz) ou kHz (kiloHertz), tel que 500Hz ou 5,5kHz, par exemple. Vous disposez également des constantes suivantes: x-low | low | medium | high | x-high. Le document de travail CSS2 dont nous disposions au moment de la rédaction de ce guide n'avait encore affecté aucune fréquence à ces constantes.

Valeur initiale

medium

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


pitch-range

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

pitch-range

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété définit, pour les feuilles de style audio, la gamme dans laquelle doit être comprise la fréquence vocale moyenne d'une voix de synthèse.

Syntaxe CSS
pitch-range: nombre
Valeur(s) possible(s) pour cette propriété :

N'importe quel nombre positif, ou zéro. La valeur 0 correspond à une voix plate, la valeur 50 à une voix normale et les valeurs supérieures à 50 à des voix animées.

Valeur initiale

50

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


play-during

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

play-during

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété précise, pour les feuilles de style audio, de quelle manière le fond sonore doit être combiné à la restitution vocale du contenu de l'élément.

Syntaxe CSS
play-during: uri [mix | repeat] | auto | none
Valeur(s) possible(s) pour cette propriété :

La valeur uri (Universal Resource Identifier) est un lien vers le fichier son à utiliser comme fond sonore (le cas échéant). Vous pouvez aussi, si vous le souhaitez, faire jouer le son d'arrière-plan de la propriété play-during de l'élément parent en même temps que le son d'arrière-plan de l'élément actuel. Si la longueur du son d'arrière-plan est plus court que le texte de l'élément, la constante repeat indique au navigateur qu'il doit répéter le son jusqu'à la fin du texte. La valeur auto indique que le son de l'élément parent doit être joué en continu. La valeur none signifie qu'aucun fond sonore (que ce soit celui de l'élément actuel ou de l'élément parent) ne doit être joué pour cet élément.

Valeur initiale

auto

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


position

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

position

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6 (sauf pour la valeur "fixed"), 7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si l'élément est positionnable, et si c'est le cas, de quel type de positionnement il s'agit. Les deux principaux types de positionnement sont définis à l'aide des valeurs relative et absolute, avec un troisième type, fixed, non reconnu par Internet Explorer 6.

Syntaxe CSS
position: Constante
Valeur(s) possible(s) pour cette propriété :

Les navigateurs et la norme CSS reconnaissent différents jeux de constantes pour cette propriété, comme illustré dans ce tableau.

La valeur static est essentiellement un élément non positionné, qui suit la séquence d'affichage normal du contenu du corps. Un élément à position fixe est positionné en fonction de la fenêtre (zone d'affichage) et reste à cet emplacement spécifié même lorsque le contenu défile.

Valeur | IE/Windows | IE/Mac
absolute | 4 | 4
fixed | s.o | 5
relative | 4 | 4
static | 4 | 4
Valeur initiale

static

S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .position
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


quotes

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

quotes

Hérité : oui - Compatibilité : FF, Moz, Opera - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine les caractères qui serviront de guillemets gauches et droits dans le texte. Le principe est le suivant: les guillemets ne sont pas inclus dans le contenu, mais ils sont générés par le navigateur sur la base d'indices contextuels (par exemple, une citation est entourée de l'élément q). Vous devez utiliser cette propriété avec la propriété content, qui, avec l'aide des pseudo-classes:before et :after, détermine la position des guillemets gauche et droit:

Syntaxe CSS
quotes: CaractèreDouverture CaractereDeFermeture [CaractèreDouverture2 CaractereDeFermeture2] | none
Valeur(s) possible(s) pour cette propriété :

Une ou deux paires de guillemets. La seconde paire (facultative) définit les symboles qui serviront pour un guillemet imbriqué. Les caractères d'entité sont interdits.

Valeur initiale

Dépend du langage du navigateur et du système.

S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .quotes
Autres propriétés appartenant à la même famille :

content
counter-increment
counter-reset
quotes

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


richness

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

richness

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété définit, pour les feuilles de style audio, la portée de la voix de synthèse à utiliser pour la restitution vocale de l'élément.

Syntaxe CSS
richness: nombre
Valeur(s) possible(s) pour cette propriété :

Nombre positif à virgule flottante représentant la portée de la voix. La valeur 50 correspond à une accentuation normale. Une valeur plus basse produit une voix moins portante, une valeur élevée une voix plus portante.

Valeur initiale

50

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


right

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

right

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les éléments positionnables, cette propriété définit la position du bord droit du cadre d'un élément (contenu plus remplissage, bordure et/ou marge de droite) par rapport au bord droit du conteneur parent immédiat. Dans le cas d'un élément à positionnement relatif, le décalage est défini par rapport au côté droit de l'emplacement où l'élément devrait normalement apparaître.

Syntaxe CSS
right: longueur | pourcentage | auto
Valeur(s) possible(s) pour cette propriété :

Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur.

Vous pouvez également spécifier un pourcentage, qui sera calculé par rapport à la largeur du cadre parent immédiat. Cependant, les résultats obtenus peuvent sembler opposés à ceux que vous escomptiez: si vous spécifiez la valeur 0%, le bord droit est aligné à droite contre le bord droit du contexte de positionnement, tandis que la valeur 100% peut complètement masquer l'élément sur la gauche.

Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage horizontal (à droite) de l'élément par rapport à sa position naturelle à l'intérieur du cadre destiné à le recevoir.

Valeur initiale

auto

S'applique à

Eléments positionnés.

Javascript
[window.]document .getElementById("elementID") .style .right
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


ruby-align

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

ruby-align

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 3
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine l'alignement du contenu dans un élément ruby.

Syntaxe CSS
ruby-align: constante | auto
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes suivantes: auto | center | distribute-letter | distribute-space | left | line-edge | right. Pour plus de détails sur les styles "ruby", rendez-vous sur http://www.w3.org/TR/css3-ruby.

Valeur initiale

auto

S'applique à

IE limite ce style aux seuls éléments ruby, mais les spécifications CSS3 préliminaires suggèrent que vous pouvez l'appliquer à tout élément contenant du texte ruby (il ne sera donc pas hérité dans ce contexte).

Javascript
[window.]document .getElementById("elementID") .style.rubyAlign
Autres propriétés appartenant à la même famille :

ruby-align
ruby-overhang
ruby-position

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


ruby-overhang

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

ruby-overhang

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 3
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine les caractéristiques de retrait du texte du contenu dans un élément ruby.

Syntaxe CSS
ruby-overhang: Constante
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes suivantes: auto | none | whitespace. Pour plus de détails sur les styles "ruby", rendez-vous sur http://www.w3.org/TR/css3-ruby.

Valeur initiale

auto

S'applique à

Eléments ruby (ou tout autre élément dont la propriété display est réglé sur ruby-text).

Javascript
[window.]document .getElementById("elementID") .style.rubyOverhang
Autres propriétés appartenant à la même famille :

ruby-align
ruby-overhang
ruby-position

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


ruby-position

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

ruby-position

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 3
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si le texte ruby imbriqué (élément rt) s'affiche sur la même ligne ou au-dessus de son texte de base ruby connexe (élément rb).

Syntaxe CSS
ruby-position: TypePosition
Valeur(s) possible(s) pour cette propriété :

IE reconnaît les constantes suivantes, above | inline, tandis que les spécifications CSS3 préliminaires préfèrent ces constantes: after | before | inline | right. Pour plus de détails sur les styles "ruby", rendez-vous sur http://www.w3.org/TR/css3-ruby.

Valeur initiale

above (IE); before (CSS3).

S'applique à

Eléments ruby (ou tout autre élément dont la propriété display est réglé sur ruby-text).

Javascript
[window.]document .getElementById("elementID") .style.rubyPosition
Autres propriétés appartenant à la même famille :

ruby-align
ruby-overhang
ruby-position

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkShadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

scrollbar-3dlight-color, scrollbar-arrow-color,
scrollbar-base-color, scrollbar-darkShadow-color,
scrollbar-face-color, scrollbar-highlight-color,
scrollbar-shadow-color, scrollbar-track-color

Hérité : non - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété non-standard ne fonctionne qu'avec Internet Explorer. Elle détermine les couleurs des composants spécifiques d'un élément de l'interface utilisateur d'une barre de défilement associé aux éléments pouvant défiler.

Vous pouvez essayer diverses combinaisons de plusieurs composants et couleurs de barres de défilement.

Syntaxe CSS
couleurs de scrollbar scrollbar-3dlight-color: couleur
scroallbar-arrow-color: couleur
scrollbar-base-color: couleur
scrollbar-darkshadow-color: couleur
scrollbar-face-color: couleur
scrollbar-highlight-color: couleur
scrollbar-shadow-color: couleur
scrollbar-track-color: couleur

Valeur(s) possible(s) pour cette propriété :

Valeurs de couleur CSS. Pour plus de détails sur les valeurs possibles pour cette propriété, consultez notre page consacrée à la couleur.

Valeur initiale

Varie en fonction des paramètres du panneau de configuration d'affichage de l'utilisateur.

Exemple
textarea {scrollbar-face-color: lightyellow}
S'applique à

Eléments applet, bdo, body, custom, div, embed, object et textarea.

Javascript
[window.]document .getElementById("elementID") .style .scrollbar3dLightColor
[window.]document .getElementById("elementID") .style .scrollbarArrowColor
[window.]document .getElementById("elementID") .style .scrollbarBaseColor
[window.]document .getElementById("elementID") .style .scrollbarDarkShadowColor
[window.]document .getElementById("elementID") .style .scrollbarFaceColor
[window.]document .getElementById("elementID") .style .scrollbarHighlightColor
[window.]document .getElementById("elementID") .style .scrollbarShadowColor
[window.]document .getElementById("elementID") .style .scrollbarTrackColor
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


size

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

size

Hérité : non - Compatibilité : Firefox/Mozilla et Opera uniquement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la taille et/ou l'orientation d'une zone de page. Destiné principalement au formatage des pages imprimées, cette propriété peut rester sans effet sur le détourage ou l'orientation du contenu à l'écran. Cette propriété doit être défini dans une déclaration @page.

Syntaxe CSS
size: [longueur {1,2}] auto | portrait | landscape
Valeur(s) possible(s) pour cette propriété :

Si vous spécifiez une ou deux valeurs de longueur, les dimensions de la zone de page deviennent « absolues » et ne changent donc pas quel soit le format de papier sélectionné; si vous ne spécifiez pas de valeur précise, la zone de page est dimensionnée en fonction du format de papier sélectionné. Si vous spécifiez une seule valeur, celle-ci est appliquée à la largeur et à la hauteur de la zone de page; si vous spécifiez deux valeurs, la première est appliquée à la largeur de la zone et la seconde à sa hauteur.

N'oubliez pas que les imprimantes imposent souvent une marge minimale autour de la zone de page imprimée. Même lorsque la propriété size a pour valeur auto, vous pouvez ajouter de l'espace autour de la zone de page en insérant une propriété margin dans la déclaration @page.

Valeur initiale

auto

Exemple
@page{size: landscape}
S'applique à

Contexte de page.

Autres propriétés appartenant à la même famille :

page-break-before
page-break-after
page-break-inside
size
widows
orphan
marks
page

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


speak

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

speak

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les feuilles de style audio, cette propriété spécifie si un navigateur à synthèse vocale doit énoncer le contenu de l'élément, et, dans l'affirmative, si cette énonciation doit se faire mot par mot ou caractère par caractère.

Syntaxe CSS
speak: constante
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes possibles suivantes: none | normal | spell-out. La valeur none signifie que la restitution vocale est désactivée. Dans ce cas, le navigateur saute le texte parlé et les pauses (voir la valeur de propriété volume:silent). La valeur normal active la restitution vocale et le texte est lu mot par mot. La valeur spell-out active la restitution vocale et le texte est lu lettre par lettre (ce qui est très utile pour les éléments abbr et acronym).

Valeur initiale

normal

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


speak-header

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

speak-header

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les navigateurs à synthèse vocale, cette propriété précise si le navigateur doit lire le nom de l'en-tête de chaque cellule de tableau avant de lire la valeur de la cellule, ou s'il doit le lire une seule fois pour toutes les cellules adjacentes partageant le même en-tête (lorsqu'il lit une colonne de haut en bas, par exemple).

Syntaxe CSS
speak-header: Fréquence
Valeur(s) possible(s) pour cette propriété :

Deux constantes sont possibles: once | always.

Valeur initiale

once

S'applique à

Eléments th.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


speak-numeral

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

speak-numeral

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété détermine, pour les feuilles de styles audio, si les nombres doivent être lus chiffre par chiffre (un quatre deux, par exemple) ou sous forme de nombres complets (cent quarante deux). La langue à utiliser est définie à l'aide de la propriété lang.

Syntaxe CSS
speak-numeral: constante
Valeur(s) possible(s) pour cette propriété :

Deux constantes sont possibles: digits | continuous.

Valeur initiale

continuous

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


speak-punctuation

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

speak-punctuation

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété détermine, pour les feuilles de style audio, si les signes de ponctuation doivent être lus comme des mots (point, par exemple) ou restitués comme des pauses ou des intonations.

Syntaxe CSS
speak-punctuation: constante
Valeur(s) possible(s) pour cette propriété :

Deux constantes sont possibles: code | none. La valeur code signifie que tout signe de ponctuation rencontré dans le texte d'un élément doit être lu comme un mot.

Valeur initiale

none

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


speech-rate

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

speech-rate

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété définit, pour les feuilles de style audio, le nombre de mots par minute que doit lire le navigateur.

Syntaxe CSS
speech-rate: MotsParMinute| Constante
Valeur(s) possible(s) pour cette propriété :

La valeur de MotsParMinute est un nombre à virgule flottante positif. Vous disposez également des constantes suivantes.

Valeur | Signification
x-slow | 80 mots par minute
slow | 120 mots par minute
medium | 180-200 mots par minute
fast | 300 mots par minute
x-fast | 500 mots par minute
slower | La vitesse actuelle, moins 40 mots par minute
faster | La vitesse actuelle, plus 40 mots par minute
Valeur initiale

medium

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


stress

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

stress

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété définit, pour les feuilles de style audio, l'accentuation (inflexion) de la voix.

Syntaxe CSS
stress: stressLevel
Valeur(s) possible(s) pour cette propriété :

La valeur stressLevel peut être n'importe quel nombre à virgule flottante positif. La valeur 50 correspond à une accentuation normale.

Valeur initiale

50

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


table-layout

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

table-layout

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari - IE 5.5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si le navigateur doit charger toutes les cellules d'un tableau et leur contenu avant de pouvoir afficher la première ligne de données ou s'il doit se baser sur les propriétés de taille de l'élément table et la largeur des cellules de la première ligne pour commencer à afficher le tableau.

Si la propriété a pour valeur auto, le navigateur doit charger toutes les cellules du tableau et leur contenu avant de pouvoir restituer la première ligne de données, ce qui entraîne un léger délai (mais relativement imperceptible) dans l'affichage du tableau. Si la propriété a pour valeur fixed, l'affichage du tableau commence plus tôt, ce qui est pratique pour les tableaux de grande taille. Si le contenu des lignes suivantes excède la taille de colonne fixe, il est normalement détouré, sauf si vous réglez la propriété de style overflow sur visible (mais cette opération risque de perturber la présentation visuelle des cellules adjacentes).

Syntaxe CSS
table-layout: Constante
Valeur(s) possible(s) pour cette propriété :

Deux constantes sont possibles: auto | fixed.

Valeur initiale

auto

S'applique à

Eléments de tableau (table).

Autres propriétés appartenant à la même famille :

border-spacing
border-collapse
caption-side
empty-cells
speak-header
table-layout

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-align

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-align

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine l'alignement horizontal du texte à l'intérieur d'un élément. Cette propriété étant hérité, vous pouvez le définir pour un conteneur afin qu'il soit appliqué à tous les éléments imbriqués dans ce dernier (élément p imbriqué dans un élément div, par exemple).

Les noms des valeurs center (centré), left (gauche) et right (droite) sont prises en charge à tous les niveaux. La valeur justify n'est pas requise par les spécifications CSS, et son implémentation dans les navigateurs n'est pas systématique (dans ce cas, elle peut être assimilée à left) mais elle fonctionne sur la plupart d'entre eux.

Syntaxe CSS
text-align: alignement
Valeur(s) possible(s) pour cette propriété :

L'une des quatre constantes suivantes: center | justify | left | right.

Valeur initiale

Varie en fonction du langage du navigateur.

Exemple
p.rightHand {text-align: right}
blockquote {text-align: justify}
S'applique à

Eléments de niveau bloc, mais l'alignement à droite fonctionne aussi avec les éléments input et textarea de type text.

Javascript
[window.]document .getElementById("elementID") .style.textAlign
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-align-last

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-align-last

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine l'alignement horizontal de la dernière ligne de texte dans un cadre de l'élément.

Syntaxe CSS
text-align-last: alignement
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes suivantes: auto | center | justify | left | right. La valeur auto reprend la propriété text-align hérité.

Valeur initiale

auto

Exemple
blockquote {text-align-last: center}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style.textAlignLast
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-autospace

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-autospace

Hérité : non - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine l'espacement entre les caractères à idéogrammes (langues asiatiques) et sans idéogrammes.

Syntaxe CSS
text-autospace: constante
Valeur(s) possible(s) pour cette propriété :

L'une des trois constantes suivantes: ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space | none.

Valeur initiale

none

Exemple
div {text-autospace: ideograph-numeric}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style.textAutospace
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-decoration

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-decoration

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit les enrichissements à appliquer au contenu d'un élément (souligné, barré, barre supérieure et clignotement). Vous pouvez spécifier plusieurs styles d'enrichissement, en les séparant par des espaces. Les navigateurs standards ignorent le paramètre blink.

Les enrichissements de texte ont une relation parent/enfant inhabituelle. Les valeurs ne sont pas héritées, mais un enrichissement appliqué à un élément est également appliqué à ses éléments imbriqués. Par conséquent, à moins d'annuler cette fonction par un autre moyen, si un élément p est souligné, par exemple, l'élément span imbriqué dans ce dernier l'est également.

Syntaxe CSS
text-decoration: constante | none
Valeur(s) possible(s) pour cette propriété :

none et les quatre constantes suivantes: blink | line-through | overline | underline, mais les navigateurs ignorent souvent blink.

Valeur initiale

none

Exemple
div.highlight {text-decoration: underline}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .textDecoration
[window.]document .getElementById("elementID") .style .textDecorationBlink
[window.]document .getElementById("elementID") .style .textDecorationLineThrough
[window.]document .getElementById("elementID") .style .textDecorationNone
[window.]document .getElementById("elementID") .style .textDecorationOverLine
[window.]document .getElementById("elementID") .style .textDecorationUnderline
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-indent

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-indent

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit le retrait à appliquer à la première ligne d'un bloc de texte (tel qu'un élément p). Cette propriété est uniquement appliqué à la première ligne de texte.

Vous pouvez utiliser une valeur négative pour appliquer un retrait négatif à la première ligne, mais dans ce cas assurez-vous que le texte ne dépasse pas la limite gauche de la fenêtre ou du cadre du navigateur.

Syntaxe CSS
text-indent: longueur | pourcentage
Valeur(s) possible(s) pour cette propriété :

Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur. Vous pouvez également spécifier un pourcentage, qui sera calculé par rapport à la largeur du cadre parent immédiat.

Valeur initiale

0

Exemple
body {text-indent: 2em}
p.firstGraphs {text-indent: 0}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .textIndent
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-justify

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-justify

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine les techniques détaillées de distribution de caractères pour tout élément de niveau bloc dont la propriété CSS text-align est réglé sur justify. Cette propriété est principalement conçu pour les langues asiatiques et non latines.

Syntaxe CSS
text-justify: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes indiquées dans le tableau suivant.

Valeur | Signification
auto | Laisse le navigateur choisir le type optimal
distribute | Similaire à newspaper, mais optimisé pour les langues asiatiques
distribute-all-lines | Justifie les lignes, dont la dernière ligne, entraînant un espacement potentiellement important entre les mots
distribute-center-last | Justifie les lignes, mais centre la dernière de ces lignes (non implémentée)
inter-cluster | Justifie les lignes pour lesquelles aucun espacement n'est défini
inter-ideograph | Justifie les lignes qui se composent d'idéogrammes
inter-word | Justifie les lignes en distribuant l'espace de remplissage entre les mots (chose courante pour les langues latines)
kashida | Justifie le script arabe en utilisant des traits allongés (IE 5.5 ou version supérieure requis)
newspaper | Justifie les lignes en distribuant un espace de remplissage entre les mots et entre les caractères
Valeur initiale

0

Exemple
div#col1 {text-align:justify; text-justify:newspaper}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .textJustify
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-kashida-space

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-kashida-space

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Concerne le texte arabe inclus dans un élément de bloc dont le style d'alignement du texte est réglé sur justify; détermine le rapport d'expansion kashida en expansion d'espace blanc.

Syntaxe CSS
text-kashida-space: longueur | pourcentage
Valeur(s) possible(s) pour cette propriété :

Vous pouvez spécifier une longueur ou un pourcentage qui sera calculé par rapport à la largeur du cadre parent immédiat.

Valeur initiale

0%

Exemple
div#col1 {text-align:justify; text-justify:newspaper; text-kashida-space:5%}
S'applique à

Eléments de niveau bloc.

Javascript
[window.]document .getElementById("elementID") .style .textKashidaSpace
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-shadow

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-shadow

Hérité : non - Compatibilité : Safari uniquement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit les effets d'ombre à appliquer au texte de l'élément actuel. Un élément texte peut posséder plusieurs ombres, chacune ayant une couleur, un décalage vertical et horizontal et un rayon de fondu spécifiques.

Les ombres définies sont superposées, chacune figurant dans son propre mini-calque et la première ombre spécifiée se trouvant tout en bas de la pile.

Les valeurs associées à chaque ombre doivent être séparées par des espaces. De plus, lorsque vous définissez plusieurs ombres, vous devez les séparer par des virgules.

Syntaxe CSS
text-shadow: [couleur] horizLength vertLength blurRadiusLength,
[[couleur] horizLength vertLength blurRadiusLength] | none
Valeur(s) possible(s) pour cette propriété :

Si vous ne spécifiez pas de valeur de "couleur", l'ombre utilise la valeur "couleur" de l'élément (qui peut elle-même être héritée). Vous pouvez spécifier la couleur avant ou après les longueurs.

  • Les valeurs de horizLength et vertLength sont des longueurs et le signe qui les précède désigne le sens du décalage de l'ombre par rapport à l'élément texte.
  • Pour horizLength, une valeur positive fait apparaître l'ombre à droite de l'élément, une valeur négative la fait apparaître à gauche de l'élément.
  • Pour vertLength, une valeur positive fait apparaître l'ombre au dessous du texte, une valeur négative la fait apparaître au dessus du texte.
  • Le rayon de fondu est une valeur définissant la longueur de l'ombre à partir du bord des caractères de texte.
Valeur initiale

none

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-transform

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-transform

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Contrôle la capitalisation du texte d'un élément. Lorsque cette propriété a une valeur autre que none, la casse de toutes les lettres du texte source est déterminée par la feuille de style, annulant ainsi la casse d'origine du texte source.

Syntaxe CSS
text-transform: constante | none
Valeur(s) possible(s) pour cette propriété :

Avec la valeur none, la casse du texte source est respectée. Les constantes suivantes sont également disponibles: capitalize | lowercase | uppercase. La valeur capitalize met le premier caractère de chaque mot en majuscules. Les valeurs lowercase et uppercase affichent tous les caractères dans leur casse respective.

Valeur initiale

none

Exemple
h2 {text-transform: capitalize}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .textTransform
Autres propriétés appartenant à la même famille :

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


text-underline-position

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

text-underline-position

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Indique si un souligné (un élément dont le style text-decoration est réglé sur underline) est affiché au dessus ou au dessous du texte. Applicable principalement aux langues asiatiques affichées dans des colonnes verticales.

Syntaxe CSS
text-underline-position: constante | none
Valeur(s) possible(s) pour cette propriété :

IE 5.5 reconnaît deux valeurs constantes: above | below. IE 6 ajoute les valeurs auto et auto-pos (qui semble avoir le même effet). De plus, la valeur par défaut change d'une version à l'autre, de below à auto. Dans IE 6, la valeur auto souligne le texte japonais vertical placé « au dessus » (à droite) des caractères.

Valeur initiale

none

Exemple
h2 {text-underline-position: above}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .textUnderlinePosition
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


top

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

top

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les éléments positionnés, cette propriété définit la position du bord supérieur du cadre d'un élément (contenu plus remplissage, bordure et/ou marge du haut) par rapport au bord supérieur du conteneur parent immédiat.

Syntaxe CSS
top: longueur | pourcentage | auto
Valeur(s) possible(s) pour cette propriété :

Les longueurs négatives sont admises dans certains contextes, mais vérifiez l'effet obtenu sur chaque navigateur.

Vous pouvez également spécifier un pourcentage, lequel sera calculé par rapport à la hauteur du conteneur parent immédiat.

Si vous spécifiez la valeur auto, le navigateur détermine automatiquement le décalage vertical supérieur de l'élément par rapport à sa position naturelle dans le cadre destiné à le recevoir.

Valeur initiale

auto

Exemple
h1 {position:relative; top:2em}
#logo {position:absolute; left:80px; top:30px}
S'applique à

Eléments positionnés.

Javascript
[window.]document .getElementById("elementID") .style .top
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


unicode-bidi

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

unicode-bidi

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine l'incorporation du texte bidirectionnel (par exemple, un mélange d'allemand et d'arabe), avec la propriété de style direction.

Syntaxe CSS
unicode-bidi: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: bidi-override | embed | normal.

Valeur initiale

normal

Exemple
div.multiLingual {unicode-bidi:embed}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .unicodeBidi
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


vertical-align

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

vertical-align

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette propriété possède deux jeux de valeurs agissant sur différentes caractéristiques de l'élément incorporé auxquelles elles sont appliquées. A chaque élément incorporé correspond un cadre destiné à recevoir son contenu. Deux valeurs, top et bottom, déterminent le positionnement du texte à l'intérieur de ce cadre. Ces valeurs alignent le texte sur le haut et sur le bas du cadre, respectivement.

L'utilisation de cette propriété ne se borne pas au texte incorporé. Il peut être appliqué aux images et aux tableaux. Toutes les autres valeurs de vertical-align agissent sur la façon dont le cadre occupé par l'élément est positionné sur l'axe vertical par rapport au contenu texte de l'élément parent. La valeur par défaut, baseline, signifie que la zone de ligne est positionnée de telle sorte que la ligne de base du texte qu'elle contient (ou le bas d'un élément img, par exemple) et la ligne de base du texte parent sont alignées. Ainsi, un élément em, tout en ayant son propre cadre de destination, apparaîtra cependant sur la même ligne de base que l'élément p qui le contient.

Le reste des valeurs possibles pour cette propriété (constantes, longueur et pourcentages) déterminent à quel endroit la zone de ligne de l'élément est placée par rapport à la ligne parente. Un pourcentage ou une position de longueur positifs positionne l'élément à la distance indiquée au dessus de la ligne de base; une valeur négative positionne l'élément au dessous de la ligne de base. Les pourcentages sont calculés par rapport à la hauteur de ligne.

Syntaxe CSS
vertical-align: constante | longueur | pourcentage
Valeur(s) possible(s) pour cette propriété :

Les deux constantes suivantes permettent de définir l'alignement du texte à l'intérieur de l'élément proprement dit : bottom | top.

Six constantes déterminent l'alignement du cadre de ligne en fonction de la ligne de texte environnante (de l'élément parent) : baseline | middle | sub | super | text-bottom | text-top.

  • La valeur baseline aligne les lignes de base de l'élément et de l'élément parent. La valeur middle aligne le point médian vertical de l'élément sur la ligne de base, majorée de la moitié de la hauteur x de la police de caractères de l'élément parent.
  • Les valeurs sub et super affichent l'élément en position indice et exposant, mais ne modifient pas la taille des caractères.
  • La valeur text-bottom aligne le bas de l'élément sur le bas de la ligne de base du texte de l'élément parent; la valeur text-top fait de même avec le haut de l'élément et son parent.
Valeur initiale

baseline

Exemple
span.sup {vertical-align: super; text-size: smaller}
S'applique à

Eléments incorporés : a | abbr | acronym | applet | b | basefont | bdo | big | br | button | cite | code | dfn | em | font | i | img | input | iframe | kbd | label | map | object | q | samp | script | select | small | span | strong | sub | sup | textarea | tt | var

(applet, basefont, font, iframe, u, s et strike seulement avec HTML transitional)

Javascript
[window.]document .getElementById("elementID") .style .verticalAlign
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


visibility

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

visibility

Hérité : voir texte - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine si l'élément est affiché sur la page.

Lorsqu'un élément est masqué à l'aide de la propriété visibility, l'espace correspondant reste vide à l'endroit où l'élément apparaîtrait normalement dans le document. Si vous préférez que le contenu environnant remplisse l'espace qu'occuperait normalement un élément masqué, référez-vous à la propriété display.

Les spécifications suggèrent que la valeur de collapse, lorsqu'elle s'applique aux éléments des lignes de tableau, doit épouser de plus près le tableau.

La propriété visibility est hérité quand elle a pour valeur inherit. Dans pareil cas, si l'élément parent est masqué, l'élément enfant l'est également. Par contre, si vous donnez à la propriété visibility la valeur visible, vous pouvez masquer l'élément parent tout en affichant l'élément enfant.

Syntaxe CSS
visibility: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: collapse | hidden | inherit | visible.

Internet Explorer 6 ne reconnaît pas la valeur collapse.

Valeur initiale

visible

Exemple
#congrats {visibility: hidden}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .visibility
Autres propriétés appartenant à la même famille :

cursor
filter(new style)
filter(old style) -!important
opacity
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkShadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
white-space

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


voice-family

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

voice-family

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les feuilles de style audio, cette propriété spécifie les noms de familles de voix que doit utiliser, dans la mesure du possible, le navigateur audio pour la restitution vocale du contenu. Vous pouvez spécifier plusieurs valeurs, séparées par des virgules. Cette propriété est similaire à la propriété font-family pour les navigateurs visuels.

Syntaxe CSS
voice-family: voiceFamilyName [, voiceFamilyName [, ...]]
Valeur(s) possible(s) pour cette propriété :

Un nom de famille de voix (voiceFamilyName) peut identifier un type de voix disponible sur le navigateur audio ou un nom de voix générique (ces derniers n'ont pas encore été définis par le W3C). Tout comme c'est le cas avec la propriété font-family, vous devez, lorsque vous spécifiez plusieurs types de voix, commencer par le plus spécifique et terminer par le plus générique.

Valeur initiale

Varie en fonction du navigateur.

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


volume

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

volume

Hérité : non - Compatibilité : Certains navigateurs vocaux, seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour les feuilles de style audio, cette propriété définit la gamme dynamique (volume) des éléments parlés. La parole normale comportant des inflexions qui rendent impossible l'utilisation permanente d'un volume absolu, la propriété volume permet de définir le volume médian.

Syntaxe CSS
volume: nombre| pourcentage | Constante
Valeur(s) possible(s) pour cette propriété :

Un nombre (number) quelconque représentant le volume souhaité. Zéro représente le volume minimum de son pour le matériel utilisé et l'environnement sonore ambiant, 100 représente le volume maximum dans les mêmes conditions.

Si vous spécifiez un pourcentage (percentage), celui-ci est calculé par rapport à la propriété volume de l'élément parent. Vous disposez également des constantes suivantes (correspondant à des volumes prédéfinis): silent (aucun son) | x-soft (0) | soft (25) | medium (50) | loud (75) | x-loud (100).

Valeur initiale

medium

S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

azimuth (Effet spatial gauche/droite/devant/derrière)
cue (Signal de reconnaissance avant et après un élément)
cue-before (Signal de reconnaissance avant un élément)
cue-after (Signal de reconnaissance après un élément)
elevation (Effet spatial dessus/dessous)
pause (Pause avant et après un élément)
pause-before (Pause avant un élément)
pause-after (Pause après un élément)
pitch (Timbre de la voix)
pitch-range (Modulation de la voix)
play-during (Son d'arrière plan)
richness (Inflexions de la voix)
speak (Prononciation)
speak-header (Mode lecture des tableaux)
speak-numeral (Convention pour la lecture des chiffres)
speak-punctuation (Mentionner explicitement la ponctuation)
speech-rate (Vitesse de parole)
stress (Caractère de la voix)
voice-family (Type de parleur)
volume (volume)

et pour des indications générales sur l'utilisation de ces propriétés :
SelfHTML

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


white-space

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

white-space

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 5,6,7,8 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine la façon dont le navigateur doit afficher l'espace blanc (espaces supplémentaires et retours-chariot) présent dans le code source de l'élément. Dans des circonstances normales, HTML ne tient pas compte des espaces blancs supplémentaires et redimensionne le contenu de manière à boucher cet espace. Par exemple, si plusieurs espaces apparaissent entre les mots, ils sont réduits en un seul, et pour créer un saut de ligne forcé à l'intérieur d'un paragraphe, il faut insérer un élément br.

Si la propriété whitespace a pour valeur pre, l'espace blanc est traité comme si vous aviez placé l'élément dans un élément pre. Bien que les navigateurs affichent normalement les éléments pre dans une police monospace, un élément ordinaire paramétré comme white-space:pre conservera ses paramètres de police.

Syntaxe CSS
white-space: constante
Valeur(s) possible(s) pour cette propriété :

Trois constantes sont possibles: normal | nowrap | pre.

Avec la valeur normal, l'espace blanc est traité selon les règles HTML normales.

La valeur nowrap indique au navigateur qu'il doit ignorer les sauts de ligne du texte source (éventuellement insérés par l'auteur pour améliorer la lisibilité dans l'éditeur) et qu'il doit créer des sauts de ligne sur la page uniquement lorsqu'il rencontre des sauts de ligne HTML explicites (définis par des éléments br, par exemple).

Si vous spécifiez la valeur pre, le navigateur applique les espaces blancs insérés par l'auteur dans le contenu source sans ajuster les paramètres de police de l'élément.

Valeur initiale

normal

Exemple
div.example {white-space: pre}
S'applique à

Tous les éléments.

Autres propriétés appartenant à la même famille :

cursor
filter(new style)
filter(old style) -!important
opacity
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkShadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
white-space

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


widows

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

widows

Hérité : oui - Compatibilité : Opera 7 seulement - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cette fonction est utilisée pour contrôler l'impression de la page. Elle définit le nombre minimum de lignes d'un paragraphe à afficher en haut d'une page après un saut de page. Pour définir le nombre minimum de lignes à afficher en bas d'une page avant un saut de page, voir la propriété orphans.

Syntaxe CSS
widows: NombreDeLignes
Valeur(s) possible(s) pour cette propriété :

Nombre entier représentant le nombre minimum de lignes.

Valeur initiale

2

S'applique à

Eléments de niveau bloc.

Autres propriétés appartenant à la même famille :

page-break-before
page-break-after
page-break-inside
size
widows
orphan
marks
page

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


width

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

width

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit la largeur d'un élément de niveau bloc, remplacé et positionné (sans compter les bordures, le remplissage et les marges).

Internet Explorer pour Windows inclut les marges gauche et droite, le remplissage et les bordures dans le calcul de la largeur d'un élément, tant que vous n'activez pas le mode de compatibilité aux normes d'Internet Explorer 6. Si les normes CSS sont respectées, la largeur s'applique uniquement à la partie contenu d'un élément, quels que soient les bordures, le remplissage ou les marges.

Syntaxe CSS
width: longueur | pourcentage | auto
Valeur(s) possible(s) pour cette propriété :

Pour plus de détails sur les valeurs de longueur, voir le début de ce chapitre. Si vous spécifiez la valeur auto, le navigateur détermine automatiquement la largeur du cadre de l'élément en fonction de l'espace nécessaire pour afficher son contenu à l'intérieur de la fenêtre actuelle.

Valeur initiale

auto

Exemple
div#announce {position: relative; left: 30; width: 240}
textarea {width: 80%}
S'applique à

Tous les éléments sauf les éléments incorporés non remplacés, les éléments colonne de tableau et les éléments groupe de colonnes.

Javascript
[window.]document .getElementById("elementID") .style .width
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


word-break

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

word-break

Hérité : non - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine le style de césure de mot pour les langues à idéogrammes ou le contenu qui mélange les langues latines et les langues à idéogrammes.

Syntaxe CSS
word-break: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes: break-all | keep-all | normal.

Valeur initiale

normal

Exemple
div {word-break:keep-all}
S'applique à

Eléments de niveau bloc et éléments de tableau.

Javascript
[window.]document .getElementById("elementID") .style .wordBreak
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


word-spacing

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

word-spacing

Hérité : oui - Compatibilité : FF, Mozilla, Opera, Safari IE 4,6,7 - CSS 1
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Définit l'espacement entre les mots lorsque le texte n'est pas soumis à des règles d'espacement externes (attribut align ayant pour valeur justify, par exemple). IE 5 pour Macintosh peut connaître des problèmes de chevauchement avec l'espacement de mots spécifique aux éléments imbriqués dans celui qui est contrôlé.

Syntaxe CSS
word-spacing: longueur | normal
Valeur(s) possible(s) pour cette propriété :

Si vous spécifiez la valeur normal, c'est le navigateur qui calcule, selon ses propres algorithmes, la valeur de l'espacement normal entre deux mots.

Valeur initiale

normal

S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .wordSpacing
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


word-wrap

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

word-wrap

Hérité : oui - Compatibilité : IE 5.5,6,7 uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine le style de renvoi à la ligne pour les éléments de niveau bloc, les éléments incorporés de taille spécifique ou les éléments positionnés.

Si un mot unique (sans espace blanc) dépasse la largeur du cadre qui contient l'élément, le comportement normal consiste à étendre le contenu au delà de la largeur normale du cadre, sans retour à la ligne. Vous pouvez cependant utiliser la valeur de break-word pour forcer la césure d'un mot long au niveau du caractère qui se trouve au bord du cadre.

Syntaxe CSS
word-wrap: constante
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes : break-word | normal.

Valeur initiale

normal

S'applique à

Eléments de niveau bloc, éléments incorporé dimensionnés et éléments positionnés.

Liste des éléments "incorporés" : a | abbr | acronym | applet | b | basefont | bdo | big | br | button | cite | code | dfn | em | font | i | img | input | iframe | kbd | label | map | object | q | samp | script | select | small | span | strong | sub | sup | textarea | tt | var ainsi que (applet, basefont, font, iframe, u, s et strike seulement avec HTML transitional)

Javascript
[window.]document .getElementById("elementID") .style.wordWrap
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


writing-mode

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

writing-mode

Hérité : oui - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Destinée principalement aux langues qui affichent les caractères sous formes de phrases verticales, cette propriété contrôle la progression du contenu, de gauche à droite ou de droite à gauche.

Cette propriété n'est reconnue que par Internet Explorer.

Syntaxe CSS
writing-mode: direction
Valeur(s) possible(s) pour cette propriété :

L'une des constantes suivantes : lr-tb | tb-rl. La valeur tb-rl permet de faire pivoter de 90 degrés le texte de certaines langues.

Valeur initiale

lr-tb

S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .writingMode
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


z-index

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

z-index

Hérité : non - Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 2
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Pour un élément positionné, cette propriété définit l'ordre de superposition par rapport aux autres éléments à l'intérieur du même conteneur parent.

Grâce à cette propriété, l'ordre d'affichage des éléments peut être différent de l'ordre dans lequel ces éléments sont définis par votre code.

Syntaxe CSS
z-index: ValeurEntière | auto
Valeur(s) possible(s) pour cette propriété :

N'importe quel nombre entier. La valeur auto a le même effet que la valeur zéro. Lorsque tous les éléments d'un même conteneur parent ont la même valeur z-index, l'ordre de superposition est déterminé par l'ordre d'apparition de l'élément dans le code source.

Valeur initiale

auto

Exemple
div#instrux {position: absolute; left: 50; top: 70; z-index: 2}
S'applique à

Eléments positionnés.

Javascript
[window.]document .getElementById("elementID") .style .zIndex
Autres propriétés appartenant à la même famille :

bottom
clear
clip
display
float
height
left
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
min-height
max-width
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
position
right
text-align -top
vertical-align
width
z-index

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


zoom

Design Web - Création de site Web - Accueil
  • Introduction
  • Menu déroulant
  • Tableaux CSS
  • Pseudo frames
  • Styles alternatifs
  • 10 trucs pratiques
  • Propriétés CSS
  • Réflexions

zoom

Hérité : non - Compatibilité : IE uniquement
Classement alphabétique :

!important
-moz-border-radius...
-moz-border-radius
-moz-opacity
azimuth
background-attachment
background-color
background-image
background-position...
background-position
background-repeat
background
behavior
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-spacing
border-style
border-width
border
bottom
caption-side
clear
clip
color
content
counter-increment
cue-after
cue
cursor
direction
display
elevation
empty-cells
filter (new style)
filter (old style)
float
font-family
font-size-adjust
font-size
font-stretch
font-style
font-variant
font-weight
font
height
ime-mode
layer-background-color
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
left
letter-spacing
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin
marker-offset
marks
max-height
max-width
opacity
orphans
outline-color
outline-style
outline-width
outline
overflow-x
overflow
padding-bottom
padding
page-break-after
page-break-inside
page
pause-after
pause
pitch-range
pitch
play-during
position
quotes
richness
right
ruby-align
ruby-overhang
ruby-position
scrollbar-3dlight-color
size
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
table-layout
text-align-last
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow
text-shadow
text-transform
text-underline-position
top
unicode-bidi
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Détermine l'agrandissement du contenu affiché. Cette fonction est particulièrement utile lorsque la sortie doit être affichée sur des moniteurs possédant une densité en pixels extrêmement élevée.

Syntaxe CSS
zoom: échelle | pourcentage | normal
Valeur(s) possible(s) pour cette propriété :

L'agrandissement peut être signalé sous forme de nombre à virgule flottante, facteur de mise à l'échelle (une valeur de 1.0 est normale) ou de pourcentage (une valeur de 100% est normale).

Valeur initiale

normal

Exemple
body {zoom:200%}
S'applique à

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style.zoom
Autres propriétés appartenant à la même famille :

behavior
filter (old style)
filter (new style)
ime-mode
layout-flow
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
layout-grid
overflow-x
overflow-y
scrollbar-3dlight-color
text-align-last
text-autospace
text-justify
text-kashida-space
text-underline-position
word-break- word-wrap
word-spacing
writing-mode- zoom

Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web

Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
 This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional
Design Web - Création de site Web - Accueil
Créez votre site Web
avec des CSS !

Introduction
aux CSS [image] Premiers pas
avec les CSS [image] Héritages
et cascades [image] Eléments "blocs"
et "en ligne" [image] Mise en page
avec les CSS [image] Problèmes
et solutions [image] Des tableaux
en CSS [image] Pseudo-frames
en CSS [image] Menu déroulant
en CSS [image] Styles alternatifs [image] 10 trucs à savoir Toutes les propriétés CSS [image] Couleurs CSS
et HTML [image] Unités CSS [image] Classement alphabétique [image] Classement par familles [image] Réflexions et prises de tête [image] Les fausses promesses [image] Tableaux contre CSS : le combat [image] Les ayatollahs
des CSS
Raccourcis
liens d'évitement et raccourcis clavier Droits de copie
Aller au menu


Toutes les définitions des propriétés feuilles de style css (définitions css V4.0) | Zone CSS

Vu dans ... https://www.zonecss.fr/cours-css

www.zonecss.fr
Changement d'url zonecss.free.fr devient www.zonecss.fr
  • Propriétés css
  • Propriétés javascript
  • Cours de CSS
  • Css par theme
  • Le laboratoire

Qu'est ce que la Zone CSS.

Le site de la Zone CSS La ZONE CSS est un site dédié aux feuilles de style.
Vous y touverez entre autre :
- Un glossaire css qui regroupe toutes les définitions des feuilles de style (css), leurs compatibilités avec navigateurs, leur versions (css1, css2 ou css3) et les bugs répertoriés.
- Un cours css pour intégrer avec les css (feuilles de styles).
- Un FAQ css comportant les principales questions sur les CSS.

0 Partager

Qu'est-ce qu'une feuille de style CSS ?

Les feuilles de style CSS ou en anglais Cascading Style Sheets sont utilisées pour définir les caractéristiques liées à la présentation d'une page web.
Les feuille de style CSS existent depuis longtemps, mais elles ont pris leur importance avec l'arrivé du XHTML.
Le but des feuille de style CSS est de séparer le contenu de la forme. Vous pouvez donc appliquer plusieurs modèles de présentation pour un seul contenu.

La Zone CSS sur Facebook.

La ZONE CSS sur Facebook La zone CSS présente sur facebook.
Vous y trouverez des articles, des liens vers des sites qui me semble pertinant.
La zone CSS sur Facebook est beaucoup plus large, elle ne traite pas seulement de Feuilles des styles, mais traite de tous les sujets de la chaîne de production d'un site, de la création au référencement.

La Zone CSS sur Twitter.

Si vous êtes plus Twitter que Facebook vous y retrouverez aussi les mêmes informations.

La Zone Info.

Retrouver tous les articles de la thématique "Développement" sur la Zone Info.

La Zone Outils Css.

Plusieurs outils pour les CSS Outils CSS.

La Zone Web Color Css.

Retrouvez toutes les couleurs au format Hexadécimale, RGB et HSL et les couleurs transparentes Couleur Web.

La Zone Media Queries Css.

Retrouver toutes les propriétés css pour faire des Media Queries Media Queries CSS.

La Zone Outils Javascript.

Retrouver des tests, des exemples sur Outils Javascript.


Vu dans ... https://www.zonecss.fr/cours-css

Sommaire détaillé de la page Afficher Sommaire

  1. Que vais-je trouver dans ce cours?

Que vais-je trouver dans ce cours?

Infos

Les cours css sont destinés vous aider dans l'utilisation des feuilles de style css.
Le chapitre " Les cours css" regroupe deux types d'informations :

  • les cours css,
  • les thèmes css.

Les cours css

Les cours css sont composés de trois rubriques particulièrement importantes :

  • Où écrire les css
  • Règles principales
  • Assignation d'une propriété css

Elles vous expliqueront comment utiliser les feuilles de style css. Définir et assigner des propriétés de feuilles de style css à des éléments HTML ou XHTML.

Les thèmes css

Les thèmes sont des rubriques qui abordent des points spéciaux comme la notion d'unité, la notion de média...

Les articles "Les cours Css"

  • Où écrire les css
  • Règles d'écriture d'une définition Css
  • Assignation d'une propriété css
  • Les sélecteurs Css
  • Poids des sélecteurs Css
  • Les formats de couleur CSS
  • Les unités de longueurs Css
  • Les unités d'angles Css
  • Les types de médias
  • Les marges Css avec padding et margin
  • Les dégradés de couleurs
  • Les medias queries
  • Les transitions CSS3
  • Hack Css


Où écrire les css - Les cours Css _ ZONE CSS

Sommaire détaillé de la page Afficher Sommaire
  1. Où écrire les css
  2. Dans une balise HTML ou XHTML
    1. Utiliser l'attribut style
  3. Dans une balise Style
    1. Utiliser la balise style
  4. Dans un fichier externe
    1. Utiliser un fichier externe CSS
  5. Conclusion
    1. Quel choix faire ?
  6. Définitions annexes

Où écrire les css

Introduction

La majorité des feuilles de style est gérée partir de la version 3.0 pour Internet Explorer et la version 4.0 pour Netscape.
Il faut savoir aussi qu'il existe entre les navigateurs pour Macintosh, Windows et Linux des variantes d'interprétations pour une même feuille de style.
Il existe plusieurs façons de déclarer une feuille de style CSS :

  • dans la balise HTML ou XHTML grâce à l'attribut STYLE
  • dans une balise HTML ou XHTML STYLE ,
  • dans un fichier externe, ayant pour extension .css.

Dans une balise HTML ou XHTML

Utiliser l'attribut style

Vous pouvez assigner une propriété de feuille de style CSS au sein même d'une balise HTML ou XHTML. Pour cela vous devez utiliser l'attribut STYLE .

Exemple de propriétés CSS dans une balise HTML :
<p style=" définition0 : valeur; définition1 : valeur; "> Texte </p>

Ces propriétés de feuille de style CSS prennent le dessus ou se cumulent.
Mettre les propriétés CSS dans l'attribut style est à utiliser dans les cas extrêmes : que si vous ne pouvez pas les mettre dans un fichier CSS externe ou dans une balise HTML style

Dans une balise Style

Utiliser la balise style

Vous pouvez déclarer vos propriétés de feuille de style CSS dans une balise HTML ou XHTML STYLE qui doit être déclarée dans la balise HTML head :

Exemple de code HTML pour la balise style :
<html>
  <head>
    <style type="text/css">
        /* Vos CSS */
    </style>
  </head>
  <body>
  </body>
<html>
Agrandir la zone de code

Pour information vous verrez peut-être aussi l'utilisation des commentaires html (<!-- -->). Cependant de nos jours, ils ne sont plus utiles.

Exemple avec commentaires HTML :
<style type="text/css">
  <!--
    /* Vos CSS */
  -->
</style>

Dans un fichier externe

Utiliser un fichier externe CSS

Vous pouvez aussi déclarer vos propriétés de feuille de style css dans un fichier externe ayant pour extension .css
A l'intérieur du fichier, vous écrirez vos propriétés CSS directement :

Exemple de code CSS dans un fichier externe :
/*Vos CSS*/

Pour information vous verrez peut-être aussi l'utilisation des commentaires html (<!-- -->). Cependant de nos jours, ils ne sont plus utiles.

Exemple avec commentaires HTML :
<!--
  /* Vos CSS */
-->

Vous devez lier votre page HTML au fichier CSS, dans votre page déclarez votre feuille CSS externe avec la balise HTML ou XHTML LINK :

Exemple d'importation d'un fichier css externe :
<html>
  <head>
    <link rel="stylesheet" href="chemin/feuille.css">
  </head>
  <body>
  </body>
<html>

Conclusion

Quel choix faire ?

Vous devez utiliser une feuille de style externe si cette dernière est utilisée dans plusieurs pages.

Vous pouvez parfaitement utiliser le 3 techniques.
Par exemple, vous avez une feuille de style externe pour votre charte globale, et une balise HTML ou XHTML STYLE pour compléter la mise en page d'éléments spécifiques.

Attention, déclarer toujours votre CSS externe avant la balise HTML ou XHTML STYLE , sinon elle prendra le dessus.

En règle générale, une seule feuille de style externe suffit.


Règles d'écriture d'une définition Css - Les cours Css _ ZONE CSS

Sommaire détaillé de la page Afficher Sommaire
  1. Comment définir une zone css
    1. Délimiter une zone css
  2. Comment écrire une définition CSS
    1. Structure d'une déclaration CSS
  3. Cumul des propriétés Css
    1. Les propriétés CSS se cumulent entre plusieurs déclarations
  4. Héritage des propriétés Css
    1. Héritage des propriétés CSS entre plusieurs déclarations
  5. Regroupement de sélecteurs
    1. Regrouper plusieurs de sélecteurs CSS
  6. Commentaires en CSS
    1. Faire des commentaires en CSS
  7. La propriété Css n'est pas interprétée
    1. Règle d'interprétation d'une propriété Css
    2. Que faire si une propriété Css n'est pas interprétée
  8. Préciser la version Css
    1. On ne peut pas préciser la version Css
  9. Définitions annexes

Comment définir une zone css

Délimiter une zone css

En règle générale, les propriétés Css ne peuvent s'appliquer que sur une zone délimitée par une balise (X)HTML, seules les pseudo-éléments échappent à la règle, car ils ciblent des éléments précis comme la première lettre, la première ligne.
Si vous avez besoins d' appliquer une zone Css dans un bloc de texte vous pouvez utiliser la balise neutre de type "en ligne" span , mais les autres balises sémantiques dites "en ligne" ( b , i , dfn , ...) peuvent être utilisées mais à bon escient.

Exemple de délimitation de zone Css avec une balise span :
<p>fama vulgasset missaeque Caesarem permovissent.</p>
<p>fama vulgasset <span class="maclasse">missaeque</span> Caesarem permovissent.</p>

Si vous avez besoins de regrouper des zones Css, vous pouvez utiliser entre autre la balise neutre de type "bloc" div .

Exemple de délimitation de zone css avec une balise span :
<h2>Titre</h2>
<p>fama vulgasset missaeque Caesarem permovissent.</p>
<p>fama vulgasset missaeque Caesarem permovissent.</p>
<div class="maclass">
  <h2>Titre</h2>
  <p>fama vulgasset missaeque Caesarem permovissent.</p>
  <p>fama vulgasset missaeque Caesarem permovissent.</p>
</div>
Agrandir la zone de code

Comment écrire une définition CSS

Structure d'une déclaration CSS

Pour écrire une propriété feuilles de style css dans un fichier CSS externe ou dans une balise HTML ou XHTML style , vous devez respecter un code d'écrire qui se compose de 3 parties :

Exemple de déclaration CSS :
Chemin de ciblage{
  Propriété CSS : valeur ;
  Propriété CSS : valeur ;
}

  • le chemin de ciblage permet de spécifier à quel élément HTML va être attribué les propriétés de feuilles de style CSS.
  • le bloc conteneur { } permet de spécifier où commence et où finissent les propriétés de feuilles de style CSS assignées à l'identifiant;
  • les ou la propriété CSS sont l'ensemble des propriétés CSS à assigner.
    La propriété Css doit être suivie de " :" et de la valeur que vous voulez donner à la propriété.
    Chaque déclaration d'une propriété CSS doit se finir par un ;
Si vous respecter ces règles d'écriture, alors vous pouvez l'ensemble de la déclaration sur une seule ligne.

Lorsque vous déclarer vos propriétés de feuilles de style css dans l'attribut HTML ou XHTML style , ces propriétés de feuilles de style css prennent le dessus ou se cumulent avec les propriétés déclarées dans votre fichier externe ou dans la balise HTML ou XHTML STYLE .

Exemple de déclaration CSS dans un attribut style :
<balise style="Propriété:valeur; Propriété:valeur; ">
  Texte
</balise>

Dans ce cas-là, vous n'avez pas besoin du chemin de ciblage, puisque le style s'applique à la balise qui a l'attribut style . Vous n'avez plus besoin des { } qui sont remplacés par les " ". Mais vous avez toujours besoin de séparer les propriétés Css par un point virgule.

Cumul des propriétés Css

Les propriétés CSS se cumulent entre plusieurs déclarations

Si vous avez plusieurs déclarations qui pointent sur la même cible, toutes les propriétés différentes se cumulent.
Exemple si dans les déclarations suivantes a une nouvelle propriété CSS, alors cette dernière est cumulée avec les précédentes propriétés déclarées, quel que soit le poids des sélecteurs.

Exemple de cumul de propriétés CSS :
.identifiant{
  font-family:arial;
}
/* et plus loin dans votre code */
.identifiant{
  font-size:12px;
}
.identifiant aura donc une police arial de taille 12px.

Héritage des propriétés Css

Héritage des propriétés CSS entre plusieurs déclarations

Dans le cas où, vous avez déclaré une propriété CSS dans deux conteneurs avec le même chemin de ciblage vers un même élément HTML, alors la dernière propriété CSS déclarée remplace l'ancienne.

Exemple de déclaration double :
.identifiant{
  font-family:arial;
}
/* et plus loin dans votre code */
.identifiant{
  font-family:times;
}

Ce sera donc une police times .

Dans le cas où, le chemin de ciblage vers un même élément HTML est différent alors la valeur des propriétés CSS dépendra du poids des sélecteurs.

Exemple de chemin de ciblage différent :
#idattribut .identifiant{
  font-family : arial;
}
/* et plus loin dans votre code */
.identifiant{
  font-family : times;
}

Le poids du sélecteur du premier chemin de ciblage est plus fort, sera donc une police arial .

Regroupement de sélecteurs

Regrouper plusieurs de sélecteurs CSS

Il se peut que plusieurs cibles aient les mêmes propriétés, vous pouvez les regrouper au lieu de dupliquer les propriétés.
Pour cela vous devez lister les cibles en les séparant par une " ," (virgule).
Attention : ne pas mettre de " ," (virgule) après la dernière cible.

Exemple de regroupements de cibles :
b,
h1 span,
.identifiant
{
  font-family:arial;
}
/* au ieu de */
.identifiant{
  font-family:arial;
}
b{
  font-family:arial;
}
h1 span{
  font-family:arial;
}
Agrandir la zone de code

Commentaires en CSS

Faire des commentaires en CSS

Vous serez sûrement amené à créer des commentaires CSS pour rendre plus lisible votre feuille de style.
Utiliser /* et */ pour encadrer votre commentaire.
Tout ce qui est entre /* et */ sera considéré comme un commentaire, même sur plusieurs lignes.

Exemple d'écriture de commentaires en CSS :
/* Commentaire */
/* Mon texte
d'explication */

Ne mettez pas de commentaires dans l'attribut HTML style .

La propriété Css n'est pas interprétée

Règle d'interprétation d'une propriété Css

Par définition une propriété inconnue ou dont la valeur est inconnue est ignorée.
Si dans le même "bloc conteneur", vous avez déclaré plusieurs fois une propriété Css mais avec des valeurs différentes; alors c'est la dernière déclaration valide qui prime.

Que faire si une propriété Css n'est pas interprétée

Vérifier que :

  • vous avez pas fait une faute dans l'écriture de la propriété.
  • la valeur assignée à la propriété est valide et bien écrite.
  • vous avez pas oublié de mettre un " ;" ou de fermer le "bloc conteneur".
  • que le "chemin de ciblage" cible bien l'élément désiré.
  • que si vous avez un " Regroupement de sélecteurs", il ne se termine pas par une virgule.
Si tous ces cas sont bons, alors c'est que vous avez un problème d'héritage lié au poids des sélecteurs Css ou que la propriété n'est pas applicable sur ce type d'élément ou n'est pas reconnue par le navigateur.

Préciser la version Css

On ne peut pas préciser la version Css

Il n'est pas possible de spécifier la version Css à utiliser.
La seule chose que vous pouvez faire, c'est d' utiliser des propriétés Css préfixées ou des hack CSS pour cibler un navigateur ou une version de navigateur ou une compatibilité.

Il existe plusieurs préfixes (vendor extensions) :
- -o- propriété : pour le navigateur Opera.
- -webkit- propriété : pour les navigateurs de base Webkit (Chrome, nouvelles versions d'Opera)
- -moz- propriété : pour le navigateur Firefox.
- -ms- propriété : pour le navigateur Internet Explorer.
Les propriétés Css préfixées sont non standards et expérimentales et ne passent pas le CSS Validation Service.
Elles peuvent exister sous un navigateur et pas sous un autre, par exemple -webkit-filter n'existe pas dans les autres versions préfixées, ou exister qu'en version préfixée.
Elles peuvent exister sous une version de navigateur et pas sous une autre plus récente.

Exemple schématique des écritures préfixées :
.ma-css{
  -o-propriete : valeur; /* -o- Opera */
  -webkit-propriete : valeur; /* -webkit- Chrome ,  Safari et nouveau Opera */
  -moz-propriete : valeur; /* -moz -Firefox */
  -ms-propriete : valeur; /* -ms- Internet Explorer */
  propriete : valeur; /* Navigateur aux normes w3c */
}

C'est la règle de la dernière déclaration valide qui prime.
Vous devez normalement, toujours finir par la version non préfixée et l'ordre des préfixes a normalement pas trop d'importance, sauf peut être entre -o- et -webkit- à cause d'Opéra donc je vous conseille de garder cet ordre.
Cependant, si pour une raison 'X' vous désirez par exemple que -ms-propriete prenne le dessus sur propriete dans le cas d'Internet Explorer alors vous devez inverser l'ordre.


Assignation d une propriete css - Les cours Css _ ZONE CSS

Sommaire détaillé de la page Afficher Sommaire
  1. Assigner la propriété css
  2. Assigner par la balise
    1. Ciblage par le nom de la balise
    2. Ciblage en fonction des balises parentes
  3. Assigner par l'attribut CLASS
    1. Ciblage par la valeur de l'attribut CLASS
    2. Cumule et héritage des propriétés CSS
    3. Valeur de l'attribut class
  4. Assigner par l'attribut ID
    1. Ciblage par la valeur de l'attribut ID
    2. Cumul et héritage des propriétés CSS
    3. Valeur de l'attribut id
  5. Définitions annexes

Assigner la propriété css

Introduction

Dans ce cours, nous étudier les trois principales façons cibler un élément HTML pour lui assigner un ensemble de propriétés de feuille de style css.
Ce cours est une première étape pour bien comprendre le ciblage avant de voir l'ensemble des possibilités pour cibler un élément HTML.
On peut assigner une propriété de feuille de style css à une balise HTML ou XHTML de trois façons :

  • par le Nom de la balise HTML ou XHTML.
  • grâce à l'attribut HTML ou XHTML ID .
  • grâce à l'attribut HTML ou XHTML CLASS .

Assigner par la balise

Ciblage par le nom de la balise

Par exemple, nous voulons que le texte qui se trouve dans les balises HTML < B > soit souligné.

Nous mettrons pour la feuille de style :
<STYLE type="text/css">
  B { text-decoration : underline; }
</STYLE>

Le code HTML ou XHTML sera :
<B> texte </B>

Cette technique permet de donner une ou des propriétés de feuilles de style css à toutes les balises B .

Si vous avez plusieurs balises ayant les mêmes propriétés de feuilles de style css, vous pouvez les regrouper en les séparant par une virgule.
Vous pouvez écrire le nom des balises en majuscule ou minuscule.

Code HTML :
<STYLE type="text/css">
  P, TD, ADDRESS { text-decoration : underline; }
</STYLE>

Ciblage en fonction des balises parentes

Vous pouvez aussi assigner une propriété de feuille de style css à une balise en fonction des balises parentes de cette dernière.
Pour cela il vous suffit de nommer chaque balise comprise entre la balise parente et la balise cible (incluses).
Par exemple, vous avez une balise P qui contient une balise SPAN qui contient une balise B :

Soit en code HTML :
<p>
  <span>
    <b>Mon texte</b>
  </span>
</p>

Si vous mettez :

Code HTML :
<STYLE type="text/css">
  P SPAN B{  text-decoration : underline; }
</STYLE>

Alors votre texte sera souligné, car vous avez demandé :

  • souligne-moi la balise B qui a comme parent la balise SPAN et qui elle-même a comme parent la balise P .

Si vous inversez le SPAN et le B :

Code HTML :
<STYLE type="text/css">
  P B SPAN { text-decoration : underline; }
</STYLE>

Alors la balise SPAN ne sera pas soulignée, car vous avez demandé :

  • souligne-moi la balise SPAN qui a comme parent la balise B et qui elle-même a comme parent la balise P , ce qui n'est pas le cas.

De la précision du chemin, dépendra la précision du ciblage.

Prenons l'exemple suivant de code HTML :
<p>
  <span> Texte span
    <b>Texte b</b>
  </span>
  <b>
    <span>Texte span</span>
  </b>
</p>
<div>
  <b>Texte b
    <span>Texte span</span>
  </b>
</div>
Agrandir la zone de code

Si nous voulons souligner les textes des balises B ayant comme parent la balise P :

Code HTML :
<STYLE type="text/css">
  P B{ text-decoration : underline; }
</STYLE>

Résultat :

Assigner par l'attribut CLASS

Ciblage par la valeur de l'attribut CLASS

Vous pouvez utiliser la valeur de l'attribut HTML CLASS comme identifiant afin de lui assigner une ou des propriétés de feuille de style CSS.
Pour cela, vous devez dans votre feuille de style mettre la valeur de l'attribut HTML class précédé d'un " ." (point).
Attention, l'identifiant est sensible à la case : " nomclass" est différent de " nomClass".

Exemple de code HTML avec class :
<ADDRESS class="nom"> </ADDRESS>
<SPAN class="nom"> </SPAN>

Exemple de code CSS avec identifiant de class :
<STYLE type="text/css">
  ADDRESS { /* Propriété */ }
  .nom { font-weigth : bold; }
</STYLE>

Petit rappel, on utilise .class quand les propriétés CSS s'appliquent à plusieurs éléments de types identiques ou différents.
Cette technique permet, dans notre exemple, d'assigner un gras à toutes les balises HTML ou XHTML dont l'attribut class a comme valeur " nom ".

Nous pouvons associer la classe au nom de la balise HTML, pour que seules les balises ADDRESS de class " nom " héritent des propriétés CSS.

Exemple de classe associe au nom de balise :
<STYLE type="text/css">
  ADDRESS { font-size : 12px; }
  ADDRESS.nom { text-decoration : underline; }
</STYLE>

Exemple de balises HTML avec la même valeur de class :
<SPAN class="nom"> </SPAN>
<ADDRESS class="nom"> </ADDRESS>

Les autres balises HTML ou XHTML ayant un attribut CLASS de valeur "nom" n'héritent pas de cette propriété.
Attention, la balise ADDRESS de class "nom" hérite aussi des propriétés définies avec ADDRESS{}.

Cumule et héritage des propriétés CSS

Attention dans notre premier exemple, les balises HTML ou XHTML ADDRESS dont la valeur de l'attribut CLASS est "nom" héritent aussi des propriétés définies avec ADDRESS{} , mais pas les autres balises.
Si vous avez re-déclaré une propriété CSS, elle prendra le dessus selon le poids du sélecteur.
Maitrisez d'abord le ciblage avant de vous pencher sur cette notion de poids. Pour le moment sachez seulement que le ciblage par la classe est plus fort que celui par le nom de la balise.

Exemple de re-déclaration d'une propriété CSS :
<STYLE type="text/css">
  ADDRESS { font-size:12px; }
  .nom {
    font-size : 15px;
    text-decoration : underline;
  }
</STYLE>

C'est font-size : 15px qui sera pris en compte.
Si vous ne voulez pas que la propriété de la CLASS prenne le dessus, utilisez !important.

Exemple de code CSS !important :
<STYLE type="text/css">
  ADDRESS { font-size:12px !important; }
  .nom {
    font-size : 15px;
    text-decoration : underline;
  }
</STYLE>

Attention: important est à utiliser dans les cas exceptionnels, car à de forte incidence sur l'héritage de propriétés CSS.

Valeur de l'attribut class

Attention, les caractères spéciaux sont à bannir dans la valeur de l'attribut HTML ou XHTML CLASS .
La valeur de l'attribut class peut contenir toutes les lettres sans accent minuscules ou majuscules de l'alphabet ([a-zA-z]), les chiffres de 0 à 9, le " _" et le " -".
Les noms de classe doivent commencer une lettre ([a-zA-z]) et être séparés par un espace.

Assigner par l'attribut ID

Ciblage par la valeur de l'attribut ID

Vous pouvez utiliser la valeur de l'attribut HTML ID comme identifiant afin de lui assigner une ou des propriétés de feuille de style CSS.
Pour cela, vous devez dans votre feuille de style mettre la valeur de l'attribut HTML ID précédé d'un " #" (dièse).

Exemple de code HTML avec ID :
<ADDRESS ID="nomid"> </ADDRESS>

Exemple de code CSS avec identifiant d'ID :
<STYLE type="text/css">
  ADDRESS { /* Propriété */ }
  #nomid { text-decoration : underline; }
</STYLE>

Attention, ADDRESS ID="nomid" hérite aussi des propriétés définies avec ADDRESS{} .
Attention, l'identifiant est sensible à la case : " idnom" est différent de " idNom".

Cumul et héritage des propriétés CSS

Un autre cas peut se poser, vous avez une balise qui a un attribut ID et un attribut CLASS.

Exemple de code HTML avec ID et CLASS :
<ADDRESS ID="nomId" CLASS="nomClass"> </ADDRESS>

Si vous avez spécifié des propriétés différentes alors elles se cumulent.

Exemple de code CSS avec identifiant d'ID et CLASS :
<STYLE type="text/css">
  .nomClass { font-size : 12px; }
  #nomId{ text-decoration : underline; }
</STYLE>

Si vous avez re-déclaré une propriété CSS, elle prendra le dessus selon le poids du sélecteur.
Maitrisez d'abord le ciblage avant de vous pencher sur cette notion de poids. Pour le moment sachez seulement que le ciblage par simple ID est plus fort que celui par simple CLASS .

Exemple de code CSS avec identifiant d'ID :
<STYLE type="text/css">
  .nom1 { font-size:12px; }
  #nom { font-size:15px; }
</STYLE>

C'est font-size : 15px qui sera pris en compte.
Si vous ne voulez pas que la propriété de l'ID prenne le dessus, utilisez !important.

Exemple de code CSS !important :
<STYLE type="text/css">
  .nom1 { font-size:12px !important; }
  #nom { font-size:15px; }
</STYLE>

Attention: important est à utiliser dans les cas exceptionnels, car a une forte incidence sur l'héritage de propriétés CSS.

Valeur de l'attribut id

La valeur de l'attribut ID peut contenir toutes les lettres sans accent minuscules ou majuscules de l'alphabet ([a-zA-Z]), les chiffres de 0 à 9, le " _", le " -", les " :" et le " .". Cependant, je vous conseille fortement de ne pas utiliser les deux derniers.
Elle doit obligatoirement commencer par une lettre ([a-zA-Z]).
Attention, les caractères spéciaux sont à bannir dans la valeur de l'attribut HTML ou XHTML ID .
Attention, la valeur de ID doit être unique dans le document (norme HTML).

Définitions annexes

Définitions CSS annexes

important
La règle CSS IMPORTANT permet de spécifier que la propriété est la plus importante dans votre feuille CSS en lui donnant un poids plus important. La ...[ important ]

Définitions HTML annexes

span
La balise HTML et XHTML SPAN est utilisée pour créer des propriétes css à un endroit précis. Dans ce cas, la balise HTML et XHTML <SPAN> n'introduit p...[ span ]
b
La balise HTML et XHTML B met un texte en gras.<B> </B> Exemple: Texte Cours Html : ...[ b ]
p
La balise HTML et XHTML P crée un paragraphe. Après chaque balise de fin </P>, il se génère un saut de ligne.<P> </P> Le saut de ligne correspond à ...[ p ]
address
La balise HTML et XHTML ADDRESS est destinée à recevoir les éléments concernant l'auteur du document. <ADDRESS> </ADDRESS> La balise HTML ADDRESS est ...[ address ]


Les sélecteurs Css - Les cours Css _ ZONE CSS

Sommaire détaillé de la page Afficher Sommaire
  1. Les sélecteurs Css
    1. Introduction aux sélecteurs Css
  2. Sélecteur Css universel
    1. Qu'est-ce que le sélecteur css * ou sélecteur universel?
    2. Compatibilité navigateur et remarques
  3. Sélecteur Css de type
    1. Qu'est-ce qu'un sélecteur Css de balise?
    2. Compatibilité navigateur du sélecteur Css de balise
  4. Sélecteur Css d'id
    1. Qu'est-ce qu'un sélecteur Css d'id?
    2. Compatibilité navigateur et remarques
  5. Sélecteurs Css de classe
    1. Qu'est-ce qu'un sélecteur Css de classe?
    2. Compatibilité navigateur du sélecteur Css de classe
  6. Sélecteur Css descendant
    1. Qu'est-ce qu'un sélecteur Css descendant?
    2. Compatibilité navigateur du sélecteur Css descendant
  7. Sélecteur Css d'enfants directs
    1. Qu'est-ce qu'un sélecteur Css d'enfant?
    2. Compatibilité navigateur du sélecteur Css d'enfants directs
  8. Sélecteur Css adjacent
    1. Qu'est-ce que le sélecteur Css + adjacent?
    2. Compatibilité navigateur du sélecteur Css adjacent
  9. Sélecteur Css précédé par
    1. Qu'est-ce que le sélecteur Css ~?
    2. Compatibilité navigateur du sélecteur Css précédé par
  10. Sélecteur Css d'attribut
    1. Qu'est-ce qu'un sélecteur Css d'attribut?
    2. Compatibilité navigateur du sélecteur Css d'attribut
  11. Sélecteur Css de négation
    1. Qu'est-ce qu'un sélecteur Css de négation?
    2. Compatibilité navigateur du sélecteur Css de négation
  12. Sélecteur Css du premier fils
    1. Qu'est-ce qu'un sélecteur Css de premier fils?
  13. Sélecteur Css du dernier fils
    1. Qu'est-ce qu'un sélecteur Css de dernier fils?
  14. Sélecteur Css pseudo-classe
    1. Qu'est-ce qu'un sélecteur Css pseudo-classe?
    2. Compatibilité navigateur du sélecteur Css pseudo-classe
  15. Sélecteur Css de première lettre
    1. Qu'est-ce qu'un sélecteur Css de première lettre?
  16. Sélecteur Css de première ligne
    1. Qu'est-ce qu'un sélecteur Css de première ligne?
  17. Sélecteur Css pseudo-élément
    1. Qu'est qu'un sélecteur Css pseudo-élément?
    2. Compatibilité navigateur du sélecteur Css pseudo-élément
  18. Comment faire des sélecteurs performants
    1. Introduction
    2. Catégories de règles
    3. Assignation d'une règle par le navigateur
  19. Définitions annexes

Les sélecteurs Css

Introduction aux sélecteurs Css

Après les cours sur les règles principales Css, vous pouvez aller plus loin dans la manière de cibler les éléments (X)HTML.
Ce cours Css sur les sélecteurs Css récapitule l'ensemble des sélecteurs Css ainsi que leur compatibilité avec les navigateurs.

Sachez que vous pouvez combiner les sélecteurs Css.

Sélecteur Css universel

Qu'est-ce que le sélecteur css * ou sélecteur universel?

Le sélecteur Css universel s'écrit *, il sélectionne tous les éléments.

Code HTML pour l'exemple du sélecteur Css universel :
<p>
  <span>
    <b>sélecteur <b><b>Css</b> universel</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>Css</b> universel</b></b>
  </span>
</p>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons toutes les balises.

Exemple de code CSS du sélecteur universel:
*{font-weight:normal;}

Dans l'exemple suivant, nous ciblons toutes les balises ayant pour classe "maclasse".

Exemple de code CSS du sélecteur universel :
*.maclasse{font-weight:normal;} /* ne pas faire */
/* est équivalent à */
.maclasse{font-weight:normal;}

Dans l'exemple suivant, nous ciblons toutes les balises contenues dans la balise ayant pour classe "maclasse".

Exemple de code CSS du sélecteur universel :
.maclasse *{font-weight:normal;}

Compatibilité navigateur et remarques

Le sélecteur Css universel est reconnu par tous les navigateurs.
Le sélecteur Css universel est à éviter car il prend plus de temps dans les performances de rendu.
N'accolez jamais le sélecteur Css universel , à une classe, un id, un pseudo-classe ou un pseudo-élément.

Exemple d'écriture du sélecteur universel à ne pas faire :
*.maclasse { }
*#monid {}
*:first-line{}
etc...

Sélecteur Css de type

Qu'est-ce qu'un sélecteur Css de balise?

Le sélecteur Css de type permet de sélectionner un type de balise (x)HTML précis.
Le sélecteur Css de balise s'écrit en mettant le nom de la balise (X)HTML.

Code HTML pour l'exemple de sélecteur Css de type :
<p>
  <span>
    <b>sélecteur <b><b>Css</b> de balise</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>Css</b> de balise</b></b>
  </span>
</p>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons toutes les balises B.

Exemple de code CSS du sélecteur par nom de balise :
b{ font-weight : normal; }

Dans l'exemple suivant, nous ciblons toutes les balises B contenu dans une balise B ayant comme classe "maclasse".

Exemple de code CSS du sélecteur par nom de balise :
b.maclasse{ font-weight : normal; }

Compatibilité navigateur du sélecteur Css de balise

Le sélecteur Css par type (ou sélecteur Css par balise) est reconnu par tous les navigateurs.

Sélecteur Css d'id

Qu'est-ce qu'un sélecteur Css d'id?

Le sélecteur Css d'id permet de sélectionner une balise par la valeur de son attribut id (je précise que la valeur de l' id est unique dans votre page HTML).
Le sélecteur Css d'id s'écrit #VALEUR_DE_ID

Code HTML pour l'exemple de sélecteur Css d'id :
<p>
  <span id="id_selecteurA">
    <b>sélecteur <b><b class="classe_selecteurB">Css</b> d'id</b></b>
  </span>
  <br/>
  <span id="id_selecteurB">
    <b class="maclasse">sélecteur <b class="classe_selecteurB"><b>Css</b> d'id</b></b>
  </span>
</p>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons la balise ayant comme id "id_selecteurA".

Exemple de code CSS du sélecteur par attribut id :
 #id_selecteurA{font-weight:normal;}

Dans l'exemple suivant, nous ciblons la balise ayant comme classe "classe_selecteurB" et qui est contenu dans une balise dont la valeur de l'id est "id_selecteurB".

Exemple de code CSS du sélecteur par attribut id :
#id_selecteurB b.classe_selecteurB{font-weight:normal;}

Compatibilité navigateur et remarques

Le sélecteur Css d'id est reconnu par tous les navigateurs.
Evitez d'accoler au sélecteur Css d'id CSS une balise ou un chemin de sélection, car je le rappelle l' id est unique dans votre page.

Exemple d'écriture du sélecteur d'id à ne pas faire :
div > p #monid{}
p#monid {}

Cependant, l'écriture n'est pas forcément fausse dans le cas où vous avez un feuille de style commune à plusieurs pages, et un id identique dans chaque page qui doit avoir une charte différente.

Sélecteurs Css de classe

Qu'est-ce qu'un sélecteur Css de classe?

Le sélecteur CSS de classe permet de sélectionner une balise en fonction d'un "identifiant de class" présent dans son attribut class .
Le sélecteur Css de classe s'écrit .VALEUR_DE_CLASSE

Code HTML pour l'exemple de sélecteur par attribut class :
<p>
  <span id="id_selecteurA">
    <b>sélecteur <b><span class="classe_selecteurB">css</span> de classe</b></b>
  </span>
  <br/>
  <span id="id_selecteurB">
    <b class="maclasse">sélecteur <b class="classe_selecteurB autre_class"><b>css</b> de classe</b></b>
  </span>
</p>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons la balise ayant comme class "classe_selecteurB".

Exemple de code CSS du sélecteur par attribut class :
.classe_selecteurB{ color : red; }

Dans l'exemple suivant, nous ciblons la balise B ayant comme class "classe_selecteurB".
Code CSS de sélecteur de classe :

Exemple de code CSS du sélecteur par attribut class :
b.classe_selecteurB{ color : red; }

Compatibilité navigateur du sélecteur Css de classe

Le sélecteur Css de classe est reconnu par tous les navigateurs.

Sélecteur Css descendant

Qu'est-ce qu'un sélecteur Css descendant?

Le sélecteur CSS descendant permet de sélectionner un ou des enfants directs ou indirects.
Le sélecteur CSS descendant s'écrit : X Y.
- X : un des types de sélecteur Css, qui représente le parent.
- Y : un des types de sélecteur Css, qui représente l'enfant direct ou indirect de X.
Soit sélectionne tous les éléments Y contenu dans élément X.

Code HTML pour l'exemple de sélecteur Css descendant :
<p>
  <span>
    <b>sélecteur <b><b>Css</b> descendant</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>Css</b> descendant</b></b>
  </span>
</p>
Agrandir la zone de code

Dans l'exemple suivant, nous sélectionnons toutes les balises B contenues dans la balise P :

Exemple de code CSS du sélecteur descendant :
p b{ font-weight : normal; }

Dans l'exemple suivant, nous ciblons plus précisément, nous sélectionnons toutes les balises B contenues dans la balise B ayant comme classe "maclasse" qui elle-même est contenue dans une balise SPAN qui elle-même est contenue dans une balise P :

Exemple de code CSS du sélecteur descendant :
p span b.maclasse b{ font-weight : normal; }

Compatibilité navigateur du sélecteur Css descendant

Le sélecteur Css descendant est reconnu par tous les navigateurs.

Sélecteur Css d'enfants directs

Qu'est-ce qu'un sélecteur Css d'enfant?

Le sélecteur Css d'enfant permet de sélectionner l'enfant direct.
Le sélecteur Css d'enfant s'écrit : X > Y.
- X : un des types de sélecteur Css, qui représente le parent.
- Y : un des types de sélecteur Css, qui représente l'enfant direct de X à sélectionner.

Dans l'exemple suivant, la balise "B" contenant "css" n'est pas prise en compte puisqu'elle n'est pas l'enfant direct de "P" mais l'enfant direct de "B"

Code HTML pour l'exemple de sélecteur Css d'enfants directs :
<p>
  <b>sélecteur <b>css</b> d'enfant</b>
</p>

Exemple de code CSS du sélecteur d'enfant :
p > b{ font-weight : normal; }

Dans l'exemple suivant, nous ciblons les enfants directs de type SPAN qui ont comme enfants directs une balise B de classe "maclasse" qui elle-même a comme enfant direct une balise B.

Code HTML pour l'exemple du sélecteur d'enfant :
<p>
  <span>
    <b>sélecteur <b><b>css</b> d'enfant</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>css</b> d'enfant</b></b>
  </span>
</p>
Agrandir la zone de code

Exemple de code CSS du sélecteur d'enfant :
p > span > b.maclasse > b{ font-weight : normal; }

Compatibilité navigateur du sélecteur Css d'enfants directs

Le sélecteur Css d'enfant est reconnu par tous les navigateurs sauf Internet Explorer 6.

Sélecteur Css adjacent

Qu'est-ce que le sélecteur Css + adjacent?

Le sélecteur CSS "+" adjacent permet de sélectionner l'élément placé immédiatement après un autre élément.
Le sélecteur CSS "+" adjacent s'écrit : X + Y.

  • X : un des types de sélecteur Css, représente l'élément qui doit précéder immédiatement Y.
  • Y : un des types de sélecteur Css, représente l'élément cible.

Code HTML pour l'exemple de sélecteur Css adjacent :
<p>
    <u>Sélecteur +</u> <b>css adjacent</b>
    <u>Sélecteur +</u> <i>css</i> <b>adjacent</b>
  <span>
    <u>Sélecteur +</u> <i>css</i> <b>adjacent</b>
  </span>
</p>

Dans l'exemple suivant, nous ciblons la balise B adjacente à une balise U.

Exemple de code CSS du sélecteur + :
U + B { color : red; }

Exemple de sélecteur Css adjacent :

Sélecteur + css adjacent
Sélecteur + css adjacent Sélecteur + css adjacent
Sélecteur + css adjacent

Exemple de sélecteur Css adjacent

Dans l'exemple suivant, nous ciblons la balise B adjacente à une balise U contenue dans une balise SPAN, elle-même contenue dans une balise P.

Exemple de code CSS du sélecteur + :
P SPAN U + B { color : red;}

Exemple de sélecteur Css adjacent :

Sélecteur + css adjacent
Sélecteur + css adjacent Sélecteur + css adjacent
Sélecteur + css adjacent

Exemple de sélecteur Css adjacent

Compatibilité navigateur du sélecteur Css adjacent

Le sélecteur Css adjacent est reconnu par tous les navigateurs, sauf par Internet Explorer 6 et inférieure

Sélecteur Css précédé par

Qu'est-ce que le sélecteur Css ~?

Le sélecteur Css ~ permet de sélectionner tous les éléments Y qui sont situés après l'élément X et ayant le même parent.
Le sélecteur Css ~ s'écrit : X ~ Y.
- X : un des types de sélecteur Css, représente l'élément qui doit précéder Y.
- Y : un des types de sélecteur Css, représente l'élément ciblé.

Code HTML pour l'exemple de sélecteur Css précédé par :
<p>
  <span>
    <u>Sélecteur ~</u> <b>CSS :</b> <u>je suis après,</u> <u>je suis après mois aussi</u>
    <br>
    <u>Sélecteur ~</u> <b>CSS :</b> <u>je suis après,</u> <u>je suis après mois aussi</u>
  </span>
</p>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons toutes les balises U situées après une balise B .

Exemple de code CSS ~ :
b ~ u { color : red; }

Exemple de sélecteur Css précédé par :

sélecteur ~ CSS : je suis après, je suis après mois aussi
sélecteur ~ CSS : je suis après, je suis après mois aussi

Exemple de code CSS ~

Compatibilité navigateur du sélecteur Css précédé par

Le sélecteur CSS ~ est reconnu par tous les navigateurs sauf par Internet Explorer < 7, Safari < 3 et Opera < 9.

Sélecteur Css d'attribut

Qu'est-ce qu'un sélecteur Css d'attribut?

Le sélecteur Css d'attribut permet de sélectionner un balise (X)HTML en fonction de ses attributs et des valeurs de ses attributs. Vous pouvez juxtaposer plusieurs sélecteurs Css d'attribut.

Le sélecteur Css d'attribut permet peut prendre plusieurs valeurs :

  • [attribut] , sélectionne l'élément A ayant comme attribut "attribut" quelle soit sa valeur.
  • [attribut=valeur] , sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur est égale à "valeur".
  • [attribut~=valeur] , sélectionne l'élément ayant comme attribut "attribut" et dont la valeur est une liste de valeurs séparées par des espaces et dont une de ses valeurs est égale à "valeur".
  • [attribut|=valeur] , sélectionne l'élément ayant comme attribut "attribut" et dont la valeur est une liste de valeurs séparées par des espaces et dont la première de ses valeurs est égale à "valeur" immédiatement suivi d'un tiret (U+002D) soit "valeur -" ou si sa valeur est exactement égale à "valeur".
  • [attribut$=valeur] , sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur se termine par "valeur".
  • [attribut^=valeur] , sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur commence par "valeur".
  • [attribut*=valeur] , sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur contient la chaine "valeur".
Code HTML pour les exemples :
<p>
  <span>
    <b id="unid">sélecteur <b><b title="Feuille de style" lang="fr">css</b> d'attribut html</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur</b> <b lang="en">css</b> <b>d'attribut html</b>
  </span>
</p>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons toutes les balises ayant un attribut lang .

Exemple de code CSS de sélecteur d'attribut :
 [lang]{ color : red; }

Exemple de sélecteur d'attribut :

sélecteur css d'attribut html
sélecteur css d'attribut html

Exemple de sélecteur Css d'attribut

Dans l'exemple suivant, nous ciblons toutes les balises ayant un attribut lang=fr .

Exemple de code CSS de sélecteur d'attribut :
 [lang='fr']{ color : red; }

Exemple de sélecteur d'attribut :

sélecteur css d'attribut html
sélecteur css d'attribut html

Exemple de sélecteur Css d'attribut

Dans l'exemple suivant, nous ciblons toutes les balises ayant un attribut class comportant "ma".

Exemple de code CSS de sélecteur d'attribut :
[class*='ma']{ color : red; }

Exemple de sélecteur Css d'attribut :

sélecteur css d'attribut html
sélecteur css d'attribut html

Exemple de sélecteur Css d'attribut

Compatibilité navigateur du sélecteur Css d'attribut

Le sélecteur Css d'attribut est reconnu par tous les navigateurs, sauf par Internet Explorer <= 6, Opera < 9 et Safari < 3

Sélecteur Css de négation

Qu'est-ce qu'un sélecteur Css de négation?

Le sélecteur Css permet d'exclure d'un ou plusieurs éléments du ciblage. Pour cela, vous devez utiliser le sélecteur d'exclusion :not() Css.

Code HTML pour les exemples :
<ol>
  <li class="widget wdg-1">widget 1</li>
  <li class="widget wdg-2">widget 2</li>
  <li class="widget wdg-3">widget 3</li>
</ol>

Dans l'exemple suivant, nous ciblons toutes les classes widget saut wdg-2 .

Exemple de code CSS :not() :
.widget:not(.wdg-2){ border : 1px solid red }
Exemple de sélecteur de négation :
  1. widget 1
  2. widget 2
  3. widget 3

Copie d'écran :

Compatibilité navigateur du sélecteur Css de négation

Le sélecteur Css de négation est reconnu par tous les navigateurs les nouveaux navigateurs (> 2010)

Sélecteur Css du premier fils

Qu'est-ce qu'un sélecteur Css de premier fils?

Le sélecteur CSS :first-child sélectionner toutes les premières balises fille.

Code HTML pour les exemples :
<ul>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
    <span><b>Element</b><sub>indice</sub></span>
  </li>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
  </li>
  <li>
    <span>Element seul</span>
  </li>
</ul>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons toutes les premières balises filles de UL .

Exemple de code CSS :first-child :
ul :first-child{ text-decoration : underline; }

Exemple de sélecteur Css :first-child :

  • Elementcarre Elementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :first-child

Dans l'exemple suivant, nous ciblons toutes les premières balises filles directes de UL .

Exemple de code CSS :first-child :
ul > :first-child{ text-decoration : underline; }

Exemple de sélecteur Css :first-child :

  • Elementcarre Elementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :first-child

Dans l'exemple suivant, nous ciblons toutes les premières balises filles de type SPAN de UL .

Exemple de code CSS :first-child :
ul span:first-child{ text-decoration : underline; }

Exemple de sélecteur Css :first-child :

  • Elementcarre Elementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :first-child

Sélecteur Css du dernier fils

Qu'est-ce qu'un sélecteur Css de dernier fils?

Le sélecteur CSS :last-child permet de sélectionner la dernière balise fille.

Code HTML pour les exemples :
<ul>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
    <span><b>Element</b><sub>indice</sub></span>
  </li>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
  </li>
  <li>
    <span>Element seul</span>
  </li>
</ul>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons toutes les dernières balises filles de UL .

Exemple de code CSS :last-child :
ul :last-child{ text-decoration : underline; }

Exemple de sélecteur Css :last-child :

  • Elementcarre Elementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :last-child

Dans l'exemple suivant, nous ciblons toutes les dernières balises filles directes de UL .

Exemple de code CSS :last-child :
ul > :last-child{ text-decoration : underline; }

Exemple de sélecteur Css :last-child :

  • Elementcarre Elementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :last-child

Dans l'exemple suivant, nous ciblons toutes les dernières balises filles de type SPAN de UL .

Exemple de code CSS :last-child :
ul span:last-child{ text-decoration : underline; }

Exemple de sélecteur Css :last-child :

  • Elementcarre Elementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :last-child

Sélecteur Css pseudo-classe

Qu'est-ce qu'un sélecteur Css pseudo-classe?

Le sélecteur Css pseudo-classe permet de sélectionner un balise (X)HTML sur des caractéristiques autres que leur nom, les attributs ou le contenu. Par exemple en fonction d'une "action" ou "état".
first-child et lang() sont des exceptions.
Dans les sélecteurs Css pseudo-classe vous avez entre autre :

  • :not() , exprime la négation,
  • :link , état d'un lien non visité, voir Gestion des liens en Css,
  • :visited , état d'un lien visité,
  • :hover , état d'un élément survolé avec la souris,
  • :focus , état d'un élément qui a le focus,
  • :active , état d'un élément qui est activé.
  • :target , état d'un élément qui est ciblé par l'ancre présente dans l'url.
  • :lang , élément dont la langue est par exemple fr -> lang(fr).
  • :first-child , premier fils d'un élément.
  • :last-child , dernier fils d'un élément.
  • :nth-child et :nth-last-child , les n-ième enfants d'un élément.
  • :nth-last-child et :nth-last-child , les n-ième enfants en commençant par la fin d'un élément.
  • :nth-of-type et :nth-last-of-type , les n-ième enfants de même type d'un élément.
  • :nth-last-of-type et :nth-last-of-type , les n-ième enfants de même type d'un élément en commençant par la fin.
  • :only-child et :only-of-type permet de cibler les fils de type uniques.
La pseudo-classe peut être mise n'importe où dans le chemin de sélection.

Compatibilité navigateur du sélecteur Css pseudo-classe

La compatibilité de chaque pseudo-classe CSS est décrite dans leur définition.

Sélecteur Css de première lettre

Qu'est-ce qu'un sélecteur Css de première lettre?

Le sélecteur CSS :first-letter permet de sélectionner la première lettre du contenu texte d'une balise.

Code HTML pour les exemples :
<ul>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
    <span><b>Element</b><sub>indice</sub></span>
  </li>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
  </li>
  <li>
    <span>Element seul</span>
  </li>
</ul>
Agrandir la zone de code

Dans l'exemple suivant, nous ciblons toutes les premières lignes dans UL .

Exemple de code CSS :first-letter :
ul :first-letter{ color : red; }
ul:first-letter{ color : red; }
ul li:first-letter{ color : red; }

Exemple de sélecteur Css :first-letter :

  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
Exemple de sélecteur Css :first-line

Sélecteur Css de première ligne

Qu'est-ce qu'un sélecteur Css de première ligne?

Le sélecteur CSS :first-line permet de sélectionner la première ligne de texte du contenu d'une balise.

Code HTML pour les exemples :
<p>Post emensos insuperabilis expeditionis event....</p>
<ul>
  <li>Elément LI 1<br>Elément LI 2</li>
  <li>Elément LI<br><p>Elément P<br>Elément2 P<p></li>
  <li>Elément LI</li>
</ul>

Dans l'exemple suivant, nous ciblons toutes les premières lignes dans UL .

Exemple de code CSS :first-line:
ul :first-line{ color : red; }

Exemple de sélecteur Css :first-line :

  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
Exemple de sélecteur Css :first-line

Dans l'exemple suivant, nous ciblons la première ligne du UL et P .
Vous remarquez que le UL n'a pas de première ligne.

Exemple de code CSS :first-line :
ul:first-line{ color : red; }
p:first-line{ color : red; }

Exemple de sélecteur Css :first-line :

  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI

Post emensos insuperabilis expeditionis eventus languentibus partium animis, quas periculorum varietas fregerat et laborum, nondum tubarum cessante clangore vel milite locato per stationes

Exemple de sélecteur Css :first-line

Sélecteur Css pseudo-élément

Qu'est qu'un sélecteur Css pseudo-élément?

Le sélecteur Css pseudo-élément permet de sélectionner des "parties de code" qui ne sont pas disponibles en tant que nœuds dans l'arbre du document.
Dans les sélecteurs Css pseudo-élément vous avez :

  • :first-line , qui sélectionne la première ligne d'un élément HTML,
  • :first-letter , qui sélectionne la première lettre d'un élément HTML,
  • :after , qui permet d'insérer du contenu CSS au début d'un élément HTML,
  • :before , qui permet d'insérer du contenu CSS à la fin d'un élément HTML,
  • ::placeholder , qui sélectionne la valeur affichée de l'attribut placeholder dans un élément de formulaire.
  • ::selection , qui permet de cibler le texte sélectionné par l'utilisateur.
Le pseudo-élément ne peut être mis qu' en fin de chemin de sélection.

Compatibilité navigateur du sélecteur Css pseudo-élément

La compatibilité de chaque pseudo-élément CSS est décrite dans leur définition.

Comment faire des sélecteurs performants

Introduction

L'optimisation css des sélecteurs n'a pas vraiment d'incidence sur des petites pages, mais plus vous aurez de balises imbriquées avec des grandes profondeurs de fils, plus vous aurez intérêt à faire de l'optimisation des sélecteurs CSS
Ce chapitre est plus là à titre d'information.
Après lecture, vous constaterez que certains exemples précédents ne sont pas optimisés. C'est normal, ils sont là pour vous permettre de comprendre le fonctionnement des sélecteurs CSS.

Catégories de règles

Maintenant que vous avec compris les différents sélecteurs, vous devez savoir que les sélecteurs CSS sont séparés en quatre catégories :

  • 1 - chemin d'identifiant,
  • 2 - chemin de classe,
  • 3 - chemin de balise,
  • 4 - chemin universel.

La performance d'attribution des règles CSS décroit suivant le chemin d'assignation. Chemin d'identifiant est plus performant que le chemin universel.

Exemple de chemin d'identifiant :
#monid {}
#monid[type="autocomplete"] { }
div > span > a#monid:active { }

Exemple de chemin de classe :
span.maclass { }
.maclass { }
form > .maclass[checked="true"] { }

Exemple de chemin de balise :
td { }
table > td { }
input[type="checkbox"] { }

Exemple de chemin universel :
[hidden="true"] { }
* {…}
table > [collapsed="true"] { }

Assignation d'une règle par le navigateur

Les navigateurs lisent les sélecteurs CSS de droite à gauche.
Donc si nous avons le sélecteur suivant div div > span a[title="home"] , le premier élément traité sera a[title="home"] . Puis le navigateur remonte progressivement pour chercher un parent direct ou indirect SPAN , puis il vérifie que ce dernier est l'enfant direct d'un DIV , etc...

Donc dans la plupart des cas, évitez des chemins de sélection trop longs.

Définitions annexes

Définitions CSS annexes

::placeholder
Le pseudo-élément CSS : ::PLACEHOLDER permet de cibler le texte de remplacement spécifié par l'attribut placeholder d'un élément. Exemple d'écriture CSS...[ ::placeholder ]
::selection
Le pseudo-élément CSS : ::SELECTION permet de cibler le texte sélectionné par l'utilisateur.Exemple d'écriture CSS de ::selection ::selection { /* Propr...[ ::selection ]
:active
La pseudo-classe d'action CSS :ACTIVE permet d'assigner des propriétés CSS à un élément HTML durant le moment où l'internaute clique sur ce dernier av...[ :active ]
:after
Le pseudo-élément CSS :AFTER de spécifier qu'un "contenu CSS" sera inséré à la fin du contenu d'un élément (x)HTML ou d'assigner à ce "contenu CSS" de...[ :after ]
:before
Le pseudo-élément CSS :BEFORE permet de spécifier qu'un "contenu CSS" sera inséré avant le contenu d'un élément (X)HTML et d'assigner à ce "contenu CS...[ :before ]
:first-child
La pseudo-classe CSS :FIRST-CHILD permet de cibler le premier fils d'un élément HTML afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de...[ :first-child ]
:first-letter
Le pseudo-élément CSS :FIRST-LETTER permet de spécifier des propriétés CSS pour la première lettre d'un élément dit de type bloc et si elle est précéd...[ :first-letter ]
:first-line
Le pseudo-élément CSS :FIRST-LINE permet de spécifier les propriétés CSS de la première ligne d'un élément HTML.Exemple d'écriture CSS de :first-line ...[ :first-line ]
:focus
La pseudo-classe d'action CSS :FOCUS permet d'assigner des propriétés CSS à un élément HTML qui accepte le focus et à ses fils durant le moment où il ...[ :focus ]
:hover
La pseudo-classe d'action CSS :HOVER permet d'assigner des propriétés CSS à un élément HTML et à ses fils durant le moment où il est survolé par le cu...[ :hover ]
:lang
La pseudo-classe CSS :LANG permet de cibler un élément HTML en fonction de sa langue afin de lui assigner des propriétés CSS.Exemple d'écriture CSS ...[ :lang ]
:last-child
La pseudo-classe CSS :LAST-CHILD permet de cibler le dernier fils d'un élément HTML ou XHTML afin de lui assigner des propriétés CSS.Exemple d'écritur...[ :last-child ]
:link
La pseudo-classe CSS :LINK permet d'assigner des propriétés CSS à tous les liens (A) qui n'ont pas été visités et à ses fils.Exemple d'écriture CSS :l...[ :link ]
:not
La pseudo-classe de négation CSS :NOT permet de spécifier des règles d'exclusion d'un ou plusieurs éléments à exclure du ciblage. Exemple d'écriture...[ :not ]
:nth-child
La pseudo-classe CSS :NTH-CHILD permet de cibler les n-ième enfants dans la liste des enfants de son élément HTML ou XHTML parent, afin de leur assi...[ :nth-child ]
:nth-last-child
La pseudo-classe CSS :NTH-LAST-CHILD permet de cibler les n-ième enfants d'un élément afin de leur assigner des propriétés CSS.Exemple d'écriture CS...[ :nth-last-child ]
:nth-last-of-type
La pseudo-classe CSS :NTH-LAST-OF-TYPE permet de cibler les n-ième enfants en partant de la fin de chaque liste d'enfants de même type HTML de son é...[ :nth-last-of-type ]
:nth-of-type
La pseudo-classe CSS :NTH-OF-TYPE permet de cibler les n-ième enfants en partant du début de chaque liste d'enfants de même type HTML de son élément...[ :nth-of-type ]
:only-child
La pseudo-classe CSS :ONLY-CHILD permet de cibler l'enfant qui est le seul élément dans son élément HTML parent afin de lui assigner des propriétés CS...[ :only-child ]
:only-of-type
La pseudo-classe CSS :ONLY-OF-TYPE permet de cibler l'enfant qui est le seul élément de son type HTML ou XHTML dans la liste des enfants de son élémen...[ :only-of-type ]
:target
La pseudo-classe CSS :TARGET permet de cibler tous les éléments ayant pour attribut id dont la valeur (moins le #) est égale l'ancre(#mon_ancre) prése...[ :target ]
:visited
La pseudo-classe CSS :VISITED permet d'assigner des propriétés CSS à une balise HTML A dont le lien a déjà été visité et à ses fils.Exemple d'écriture...[ :visited ]
[attribut]
Le sélecteur CSS d' [ATTRIBUT] [attribut operateur valeur] permet de sélectionner un élément en fonction d'un de ses attributs et leurs valeurs.Exemple d...[ [attribut] ]
universel
Le sélecteur UNIVERSEL CSS * (astérisque ou étoile) permet de sélectionner n'importe quel élément, quel que soit son type.Exemple d'écriture CSS de * ...[


Poids des sélecteurs Css - Les cours Css _ ZONE CSS

Sommaire détaillé de la page Afficher Sommaire
  1. Les héritages de ciblage Css
  2. La règle du poids des sélecteurs Css
    1. Comment utiliser la règle du poids?
    2. Poids de sélecteurs Css particuliers
  3. Ciblage à un sélecteur Css
    1. Poids du sélecteur Css : id vs. class
    2. Poids du sélecteur Css : id vs. balise
    3. Poids du sélecteur Css : balise vs. class
  4. Ciblage à un deux sélecteurs Css
    1. Comprendre le poids quand le chemin à deux sélecteurs Css
    2. Les exemples de poids à deux sélecteurs Css
  5. Le ciblage à plusieurs sélecteurs Css
    1. Les exemples poids à plusieurs sélecteurs Css
    2. Sélecteurs Css particuliers
  6. Définitions annexes

Les héritages de ciblage Css

Le poids du sélecteur Css influence l'héritage d'une porpriété Css

Le but de ce chapitre de comprendre le poids des sélecteurs Css.
Connaître le poids de votre sélecteur Css par rapport à un autre, n'est utile que dans le cas où l'on surcharge la Css.
Surcharger la Css, c'est-à-dire que l'on ajoute des propriétés de feuilles de style ou qu'on redéfinit des propriétés de feuilles de style à un élément, c'est ce cas qui nous intéresse dans ce chapitre.
En effet, dans le cas où nous ajoutons une propriété, il n'y a pas de notion de poids du sélecteur. Par contre, si l'on veut modifier une propriété déjà existante dans certain cas les éléments héritent, dans d'autres ils n'héritent pas. C'est le poids qui va déterminer cet héritage, nous allons essayer de comprendre tout cela.

Dans ce chapitre, je parle de cible et chemin :
C'est le chemin que vous utilisez pour assigner une ou des propriétés de feuilles de styles Css. La cible c'est l'élément auquel vous voulez assigner les propriétés Css.
Le chemin est composé d'un ou plusieurs sélecteurs Css.
Dans l'exemple suivant, le chemin c'est #menusecondaire #menu a et la cible, c'est " a" :

Exemple de code :
#menusecondaire #menu a { border:1px solid red; }

Pour l'héritage même des propriétés , c'est-à-dire liée à la propriété Css et à son héritage par rapport à son parent, il vous suffit d'aller trouver l'information dans la définition de la propriété Css dans la partie "Héritage".

La règle du poids des sélecteurs Css

Comment utiliser la règle du poids?

Pour déterminer le poids d'un sélecteur Css par rapport à un autre, il vous suffit de remplir le tableau ci-dessous :

 | !important | Dans l'attribut style | Nb #id | Nb .class | Nb Balise
Ciblage a | 0 | 0 | 0 | 0 | 0
Ciblage b | 0 | 0 | 0 | 0 | 0

Dans Attribut style : mettre en poids "1" si vos propriétés sont dans un attribut style .
nb #ID : mettre en poids le nombre d' id qui constitue votre chemin de ciblage.
Nb .class : mettre en poids le nombre de class ou pseudo-classes qui constitue votre chemin de ciblage.
Nb Balise : mettre en poids le nombre de balises ou pseudo-éléments qui constitue votre chemin de ciblage.

Une fois le tableau remplie pour vos ciblages à comparer, vous pouvez comparer leurs poids. L'importance se fait par colonne de gauche à droite. S'il n'y a pas égalité, c'est la valeur la plus grande qui l'emporte; sinon, je passe à la colonne de droite suivante.
Si les chemins ont des poids identiques dans chaque colonne, alors c'est la dernière déclaration de la propriété Css qui est prise en compte.

Vous trouverez plus bas plusieurs exemples à un, deux sélecteurs Css ou plus.

Poids de sélecteurs Css particuliers

Quelques informations sur la valeur de certain sélecteur Css :
p.maclass : compte 1 pour la balise et 1 pour la class
p#monId : compte 1 pour la balise et 1 pour l' id
body > p : compte 2 pour la balise et " <" n'est pas pris en compte.
div + div.maclass : compte 2 pour la balise et 1 pour la class et " +" n'est pas pris en compte.
p:first-line : compte 1 pour la balise et compte 1 pour la balise , car les pseudo-éléments sont considérés comme balise .
p:first-child : compte 1 pour la balise et 1 pour la class . Les pseudo-classes sont considérées comme class .
p[id="monId"] : compte 1 pour la balise et 1 pour la class , quelle que soit la valeur de l'attribut [att=valeur] correspond a une classe.
p:not(.maclass) : compte 1 pour la balise et 1 pour la class . La négation ne compte pas en elle-même, mais son contenu oui.
* (sélecteur Css universel ) : compte n'est pas pris en compte.

Attention si vous avez ! important dans une de vos propriétés cela change les règles, car elle est prioritaire sur toutes les règles de ci-dessus.

Ciblage à un sélecteur Css

Poids du sélecteur Css : id vs. class

Quoi qu'il arrive, pour un ciblage et propriétés Css identiques, c'est les propriétés Css du sélecteur Css d' id qui prennent le dessus sur les propriétés Css du sélecteur Css de class . Vous pouvez inverser les déclarations, ou les attributs cela ne changera rien.

Ecriture Css d'un sélecteur Css sur l'Id ou sur la class :
.class-css{ /* 0|0|0|1|0 */
  border:1px solid green;
}
#id-css{ /* 0|0|1|0|0 */
  border:1px solid red;
}

Code HTML utilisé :
<p id="id-css" class="class-css">
Les propriétés css de l'id écrasent celles de la classe
</p>

Résultat :

Les propriétés css de l'id écrasent celles de la classe

Poids du sélecteur Css : id vs. balise

Quoi qu'il arrive, pour un ciblage et propriétés Css identiques, c'est les propriétés Css du sélecteur Css d' id qui prennent le dessus sur les propriétés Css du sélecteur Css de balise HTML. Vous pouvez inverser les déclarations Css, cela ne changera rien.

Ecriture Css d'un sélecteur Css sur l'Id ou sur la balise HTML:
q{ /* 0|0|0|0|1 */
  border:1px solid green;
}
#id-css{ /* 0|0|1|0|0 */
  border:1px solid red;
}

Code HTML utilisé :
<q id="id-css">
Les propriétés css de l'id écrasent celles de la balise
</q>

Résultat :

Les propriétés Css de l'id écrasent celles de la balise

Poids du sélecteur Css : balise vs. class

Quoi qu'il arrive pour un ciblage et propriétés Css identiques, c'est les propriétés Css du sélecteur Css de class qui prennent le dessus sur les propriétés Css du sélecteur Css de balise HTML. Vous pouvez inverser les déclarations Css, cela ne changera rien.

Ecriture Css d'un sélecteur Css sur la balise HTML ou sur la class :
q{ /* 0|0|0|0|1 */
  border:1px solid green;
}
.class-css{ /* 0|0|0|1|0 */
  border:1px solid red;
}

Code HTML utilisé :
<q class="class-css">
Les propriétés css de la classe écrasent celles de la balise
</q>

Résultat :

Les propriétés css de la classe écrasent celles de la balise

Ciblage à un deux sélecteurs Css

Comprendre le poids quand le chemin à deux sélecteurs Css

Voici quelques exemples pour illustrer les règles d'héritage liées au ciblage avec deux sélecteurs.
Pour cela nous utiliserons la structure HTML suivante.

Code HTML utilisé :
<div id="id-conteneur" class="class-conteneur">
  <div id="id-contenant" class="class-contenant">
    <div id="id-contenu" class="class-contenu">
      <div id="id-paragraphe" class="class-paragraphe">
        <div id="id-paragraphecont" class="class-paragraphecont">
          <div id="id-texte" class="class-texte"> mon texte </div>
        </div>
      </div>
    </div>
  </div>
</div>
Agrandir la zone de code

Dans tous les exemples suivant nous essayerons d'appliquer une bordure rouge à la dernière balise dont l'identifiant (id) est id-texte en essayant d'annuler la première déclaration de bordure verte.

Les exemples de poids à deux sélecteurs Css

Premier exemple de sélection Css :

Code CSS utilisé :
#id-paragraphecont div{ /* 0|0|1|0|1 */
  border:1px solid green;
}
div #id-texte{ /* 0|0|1|0|1 */
  border:1px solid red;
}

Je suis encadré de rouge

Les deux déclarations ont un schéma de force identique (0|0|1|0|1), c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.
Second exemple de sélection Css :

Code CSS utilisé :
/* Déclaration 1 */
#id-paragraphecont div{ /* 0|0|1|0|1 */
  border:1px solid green;
}
/* Déclaration 2 */
div .class-texte{ /* 0|0|0|1|1 */
  border:1px solid red;
}

Je suis encadré de vert

Les deux déclarations sont de force identique mais ont un tableau de force différent (x|x|x|x|x).
La règle qui s'appliquera sera la première règle qui est la plus forte. Il faut comparer chaque colonne de gauche à droite.
Dans notre cas, c'est id de la "Déclaration 1" qui prend le dessus, vous pouvez inverser l'ordre cela sera toujours le cas.

 | !important | Dans l'attribut style | Nb #id | Nb .class | Nb Balise
Déclaration 1 | 0 | 0 | 1 | 0 | 1
Déclaration 2 | 0 | 0 | 0 | 1 | 1

Troisième exemple de sélection css :

Code CSS utilisé :
/* Déclaration 1 */
#id-paragraphecont div{  /* 0|0|1|0|1 */
  border:1px solid green;
}
/* Déclaration 2 */
.class-paragraphecont #id-texte{ /* 0|0|1|1|0 */
border:1px solid red;
}

Résultat :

Je suis encadré de rouge

Les deux déclarations sont de force identique mais ont un tableau de force différent (x|x|x|x|x).
La deuxième déclaration prend le dessus, car c'est la classe qui prend le dessus , vous pouvez inverser l'ordre cela sera toujours le cas.

Le ciblage à plusieurs sélecteurs Css

Les exemples poids à plusieurs sélecteurs Css

Premier exemple, le premier ciblage se fait directement sur l' id et le second se fait en spécifiant toutes les balises parentes.

Code CSS utilisé :
#id-texte{ /* 0|0|1|0|0 */
  border:1px solid green;
}
div div div div #id-texte{ /* 0|0|1|0|4 */
  border:1px solid red;
}

Résultat :

Je suis encadré de rouge

Le second ciblage prend le dessus quel que soit l'ordre des déclarations des ciblages.

Second exemple, le premier ciblage se fait en précisant le premier id et le second se fait en précisant l'id de la cible dans les deux cas, on ajoute les balises intermédiaires.

Code CSS utilisé :
#id-conteneur div div div div{ /* 0|0|1|0|4 */
border:1px solid green;
}
div div div div #id-texte{ /* 0|0|1|0|4 */
border:1px solid red;
}

Résultat :

Je suis encadré de rouge

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.

Troisième exemple, le premier ciblage se fait en précisant le premier id et le second se fait en précisant l'id de la cible dans les deux cas on ajoute les balises intermédiaires.

Code CSS utilisé :
div #id-contenant div div div{ /* 0|0|1|0|4 */
  border:1px solid green;
}
div div div div #id-texte{ /* 0|0|1|0|4 */
  border:1px solid red;
}

Résultat :

Je suis encadré de rouge

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.

Sélecteurs Css particuliers

Premier exemple, le premier ciblage se fait en précisant le premier id et deux balises intermédiaires et le second se fait en précisant le premier id et en ciblant le div fils du div suivant.

Code CSS utilisé :
#id-paragraphe div div{ /* 0|0|1|0|2 */
  border:1px solid green;
}
#id-paragraphe div > div{ /* 0|0|1|0|2 */
  border:1px solid red;
}

Résultat :

Je suis encadré de rouge

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.

Deuxième exemple, le premier ciblage se fait en ciblant le div adjacent et le second de manière classique.

Code HTML utilisé :
<div id="id-conteneurdd" class="class-conteneurdd">
    <div id="id-contenantdd" class="class-contenantdd">
      <div id="id-contenudd" class="class-contenudd">
        <div id="id-paragraphedd" class="class-paragraphedd"></div>
        <div id="id-textedd" class="class-textedd">Je suis encadré de rouge </div>
      </div>
    </div>
</div>

Code CSS utilisé :
#id-contenu .class-paragraphe div + div{ /* 0|0|1|1|2 */
  border:1px solid red;
}
#id-conteneur div div .class-texte{ /* 0|0|1|1|2 */
  border:1px solid green;
}

Résultat :

Je suis encadré de rouge

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.


Les formats de couleur CSS - Les cours Css _ ZONE CSS

Sommaire détaillé de la page Afficher Sommaire
  1. Les couleurs en Css
  2. Les couleurs Css nommées
    1. Comment écrire une couleur CSS nommée?
  3. Les couleurs Css hexadécimales
    1. Comment écrire une couleur CSS hexadécimale?
  4. Les couleurs Css en rgb
    1. Comment écrire une couleur CSS rgb?
  5. Les couleurs Css en rgba
    1. Comment écrire une couleur CSS rgba?
  6. Les couleurs Css en hsl et hlsa
    1. Comment écrire une couleur hsl ou hlsa?

Les couleurs en Css

Comment écrire des couleurs en CSS

Quelle que soit la propriété de couleur CSS ( color , border-color , background-color ), les formats de couleurs Css sont gérés de la même façon.
Il existe plusieurs façons de spécifier une couleur en Css :

  • en la nommant.
  • en spécifiant son code hexadécimal.
  • en utilisant le format rgb (rvb en français).
  • en utilisant le format rgba (rvba en français, nouveauté prise en compte vers 2010),
  • en utilisant le format hsl et hsla (hsl en français, nouveauté prise en compte vers 2010),

Convertisseur RGV, HSL, Hexadécimal et transparence

Les couleurs Css nommées

Comment écrire une couleur CSS nommée?

Une couleur nommée en CSS est un nom donné à une couleur bien précise qui ne changera jamais suivant les navigateurs.
Vous pouvez spécifier une couleur en css en utilisant une des 216 couleurs prédéfinies :

Exemple d'écriture d'une couleur nommée :
.couleur-css { color : coral }
.couleur-css { color : red }

Quelques exemples :

aqua | black | blue | fuchsia
gray | green | lime | maroon
navy | olive | purple | red
silver | teal | white | yellow

Les 216 noms de couleurs WEB prédéfinies

Les couleurs Css hexadécimales

Comment écrire une couleur CSS hexadécimale?

Vous pouvez spécifier une couleur en Css en spécifiant sa valeur hexadécimale :

Exemple d'écriture d'une couleur hexadécimale :
.couleur-css { color: #ff0000 } /* #rrggbb */

Quand les valeurs dans le couple rr et gg et bb sont identiques vous pouvez simplifier en ne mettant que seule des deux valeurs r, g et b (sont doublées automatiquement):

Exemple d'écriture raccourcie d'une couleur hexadécimale :
.couleur-css { color: #f00 } /* #rgb */

Il existe plusieurs couleurs hexadécimales prédéfinies.

Les couleurs hexadécimales

Les couleurs Css en rgb

Comment écrire une couleur CSS rgb?

Le format de couleur rgb est l'abréviation de "red, green, blue" soit en français "rouge, vert, bleu".

Le format de couleur CSS rgb accepte 3 valeurs entières comprises entre 0 et 250 ou 3 valeurs entières en pourcentage. La valeur entière 255 correspond à 100% . Vous ne devez pas mélanger les unités.

Exemple d'écriture d'une couleur en RGB :
.couleur-css { color: rgb(255, 0, 0) } /* 0 - 255 */
.couleur-css { color: rgb(100%, 0%, 0%) } /* 0 - 100 */

Les couleurs RGB

Les couleurs Css en rgba

Comment écrire une couleur CSS rgba?

Le format de couleur rgba CSS est l'abréviation de "red, green, blue, alpha" soit en français "rouge, vert, bleu, transparence".
Le format de couleur CSS rgba est un nouveau format qui commence à être interprété vers 2010.

La couleur Css rgba accepte 3 valeurs entières comprises entre 0 et 255 ou 3 valeurs entières en pourcentage et une valeur entre 0 (transparent) et 1 opaque.
Si vous êtes en pourcentage 100% représente 255. Vous ne pouvez pas mélanger les unités.

Ecriture d'une couleur RGBA :
.couleur-css { color: rgba(255, 0, 0, 1) } /* 0 - 255 */
.couleur-css { color: rgba(100%, 0%, 0%, 0.6) }/* 0 - 100 */

Compatibilité des couleurs RGB et RGBA avec les navigateurs.

Les couleurs Css en hsl et hlsa

Comment écrire une couleur hsl ou hlsa?

La couleur Css hsl est l'abréviation de "Hue, Saturation, Lightness" soit en français "Teinte, Saturation, Luminosité".
La couleur Css hsla est l'abréviation de "Hue, Saturation, Lightness, Alpha" soit en français "Teinte, Saturation, Luminosité, Transparence".

Le format de couleur CSS hsl et hsla sont des nouveaux formats qui commencent à être interprétés vers 2010.

hsl accepte 3 valeurs entières dans l'ordre cité :
- une valeur entière comprise entre 0 et 360, l'unité est le degré, représente la teinte.
- une valeur entière comprise entre 0 et 100, l'unité est le pourcentage, représente la saturation.
- une valeur entière comprise entre 0 et 100, l'unité est le pourcentage, représente la luminosité.
hsla accepte les 3 valeurs ci-dessus et une valeur comprise entre 0 (totalement transparent) et 1(totalement opaque).

Exemple d'écriture d'une couleur en hsl et hsla :
.couleur-css { color: hsl(240, 100%, 50%) }
.couleur-css { color: hsla(240, 100%, 50%, 0.6) }

Compatibilité des couleurs HSL et HSLA avec les navigateurs.


Les unités de longueurs Css - Les cours Css _ ZONE CSS

  1. Les unités absolues et relatives
  2. Les unités en "em" et "rem"
    1. Définition de l'unité "em"
    2. Les em imbriqués
    3. Autre utilisation de l'unité "em"
    4. Définition de l'unité "rem"
  3. Les unités en pourcentage
    1. Ecriture des pourcentages
    2. Elément de référence pour les blocs
    3. Référence pour les fonts
  4. Tableau de conversion approximatives
    1. Conversion
  5. Accessibilité
    1. Définition
  6. Mac pas comme Pc pour l'affichage des fontes
    1. Définition
  7. Définitions annexes

Les unités absolues et relatives

Introduction

Il existe plusieurs unités de longueurs absolues :

  • pt , point (mesure typographique). Le point est égal à 1/72 de pouce.
  • pc , pica (mesure typographique). Un pica est égal à 12 points.
  • in , pouce (inch). Un pouce est égal à 2.54 cm, 6 picas est égal à pouce.
  • cm , centimètre.
  • mm , millimètre.
Nous ne nous attarderons pas ces unités qui sont plus destinées pour l'impression ( @media de type print).
  • px , une quantité de pixels, en fonction de l'appareil de visualisation.
Nous ne nous attarderons pas 'px', qui est l'unité la plus courante, car la plus facile à utiliser. Cependant si vous pouvez vous en passer faites le.

Les unités de longueurs relatives :

  • ex , x-height (voir définition plus bas).
  • em , m-length.
  • rem , root m-length.
  • % , pourcentage.

Autres unités de longueur CSS 3 et compatibilités

Définition de l'unité "ex"

L'unité relative ex se base sur la hauteur de la lettre minuscule " x" de la police (fonte).

L'unité relative ex varie suivant la fonte utilisée et de la valeur de font-size du bloc parent.
Attention : Internet Explorer ou Opera considèrent que 1ex = 0.5em quant à Netscape ou Firefox , ils essaient de déterminer la hauteur de l'unité relative ex en se basant sur les informations contenues par la fonte.
En clair, l'unité relative ex n'est pas fiable.

Les unités en "em" et "rem"

Définition de l'unité "em"

L'unité relative em est nommée " cadratin " en typographie française. Anciennement le cadratin correspond à la hauteur d'un caractère de plomb utilisé dans l'imprimerie. p] em se base sur la hauteur de la police (fonte).

L'unité relative em varie suivant la fonte utilisée et de la valeur de font-size du bloc parent.
Par défaut, l'unité relative em prendra comme hauteur de la taille de police (font) du navigateur spécifiée par défaut ou par l'utilisateur (via la roulette de la souris / affichage->taille de texte).
En règle générale notre navigateur est paramétré sur une taille moyenne ce qui correspond à la valeur de font-size medium (pour le w3c), cependant cette valeur par défaut varie suivant le navigateur par exemple Internet Explorer < 7 à une valeur à small .

Il semble que faire utiliser l'unité " em " ou " % " soit identique pour ce qui est de propriété CSS font-size .

  • 1em est identique à 100%.
  • 1.2em est identique à 120%.
  • 0.7em est identique à 70%.

Mettre vos tailles de polices en unité relative em améliore l'accessibilité de vote site web.

Les em imbriqués

Dans le cas d'éléments imbriqués l'unité relative em se base sur la valeur de ' font-size' du bloc parent, ce qui peut être compliqué à gérer.

Code CSS pour l'exemple des em imbriqués :
span{
  font-size : 1.5em; /* base du document medium */
}

Code HTML pour l'exemple des em imbriqués :
<span>
  Texte d'environ 24px
  <span>
    Texte d'environ 36px
    <span>
      Texte d'environ 54px
    </span>
  </span>
</span>
Agrandir la zone de code

Autre utilisation de l'unité "em"

Si vous utiliser l'unité CSS " em " pour spécifier une longueur comme par exemple pour border-width , padding , margin , etc..., la valeur de base est la valeur calculée ou spécifiée de font-size de l'élément.

Définition de l'unité "rem"

L'unité relative rem fonctionne sur comme "em" mais elle utilise comme valeur de référence le font-size du document et non la valeur de font-size du parent.
Dans le cas d'éléments imbriqués l'unité relative rem a toujours la même taille.

Code CSS pour l'exemple des rem imbriqués :
span{
  font-size : 1.5rem; /* base du document medium */
}

Code HTML pour l'exemple des rem imbriqués :
<span>
  Texte d'environ 24px
  <span>
    Texte d'environ 24px
    <span>
      Texte d'environ 24px
    </span>
  </span>
</span>
Agrandir la zone de code

Si vous utilisez l'unité relative rem , attention à sa compatibilité navigateur.

Les unités en pourcentage

Ecriture des pourcentages

Par défaut, un pourcentage est positif mettre 10% revient à dire +10%. Il ne faut donc pas spécifier le +. Mais le pourcentage peut être négatif dans ce cas vous devez mettre un " -" (-10%).
Le pourcentage se fait toujours par rapport à une autre valeur.

Elément de référence pour les blocs

Dans le cas des propriétés CSS qui acceptent des pourcentages comme width , margin , padding , left , etc...; la valeur de référence est la valeur calculée ou spécifiée de width de leur parent.
D'autres comme height , bottom , min-height , etc..., ont comme la référence la valeur calculée ou spécifiée de height de leur parent.

Pour la longueur par exemple, si vous spécifiez un bloc de taille 50% ( width:50% ); la taille de ce bloc fera 50% du width de son parent, padding non inclus.
Dans l'exemple suivant la hauteur et longueur calculées du bloc "bloc2" sera de 100px et 200px :

Code CSS pour l'exemple des pourcentages :
#bloc1{
  width : 400px;
  height : 200px;
  border : 1px solid red;
  padding : 50px;
}
#bloc2{
  width : 50%;
  height : 50%;
  border : 1px solid green;
}
Agrandir la zone de code

Code HTML pour l'exemple des pourcentages :
<div id="bloc1">
  <div id="bloc2"></div>
</div>

Référence pour les fonts

Pour une taille font-size en pourcentage, la valeur de référence est la valeur de font-size héritée de son parent.
Si aucune font-size n'a été précisé dans le document, alors c'est la valeur par défaut du navigateur (valeur variable suivant le navigateur).

Dans l'exemple suivant le pourcentage se fait sur la valeur de "block1":

Code CSS pour l'exemple des pourcentages :
#block1{
  font-size : medium;
}
#block2{
  font-size : 50%; /* soit 8px */
}

Code HTML pour l'exemple des pourcentages :
<div id="block1">
  Texte large
  <div id="block2">Texte en pourcentage</div>
</div>

Pour une taille line-height en pourcentage, la valeur de référence est la valeur calculée ou spécifiée de font-size de l'élément.
Dans l'exemple suivant le pourcentage se fait sur la valeur de font-size de "block2" :

Code CSS pour l'exemple des pourcentages :
#block1{
  font-size : medium;
}
#block2{
  font-size : 50%; /* soit 8px */
  line-height : 50%; /* soit 4px */
}

Code HTML pour l'exemple des pourcentages :
<div id="block1">
  Texte large
  <div id="block2">Texte en pourcentage</div>
</div>

Tableau de conversion approximatives

Conversion

J'ai trouvé un tableau de correspondances entre les unités pt, pixel, em et pourcent.
Ce sont des valeurs approximatives.
Nous nous basons sur une valeur par défaut de font-size égale medium.

Points | Pixels | Ems | Percent
6pt | 8px | 0.5em | 50%
7pt | 9px | 0.55em | 55%
7.5pt | 10px | 0.625em | 62.5%
8pt | 11px | 0.7em | 70%
9pt | 12px | 0.75em | 75%
10pt | 13px | 0.8em | 80%
10.5pt | 14px | 0.875em | 87.5%
11pt | 15px | 0.95em | 95%
12pt | 16px | 1em | 100%
13pt | 17px | 1.05em | 105%
13.5pt | 18px | 1.125em | 112.5%
14pt | 19px | 1.2em | 120%
14.5pt | 20px | 1.25em | 125%
15pt | 21px | 1.3em | 130%
16pt | 22px | 1.4em | 140%
17pt | 23px | 1.45em | 145%
18pt | 24px | 1.5em | 150%
20pt | 26px | 1.6em | 160%
22pt | 29px | 1.8em | 180%
24pt | 32px | 2em | 200%
26pt | 35px | 2.2em | 220%
27pt | 36px | 2.25em | 225%
28pt | 37px | 2.3em | 230%
29pt | 38px | 2.35em | 235%
30pt | 40px | 2.45em | 245%
32pt | 42px | 2.55em | 255%
34pt | 45px | 2.75em | 275%
36pt | 48px | 3em | 300%

Source du tableau : Convertir des PX en Em, % ou Pt d'unité de longueur css3

Accessibilité

Définition

Pour la taille des polices, il est préférable d'utiliser des unités de longueurs relatives ou des pourcentages. En effet certaines personnes pour un confort de lecture augment dans leur navigateur la grosseur de la police, les tailles absolues ne bougeront pas (dépend du navigateur)

Mac pas comme Pc pour l'affichage des fontes

Définition

Sous Pc la résolution de l'écran est de 96 dpi (points par pouce), sous Mac la résolution écran est de 72 dpi (points par pouce) donc un point serait donc exactement un point d'image (Pixel) donc la taille affichée sous mac sera d'1/3 plus petite que sur un système Windows.

Définitions annexes

Définitions CSS annexes

@media{}
La règle CSS @MEDIA{} permet de créer d'autres propriétés pour divers supports appelé aussi média (print, screen) au sein d'une même feuille de style. O...[ @media{} ]
border-width
La propriété CSS BORDER-WIDTH est un raccourci qui permet de spécifier l'épaisseur des quatre bordures d'un élément.Exemple d'écriture CSS de border-w...[ border-width ]
bottom
La propriété CSS BOTTOM permet de spécifier la position du bord bas de la marge d'un élément positionné par rapport au bord bas de son parent servant ...[ bottom ]
font-size
La propriété CSS FONT-SIZE permet de spécifier la taille de la fonte dans lequel sera affiché le texte.Exemple d'écriture CSS de font-size font-size :...[ font-size ]
height
La propriété CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de height ...[ height ]
left
La propriété CSS LEFT permet de spécifier la position du bord gauche de la marge d'un élément positionné par rapport au bord gauche de son parent serv...[ left ]
line-height
La propriété CSS LINE-HEIGHT permet de spécifier la hauteur d'une ligne de texte et donc aussi de gérer l'espace entre les lignes. Exemple d'écriture ...[ line-height ]
margin
La propriété CSS MARGIN permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordure de l'él...[ margin ]
min-height
La propriété CSS MIN-HEIGHT permet de spécifier une hauteur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture ...[ min-height ]
padding
La propriété CSS PADDING permet de spécifier individuellement ou globalement l'espace qui sépare le contenu d'un élément de sa bordure de chaque côté....[ padding ]
width
La propriété CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de width w...[


Les unités d'angles Css - Les cours Css _ ZONE CSS

  1. Les unités d'angles Css
    1. Quelles sont les unités d'angles uilisées en Css
  2. Correspondances entre les unités Css deg, rad, grad et turn
    1. Equivalences des angles en degré, radian, grade et turn
  3. Compatibilité navigateurs des unités d'angles Css
    1. Unité d'angle Css en degré
    2. Unité d'angle Css en gradient
    3. Unité d'angle Css en radian
    4. Unité d'angle Css en turns

Les unités d'angles Css

Quelles sont les unités d'angles uilisées en Css

En CSS, un angle peut avoir comme unité :

  • deg qui permet d'exprimer un angle en degré. L'angle complet d'un cercle correspond à 360deg . Attention, le symbole classique est " °" mais pas en CSS.
  • grad permet d'exprimer un angle en grade ou gradian. L'angle complet d'un cercle correspond à 400grad . Attention, le symbole classique est " gon" mais pas en CSS.
  • rad permet d'exprimer un angle en radian. L'angle complet d'un cercle correspond à environ 6.2832rad ou 2 πrad.
  • turn permet d'exprimer un angle en turn ou tours. L'angle complet d'un cercle correspond 1turn . Attention, le symbole classique est " tr" mais pas en CSS.

Si l' angle est positif alors la rotation se fait vers la droite, dans le sens horaire, par exemple : +30deg identique à 30deg .
Si l' angle est négatif la rotation se fait vers la gauche, dans le sens anti-horaire, par exemple : -30deg .

Utilisez le convertisseur d'angles pour trouver les équivalences d'un angle en degré, radian, grade (gradian) ou turn (tour).

Correspondances entre les unités Css deg, rad, grad et turn

Equivalences des angles en degré, radian, grade et turn

Voici quelques correspondances entre l'unité d'angle Css en degré, l'unité d'angle Css en radian, l'unité d'angle Css en grade et l'unité d'angle Css en turn.

Pour un angle droit l'équivalence est :

Equivalence pour un angle droit en degré, radian, grade et turn :
Rotation vers la droite :
90deg = 100grad = 0.25turn = 1.5708rad
Rotation vers la gauche :
-90deg = -100grad = -0.25turn =  -1.5708.rad

Pour un angle plat l'équivalence est :

Equivalence pour un angle plat en degré, radian, grade et turn :
Rotation dans le sens horaire :
180deg = 200grad = 0.5turn = 3.1416rad
Rotation dans le sens anti-horaire :
-180deg = -200grad = -0.5turn = -3.1416rad

Pour un angle nul l'équivalence est :

Equivalence pour un angle nul en degré, radian, grade et turn :
0deg = 0grad = 0turn = 0rad

Pour un tour complet l'équivalence est :

Equivalence pour un tour complet en degré, radian, grade et turn :
Rotation dans le sens horaire :
360deg = 400grad = 1turn = 6.2832rad
Rotation dans le sens anti-horaire :
-360deg = -400grad = -1turn = -6.2832rad

Vous trouverez le convertisseur d'angles en degré, radian, grade et turn.

Compatibilité navigateurs des unités d'angles Css

Unité d'angle Css en degré

L'unité d'angle Css exprimée en degré est compatible avec :

  • Firefox, à partir de la version 3.6.
  • Internet Explorer, à partir de la version 9.
  • Chrome, à partir de la version 2.
  • Safari, à partir de la version 4.
  • Opera, à partir de la version 10.

Unité d'angle Css en gradient

L'unité d'angle Css exprimée en gradient est compatible avec :

  • Firefox, à partir de la version 3.6.
  • Internet Explorer, à partir de la version 9.
  • Chrome, à partir de la version 2.
  • Safari, à partir de la version 4.
  • Opera, à partir de la version 10.

Unité d'angle Css en radian

L'unité d'angle Css exprimée en radian est compatible avec :

  • Firefox, à partir de la version 3.6.
  • Internet Explorer, à partir de la version 9.
  • Chrome, à partir de la version 2.
  • Safari, à partir de la version 4.
  • Opera, à partir de la version 10.

Unité d'angle Css en turns

L'unité d'angle Css exprimée en turns est compatible avec :

  • Firefox, à partir de la version 13.
  • Internet Explorer, à partir de la version 9.
  • Chrome, à partir de la version 38.
  • Safari, à partir de la version 5.
  • Opera, à partir de la version 25.


Les types de médias - Les cours Css _ ZONE CSS

Qu'est qu'un média?

Définition

Le média va vous permettre de spécifier le support pour lequel est destiné un ensemble de propriétés css.

Par exemple, vous pouvez avoir des propriétés css destinées à l'affichage sur l'écran et d'autres propriétés css destinées à l'impression de la page.

Exemple de code :
<style media="screen">/*Affichage écran*/</style> <style media="print">   /*impression*/ </style>

Comment le spécifier?

Vous pouvez spécifier un ou des médias grâce à l'attribut HTML ou XHTML MEDIA :

Code HTML :
<link media="print" href="macss.css"/>
<style media="screen,print">
</style>

Vous pouvez spécifier un ou des médias dans la css même grâce à la règle @import ou @media :

Code CSS :
@import url("testimport.css");
@media screen, print{}

Les types de média

Les types

Certaines balises HTML ou XHTML et des règles CSS ont besoin que l'on précise un média :

all , convient pour tous les appareils ;
aural , pour les synthétiseurs de parole (spécification HTML4 et désapprouvé en CSS 2.1 au profit de speech );
braille , pour les appareils braille à retour tactile ;
embossed , pour les appareils à impression braille (spécification CSS 2.1) ;
handheld , pour les appareils portatifs (typiquement ceux avec petits écrans, monochromes et à bande passante limitée) ;
print , destiné à un support paginé opaque et aux documents vus sur écran en mode aperçu avant impression.
projection , pour les présentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents.
screen , pour principalement les moniteurs couleurs ;
tty , pour les médias utilisant une grille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifs aux capacités d'affichage réduites. Les auteurs ne devraient pas utiliser de valeurs exprimées en pixel avec ce type de média ;
tv , pour les appareils du type télévision (avec ces caractéristiques : basse résolution, couleur, défilement des pages limité, sonorisé).

Les groupes de média

Les groupes

Les types de média font également partie de différents groupes de médias :

 | Types
Groupes | braille | embossed | handheld | print
continu | X |  | X |
paginé |  | X | X | X
audio |  |  | X |
oral |  |  | X |
tactile | X | X |  |
grille | X | X | X |
bitmap |  |  | X | X
interactif | X |  | X |
statique | X | X | X | X
 | Types
Groupes | projection | screen | speech | tty | tv
continu |  | X | X | X | X
paginé | X |  |  |  | X
audio |  | X |  |  | X
oral |  |  | X |  |
tactile |  |  |  |  |
grille |  |  |  | X |
bitmap | X | X | X |  |
interactif | X | X | X | X | X
statique |  | X | X | X | X


Les marges Css avec padding et margin - Les cours Css _ ZONE CSS

Différence entre padding et margin en Css

Quelle est la différence entre le margin et padding en Css

Où se trouve le padding Css et le margin Css Le padding Css correspond aux quatre marges entre la bordure (border) et le contenu d'un élément. On l'appelle aussi marge intérieure et n'a d'intéraction que dans le bloc.
Le margin correspond aux quatre marges entre sa bordure extérieure et la bordure extérieure de l'élément adjacent. On l'appelle aussi marges extérieures et n'a d'interaction qu'avec les éléments qui l'entoure.

Dans ce cours nous étudierons, les comportements particuliers des marges extérieures Css margin et des marges intérieures Css padding .

Les propriétés Css pour définir le padding Css

Pour définir le padding Css, vous devez utiliser les propriété du même nom padding , cette dernière permet de spécifier les quatre padding Css en une seule fois. Mais vous pouvez aussi préciser individuellement chaque padding Css en utilisant une des propriétés suivante :

  • padding-left : marge gauche du padding Css.
  • padding-right : marge droite du padding Css.
  • padding-top : marge haute du padding Css.
  • padding-bottom : marge basse du padding Css.

Les propriétés Css pour définir le margin Css

Pour définir le margin Css, vous devez utiliser les propriété du même nom margin , cette dernière permet de spécifier les quatre margin Css en une seule fois. Mais vous pouvez aussi préciser individuellement chaque margin Css en utilisant une des propriétés suivante :

  • margin-left : marge gauche du margin Css.
  • margin-right : marge droite du margin Css.
  • margin-top : marge haute du margin Css.
  • margin-bottom : marge basse du margin Css.

Comportement du padding Css pour les marges intérieures

Les padding Css pour les éléments de type inline

Sur les éléments ayant la propriété CSS display : inline ou les éléments type inline comme la balise (x)HTML span , b , i , etc...; les marges Css intérieures verticales padding-top et padding-bottom ne sont pas prises en compte dans le calcul de leur hauteur ( height ).
Seul la Css line-height est utilisée pour le calcul de la hauteur.
Le conteneur de ses éléments du coup s'adapte à la hauteur ( line-height ), ce qui fait que les marges Css intérieures verticales sortent du conteneur. Nous remarquons bien ce phénomène dans l'exemple suivant.

Exemple de code HTML pour l'application d'un padding sur un élément inline :
<div>
  <span> avec padding 10px</span>
</div>

Exemple de code Css pour l'application d'un padding sur un élément inline :
div{
  background-color : #ccc;
}
span{
  padding : 10px;
  background-color : green;
}

Résultat de l'application d'un padding sur un élément de type inline :

avec padding 10px

Solutions possibles pour prendre en compte les padding Css verticaux

Plusieurs solutions sont possibles pour que la hauteur du conteneur prenne en compte les marges intérieures verticales.
La première solution consiste à changer le type en inline-block :

Code CSS avec changement de display :
div{
  background-color : #ccc;
}
span{
  display : inline-block;
  padding : 10px;
  background-color : green;
}

Résultat :

avec padding 10px

La seconde solution consiste à mettre changer overflow du conteneur :

Code CSS avec changement d'overflow :
div{
  background-color : #ccc;
  overflow : hidden;
}
span{
  padding : 10px;
  background-color : green;
}

Résultat :

avec padding 10px

Les padding Css et la taille des éléments de type bloc

Quand vous spécifiez une taille ( width ou height ) sur un élément de type bloc et que vous lui assignez des marges Css intérieures de padding, ces dernières sont ajoutées à la taille. Vous vous retrouvez donc avec une hauteur ou longueur est en réalité plus grande.

Comportement du margin Css pour les marges extérieures

Les margin Css extérieures horizontales

Les marges extérieures horizontales ( margin-left et margin-right ) de deux éléments côte à côte ne fusionnent pas.

Les margin Css extérieures verticales adjacentes

Les marges extérieures verticales ( margin-top et margin-bottom ) de deux éléments de type bloc côte à côte fusionnent. C'est la plus grande des deux qui est retenue.

Code HTML pour l'exemple :
<div class="margina"> margin 30px </div>
<div class="marginb"> margin 20px</div>

Code CSS avec changement d'overflow :
.margina{
  margin : 30px;
}
.marginb{
  margin : 20px;
}

Résultat :

margin 30px
margin 20px

Les marges extérieures verticales ne fusionnent pas quand les éléments sont :

  • flottant, float .
  • de type inline-block , display .
  • de type inline dans ce cas les marges verticales sont ignorées pour la fusion, display .
  • en position absolue, position .

Les margin Css verticales et le conteneur parent.

Dans le cas où, le premier et dernier enfant sont de type bloc :
Si aucune height spécifiée ou height:auto , alors la hauteur calculée du parent est la distance entre le bord de la bordure haute du premier enfant de type bloc et le bord de la bordure du bas du dernier enfant de type bloc.
Dans ce cas, s'il y a un margin-top spécifié sur le premier enfant et qu'il est de type bloc, ce dernier sort de la hauteur du bloc et idem pour s'il y a margin-bottom sur le dernier bloc enfant.

Toutefois, si l'élément parent a une bordure haute non nulle, alors le contenu commence au bord de la marge haute du premier l'enfant s'il est de type bloc. De même, si l'élément parent a une bordure basse non nulle, alors le contenu finit au bord de la marge basse du dernier enfant s'il est de type bloc.

Si l'élément parent a un overflow:hidden alors le phénomène est identique mais sur les deux marges verticales.

Définitions annexes

Définitions CSS annexes

display
La propriété CSS DISPLAY permet de modifier le type de rendu d'un élément.Exemple d'écriture CSS de display display : block; display : inline; display...[ display ]
float
La propriété CSS FLOAT permet de spécifier qu'un élément flotte à gauche, à droite ou pas du tout au sein de son élément conteneur. Si l'élément est f...[ float ]
height
La propriété CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de height ...[ height ]
line-height
La propriété CSS LINE-HEIGHT permet de spécifier la hauteur d'une ligne de texte et donc aussi de gérer l'espace entre les lignes. Exemple d'écriture ...[ line-height ]
margin
La propriété CSS MARGIN permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordure de l'él...[ margin ]
margin-bottom
La propriété CSS MARGIN-BOTTOM permet de spécifier l'espace entre la bordure basse d'un élément HTML ou XHTML et la bordure haute de l'élément adjacen...[ margin-bottom ]
margin-left
La propriété CSS MARGIN-LEFT permet de spécifier l'espace entre la bordure gauche d'un élément HTML ou XHTML et la marge extérieure droite de l'élémen...[ margin-left ]
margin-right
La propriété CSS MARGIN-RIGHT permet de spécifier l'espace entre la bordure droite d'un élément HTML ou XHTML et la marge extérieure gauche de l'éléme...[ margin-right ]
margin-top
La propriété CSS MARGIN-TOP qui permet de spécifier l'espace entre la bordure haute d'un élément HTML ou XHTML et la bordure basse de l'élément adjace...[ margin-top ]
padding
La propriété CSS PADDING permet de spécifier individuellement ou globalement l'espace qui sépare le contenu d'un élément de sa bordure de chaque côté....[ padding ]
padding-bottom
La propriété CSS PADDING-BOTTOM permet de modifier l'espace entre le contenu d'un élément et sa bordure basse. La Css padding-bottom est nommée marge ...[ padding-bottom ]
padding-left
La propriété CSS PADDING-LEFT permet de modifier l'espace entre le contenu d'un élément et sa bordure gauche. La Css padding-left est nommée marge Css...[ padding-left ]
padding-right
La propriété CSS PADDING-RIGHT permet de modifier l'espace entre le contenu d'un élément et sa bordure droite. La Css padding-right est nommée marge C...[ padding-right ]
padding-top
La propriété CSS PADDING-TOP permet de modifier l'espace entre le contenu d'un élément et sa bordure haute. La Css padding-top est nommée marge Css in...[ padding-top ]
position
La propriété CSS POSITION permet de spécifier si un élément est positionné ou pas et spécifie par la même occasion son type de positionnement pour dét...[ position ]

Définitions HTML annexes

span
La balise HTML et XHTML SPAN est utilisée pour créer des propriétes css à un endroit précis. Dans ce cas, la balise HTML et XHTML <SPAN> n'introduit p...[ span ]
b
La balise HTML et XHTML B met un texte en gras.<B> </B> Exemple: Texte Cours Html : ...[ b ]
i
La balise HTML et XHTML I met le texte en italique.<I> </I> Exemple : Vernet n'était pas un à embarras. Cours Html : ...[ i ]


Les dégradés de couleurs - Les cours Css _ ZONE CSS

  1. Définition
    1. Definition
  2. Dégradé linéaire
    1. Exemple de code CSC pour un dégradé linéaire
    2. Compatibilité et Hacks de compatibilité
    3. Définitions
  3. Dégradé radial
    1. Exemple de code CSS pour un dégradé radial
    2. Compatibilité et Hacks de compatibilité
  4. Définitions annexes

Définition

Definition

Avec l'arrivé de CSS3 et les nouvelles versions des navigateurs, on parle de plus en plus des dégradés linéaires ou radiaux, qui commencent à être pris en charge.

Le W3C spécifie que la fonction pour faire des dégradés linéaires est :
- linear-gradient()
Le W3C spécifie que la fonction pour faire des dégradés radiaux est :
- radial-gradient()
Cependant, à ce jour (10/05/2012) chaque navigateur à sa propre CSS.

Nous allons dans ce chapitre étudier comment faire le dégradé :
- linéaire assigné à la propriété Css background ou background-image .
- radial assigné à la propriété Css background ou background-image .

*) "à ce jour", "aujourd'hui" => 10/05/2012

Dégradé linéaire

Exemple de code CSC pour un dégradé linéaire

Exemple de code :
/* Source ColorZilla. */ /* Old browsers */   background: #1e5799; /* IE9 SVG, needs conditional override of 'filter' to 'none' */   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI3JSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iI2M1Y2VkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjczJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6+ */   background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 27%, #c5ced6 49%, #207cca 73%, #7db9e8 100%); /* Chrome,Safari4+ */   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(27%,#2989d8), color-stop(49%,#c5ced6), color-stop(73%,#207cca), color-stop(100%,#7db9e8)); /* Chrome10+,Safari5.1+ */   background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* Opera 11.10+ */   background: -o-linear-gradient(top, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* IE10+ */   background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* W3C */   background: linear-gradient(to bottom, #1e5799 0%,#2989d8 27%,#c5ced6 49%,#207cca 73%,#7db9e8 100%); /* IE6-8 */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

Ce que vous devez voir :

Compatibilité et Hacks de compatibilité

La norme W3C (Draft 10/01/2012) spécifie que pour faire un dégradé linéaire, il faut utiliser linear-gradient() .
Le problème c'est qu'à ce jour seul Firefox 16+ serait en mesure de l'interpréter.
Voici donc la liste des hacks pour chaque navigateur.
Pour Safari 4+ et Chrome 1.0+ :

  • -webkit-gradient(linear,...)

Pour Safari 5.1+ et Chrome 10+ :
  • -webkit-linear-gradient()

Pour Firefox 3.6+ et < 16 :
  • -moz-linear-gradient()

Pour Opera 11.10+ :
  • -o-linear-gradient()

Pour Internet Explore 6+ et < 10 :
  • filter: progid:DXImageTransform.Microsoft.Gradient()

Pour Internet Explore 10+ :
  • -ms-linear-gradient()

Pour les autres c'est une couleur de background.

Editeur de dégradé linéaire

Définitions

Définition -moz-linear-gradient() :

Dégradé radial

Exemple de code CSS pour un dégradé radial

Exemple de code :
/* Source ColorZilla. */ /* Old browsers */   background: #1e5799; /* IE9 SVG, needs conditional override of 'filter' to 'none' */   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyOCUiIHN0b3AtY29sb3I9IiMyOTg5ZDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0OSUiIHN0b3AtY29sb3I9IiNjOWQwZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NiUiIHN0b3AtY29sb3I9IiMyMDdjY2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6+ */   background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #2989d8 28%, #c9d0d6 49%, #207cca 66%, #7db9e8 100%); /* Chrome,Safari4+ */   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(28%,#2989d8), color-stop(49%,#c9d0d6), color-stop(66%,#207cca), color-stop(100%,#7db9e8)); /* Chrome10+,Safari5.1+ */   background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* Opera 12+ */   background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* IE10+ */   background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* W3C */   background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 28%,#c9d0d6 49%,#207cca 66%,#7db9e8 100%); /* IE6-8 fallback on horizontal gradient */   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

Ce que vous devez voir :

Compatibilité et Hacks de compatibilité

La norme W3C (Draft 10/01/2012) spécifie que pour faire un dégradé radial, il faut utiliser radial-gradient() .
Le problème c'est qu'à ce jour seul Firefox 16+ serait en mesure de l'interpréter.
Voici donc la liste des hacks pour chaque navigateur.
Pour Safari 5.1+ et Chrome 10+ :

  • -webkit-gradient(radial,...)
  • -webkit-radial-gradient()

Pour Firefox 3.6+ et < 16 :
  • -moz-radial-gradient()

Pour Opera 10.6+ :
  • -o-radial-gradient()

Pour Internet Explore 6+ et < 10 :
  • filter: progid:DXImageTransform.Microsoft.Gradient()

Pour Internet Explore 10+ :
  • -ms-radial-gradient()

Pour les autres c'est une couleur de background.

Définitions annexes

Définitions CSS annexes

background
La propriété CSS BACKGROUND est un raccourci pour déclarer un ensemble de propriétés d'arrière plan (fond) en une seule fois. Exemple d'écriture CSS d...[ background ]
background-image
La propriété CSS BACKGROUND-IMAGE permet de mettre une image d'arrière-plan ou un dégradé de couleur linéaire en arrière-plan ou un dégradé de couleur...[ background-image ]


Les medias queries - Les cours Css _ ZONE CSS

  1. Qu'est-ce qu'une media query
    1. Définition d'une media query

Qu'est-ce qu'une media query

Définition d'une media query

Arrivées avec les CC3, les Media Queries vont vous permettre de spécifier des conditions pour l'application d'une feuille de styles spécifique.
Anciennement, il existait une seule condition qui était le support de consultation (screen, print, ...).
Aujourd'hui, la " Media Query" va vous permettre de compléter la condition de utilisation de la CSS grâce aux opérateurs logiques and "et", only "uniquement", not "non" et divers critères que nous étudierons dans le cours spécifique aux les Media Queries.
Vous pourrez utiliser la " Media Query" avec l'attribut HTML media:

Code HTML :
<link media="screen and (max-width: 640px)" href="macss.css"/>
<style media="screen and (max-width: 640px)">
</style>

Vous pourrez aussi utiliser la " Media Query" avec @import et @media :

Code CSS :
@import url("testimport.css") screen and (max-width: 640px);
@media screen and (max-width: 640px){}

Les Media Queries sont généralement utilisées pour modifier la charte d'un site quand celui-ci est visualisé par un mobile ou une tablette.
J'ai commencé un article sur les Media Queries que je compléterai au fur et à mesure de mes découvertes et de ma maitrise des Media Queries.

Cours détaillé sur Media Queries


Les transitions CSS3 - Les cours Css _ ZONE CSS

Le problème des transitions, c'est que les navigateurs ne prennent pas tous en charge les propriétés de déclarations des transitions CSS3, il faut généralement utiliser en plus les propriétés préfixées pour avoir une compatibilité maximale.

Cours détaillé sur les transitions CSS3

Définitions annexes

Définitions CSS annexes

transition-delay
La propriété CSS TRANSITION-DELAY permet de spécifier la durée de latence avant de démarrer la transition de chaque propriété transformable.Exemple d'...[ transition-delay ]
transition-duration
La propriété CSS TRANSITION-DURATION permet de spécifier la durée de la transition de chaque propriété transformable.Exemple d'écriture CSS de transit...[ transition-duration ]
transition-property
La propriété CSS TRANSITION-PROPERTY permet de spécifier les propriétés CSS qui doivent être transformées au moment du changement de leur valeur.Exemp...[ transition-property ]
transition-timing-function
La propriété CSS TRANSITION-TIMING-FUNCTION permet de spécifier la vitesse de progression de la transition au cours de la durée de son exécution.Exemp...[ transition-timing-function ]


Vu dans ... https://www.zonecss.fr/rechercher/proprietes-css-y.html

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés à vos centres d'intérêts. Ok En savoir plus

  • Aller au contenu principal
  • Références CSS lettre Y
  • Menu de la Zone Css
  • Aller à la recherche
  • Suivre la Zone CSS
  • Flux Références CSS lettre Y
  • Les Zones DMC
Menu du site
  1. Propriétés
    1. Propriétés CSS
      • A
      • B
      • C
      • D
      • E
      • F
      • G
      • H
      • I
      • J
      • K
      • L
      • M
      • N
      • O
      • P
      • Q
      • R
      • S
      • T
      • U
      • V
      • W
      • Z
    2. Propriétés Javascript
  2. Cours
    1. Cours de CSS
    2. Cours Javascript CSS
  3. FAQ
    1. Aides Css par thème
    2. Le laboratoire
  4. Rechercher
  5. Me suivre
    1. Twitter
    2. Facebook
    3. Google+
    4. Netvibes
  6. RSS
    1. RSS
    2. RSS Qrsrc
    3. RSS sur Yahoo
    4. Netvibes

Références CSS commençant de A à Z

Sommaire de l'article

Accueil > Rechercher > Références CSS > Références CSS lettre A à Z

Bloque le menu Sommaire de l'article

  1. Références CSS
    1. Pas de propriété css
  2. Les CSS de A à Z
    1. A
    2. B
    3. C
    4. D
    5. E
    6. F
    7. G
    8. H
    9. I
    10. J
    11. K
    12. L
    13. M
    14. N
    15. O
    16. P
    17. Q
    18. R
    19. S
    20. T
    21. U
    22. V
    23. W
    24. X
    25. Y
    26. Z
Aller en haut de la page Aller en bas de la page
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z

Pas de résultat

Aucune propriété de feuille de style (css) n'est associée à cette lettre.
N'hésitez pas à me contacter, si vous ne trouvez pas une définition d'une feuille de style.

Toutes les CSS par ordre alphabétique

Lettres

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
Aller en haut de la page
ZoneFLASH

Site dédié á l'actionscript. Des articles pour le webdesigner, le webmaster et développeur.

ZONE HTML XHTML

Site dédié au (X)HTML. Des articles pour le webdesigner, le webmaster et développeur.

ZONE INFO

Articles concernant entre autre la conception de site Internet. Des articles pour le webdesigner, le webmaster et développeur.

ZONE SEARCH

Site dédié pour faire une recherche sur l'ensemble des zones DMC.

Accueil
Liens utiles
Actus Zones
Copyright
Création Dmc


Références CSS commençant par A | ZONE CSS

Sélecteur CSS [attribut]

Le sélecteur CSS d' attribut [ attribut operateur valeur] permet de sélectionner un élément en fonction d'un de ses attribut s et leurs valeurs.Exemple d'écriture CSS du sélecteur d' attribut [class]{ /*Propriété CSS*/ } a[target="_blank"]{ /*Propriété CSS*/ } :not([class~=...

Sélecteur CSS :active

La pseudo-classe d'action CSS :active permet d'assigner des propriétés CSS à un élément HTML durant le moment où l'internaute clique sur ce dernier avec sa souris. La pseudo-classe :active CSS est utilisée entre autre pour les liens (balise A).Exemple d'écriture CSS :active a :active{ /* propri...

Sélecteur CSS :after

Le pseudo-élément CSS :after de spécifier qu'un "contenu CSS" sera inséré à la fin du contenu d'un élément (x)HTML ou d'assigner à ce "contenu CSS" des propriétés CSS.Exemple d'écriture CSS de :after identifianta :after{ content:"..."; }...

Propriété CSS align-content

La propriété CSS align-content permet de spécifier la manière dont est distribué l'espace restant entre les éléments flexibles Css multi-lignes ou multi-colonnes par rapport " l'axe transversal" de leur conteneur Flexbox Css.Exemple d'écriture CSS de align-content align-content : fle...

Propriété CSS align-items

La propriété CSS align-items permet de spécifier l'alignement les éléments "flexibles" par rapport à l'axe transversal de leur conteneur Flexbox.Exemple d'écriture CSS de align-items align-items : flex-start; align-items : flex-end; align-items : center; align-items : baseline; align-items ...

Propriété CSS align-self

La propriété CSS align-self permet de spécifier l'alignement d'un élément "flexible" par rapport à l'axe transversal de leur conteneur Flexbox.Exemple d'écriture CSS de align-self align-self : auto; align-self : flex-start; align-self : flex-end; align-self : center; align-self : baseline; ...

Propriété CSS alpha

alpha CSS n'est pas une propriété de feuille de style css mais une valeur de la propriété de feuille de style css filter qui est une feuille de style Internet Explorer. La valeur alpha de la propriété de feuille de style css filter permet de mettre de changer la transparence d'un élément. Pour...

Propriété CSS animation

La propriété CSS animation est un raccourci permet de spécifier l'ensemble des propriétés CSS d' animation à appliquer à l' animation .Exemple d'écriture CSS d' animation .mon- animation{ animation : une- animation 5s ease-out 0s infinite normal none; } @keyframes une- animation{ ...} La propri&eacut...

Propriété CSS animation-delay

La propriété CSS animation-delay permet de spécifier la durée de latence avant de démarrer chaque animation appliquée.Exemple d'écriture CSS d' animation-delay .mon-animation{ animation-name : animation0; animation-delay : 6s; } .mon-animation{ animation-name : animation1, animation2; animation-delay ...

Propriété CSS animation-direction

La propriété CSS animation-direction permet de spécifier le sens de lecture de l'animation appliquée, notamment pour les répétitions.Exemple d'écriture CSS d' animation-direction animation-direction : alternate; animation-direction : reverse; animation-direction : alternate-reverse; La propriét...

Propriété CSS animation-duration

La propriété CSS animation-duration permet de spécifier la durée totale de l'animation appliquée.Exemple d'écriture CSS d' animation-duration .mon-animation{ animation-name : animation0; animation-duration : 6s; } .mon-animation{ animation-name : animation1, animation2; animation-duration : 5s, 8s; } La prop...

Propriété CSS animation-fill-mode

La propriété CSS animation-fill-mode permet de spécifier à quel moment de l'animation les effets sont apparents (avant, après).Exemple d'écriture CSS d' animation-fill-mode animation-fill-mode : backwards; animation-fill-mode : forwards; animation-fill-mode : both; La propriété animation-fill-m...

Propriété CSS animation-iteration-count

La propriété CSS animation-iteration-count permet de spécifier le nombre de fois qu'est joué l'animation CSS3 appliquée.Exemple d'écriture CSS d' animation-iteration-count animation-iteration-count : 5; animation-iteration-count : infinite; La propriété animation-iteration-count CSS accepte une...

Propriété CSS animation-name

La propriété CSS animation-name permet de spécifier l'identifiant de l'animation CSS3 à appliquer.Exemple d'écriture CSS d' animation-name @keyframes animation-un{ ... } @keyframes animation-deux{ ... } .mon-animation{ animation-name : animation-un } .mon-animation1{ animation-name : animation-un, animation-deux } ...

Propriété CSS animation-play-state

La propriété CSS animation-play-state permet de spécifier si l'animation CSS3 appliquée est en pause ou pas.Exemple d'écriture CSS d' animation-play-state animation-play-state : running; animation-play-state : paused; La propriété animation-play-state CSS accepte une/des valeurs suivantes :- paused : ...

Propriété CSS animation-timing-function

La propriété CSS animation-timing-function permet de spécifier comment progresse l'animation CSS3 appliquée entre les images clés.Exemple d'écriture CSS d' animation-timing-function animation-timing-function : ease; animation-timing-function : ease-in-out; animation-timing-function : steps; La proprié...

Propriété CSS -moz-appearance

La propriété CSS -moz-appearance permet d'indiquer si l'élément doit être affiché avec la mise en forme provenant native du thème du système d'exploitation. Exemple d'écriture CSS de -moz-appearance .identifiant{ -moz-appearance : none; } La propriété de feuille de style -m...

Propriété CSS -webkit-appearance

La propriété CSS -webkit-appearance permet d'indiquer si l'élément doit être affiché avec la mise en forme native provenant du thème du système d'exploitation. Exemple d'écriture CSS de -webkit-appearance .identifiant{ -webkit-appearance : none; } La propriété de feuille de...

Propriété CSS azimuth

En construction...


Propriété CSS backface-visibility

La propriété CSS backface-visibility permet de spécifier si la face arrière d'un élément (X)HTML est cachée lorsqu'elle est orientée vers l'internaute, par exemple lors d'une rotation 3D.Exemple d'écriture CSS de backface-visibility backface-visibility : visible; backface-visibility : h...

Propriété CSS background

La propriété CSS background est un raccourci pour déclarer un ensemble de propriétés d'arrière plan (fond) en une seule fois. Exemple d'écriture CSS de background background : green url( background .gif); background : green url(/img/ background .gif) no-repeat scroll 10px 20px; /* Ecriture CSS 3*/ backgr...

Propriété CSS background-attachment

La propriété CSS background-attachment permet de fixer l'image d'arrière plan (image de fond) lorsque l'on utilise les barres de défilement.Exemple d'écriture CSS background-attachment background-attachment : scroll; background-attachment : fixed; background-attachment : local; La propriété de feuill...

Propriété CSS background-clip

La propriété CSS background-clip permet de gérer les limites de la zone d'arrière plan à l'intérieur de l'élément. La Css background-clip va influencer l'affichage de l'image d'arrière-plan ou de la couleur d'arrière-plan, déclarées avec la propriété C...

Propriété CSS -webkit-background-clip

La propriété CSS -webkit-background-clip permet de gérer les limites de la zone d'arrière-plan à l'intérieur de l'élément. La Css -webkit-background-clip influence l'affichage de la couleur d'arrière-plan ou celui de l'image d'arrière-plan, déclarées avec les propri...

Propriété CSS background-color

La propriété CSS background-color permet de spécifier la couleur de l'arrière plan ou couleur de fond d'un élément HTML ou XTHML. Cette couleur d'arrière-plan peut être totalement transparente, totalement opaque ou semi-transparente selon le format de couleur utilisé. Par défaut, ...

Propriété CSS background-image

La propriété CSS background-image permet de mettre une image d'arrière-plan ou un dégradé de couleur linéaire en arrière-plan ou un dégradé de couleur radial en arrière-plan. Par défaut, l'image d'arrière-plan ou le dégradé de couleur vont s'éte...

Propriété CSS background-origin

La propriété CSS background-origin permet de déterminer le point d'origine de la zone d'arrière-plan par rapport auquel la propriété Css background-position se base pour positionner l'image d'arrière-plan. L'image de fond est déclarée avec la propriété CSS background-image...

Propriété CSS background-position

La propriété CSS background-position permet de positionner l'image (image de fond) au sein de l'arrière-plan. Le coin haut gauche de l'image arrière-plan est positionné par rapport au point d'origine spécifiée par la propriété Css background-origin dans la zone d'arrière-plan. L'...

Propriété CSS background-repeat

La propriété CSS background-repeat permet de gérer la répétition horizontale ou/et verticale de l'image d'arrière-plan. La répétition de l'image d'arrière-plan se fait par rapport à sa position initiale spécifiée par la propriété Css background-positio...

Propriété CSS background-size

La propriété CSS background-size permet de modifier la taille de l'image d'arrière-plan à l'intérieur de la zone d'arrière plan spécifiée par la propriété Css background-clip. L'image de fond est déclarée avec la propriété CSS background-image ou backg...

Sélecteur CSS :before

Le pseudo-élément CSS :before permet de spécifier qu'un "contenu CSS" sera inséré avant le contenu d'un élément (X)HTML et d'assigner à ce "contenu CSS" des propriétés CSS.Exemple d'écriture CSS de :before identifianta :before{ content:"..."; }...

Fonction CSS blur()

La fonction CSS blur de la propriété CSS filter permet d'appliquer un filtre pour faire un effet de flou gaussien sur un élément. Exemple d'écriture CSS de filter :blur filter : blur 40px); filter : blur 4em); La fonction de feuille de style blur paramètre) CSS peut prendre comme paramètre :- un n...

Propriété CSS border

La propriété CSS border est un raccourci qui permet de spécifier le style de la bordure (pointillé, solide,...), l'épaisseur de la bordure et la couleur de la bordure des quatre bordures d'un élément (X)HTML.Exemple d'écriture CSS de border border : 2px solid red; border : 2px dashed rgb(144,2...

Propriété CSS border-bottom

La propriété CSS border-bottom est un raccourci qui permet de spécifier le style, l'épaisseur et la couleur de la bordure basse d'un élément (X)HTML. Exemple d'écriture CSS de border-bottom border-bottom : 6px double blue; border-bottom : ridge #87CEFA; border-bottom : rgb(222,184,135); La propri&eac...

Propriété CSS border-bottom-color

La propriété CSS border-bottom-color permet de spécifier la couleur de la bordure basse d'un élément (X)HTML.Exemple d'écriture CSS de border-bottom-color border-bottom-color : cornflowerblue; border-bottom-color : #6495ED; border-bottom-color : rgb(100,149,237); border-bottom-color : hsl(219,79%,66%); La p...

Propriété CSS border-bottom-left-radius

La propriété CSS border-bottom-left-radius permet d'arrondir le coin bas gauche d'un élément (X)HTML.Exemple d'écriture CSS de border-bottom-left-radius border-bottom-left-radius : 5px; border-bottom-left-radius : 5px 2px;La propriété de feuille de style border-bottom-left-radius CSS peut pendre une ...

Propriété CSS border-bottom-right-radius

La propriété CSS border-bottom-right-radius permet d'arrondir le coin bas droit d'un élément (X)HTML.Exemple d'écriture CSS de border-bottom-right-radius border-bottom-right-radius : 50%; border-bottom-right-radius : 5px 2em;La propriété de feuille de style border-bottom-right-radius CSS peut pendre ...

Propriété CSS border-bottom-style

La propriété CSS border-bottom-style permet de spécifier le style de la bordure basse d'un élément (X)HTML.Exemple d'écriture CSS de border-bottom-style border-bottom-style : solid; border-bottom-style : ridge; border-bottom-style : dotted; La propriété de feuille de style border-bottom-style ...

Propriété CSS border-bottom-width

La propriété CSS border-bottom-width permet de spécifier l'épaisseur de la bordure basse d'un élément (X)HTML.Exemple d'écriture CSS de border-bottom-width border-bottom-width : thick; border-bottom-width : 12px; border-bottom-width : 1em; La propriété de feuille de style border-bottom-...

Propriété CSS border-collapse

La propriété CSS border-collapse permet de spécifier si les bordures de la table et de ces cellules sont communes ou distinctes.Exemple d'écriture CSS de border-collapse border-collapse : separate; border-collapse : collapse; La propriété de feuille de style border-collapse CSS peut prendre la valeur de :- ...

Propriété CSS border-color

La propriété CSS border-color est un raccourci qui permet de spécifier la couleur des quatre bordures d'un élément (X)HTML.Exemple d'écriture CSS de border-color border-color : seagreen; border-color : #2E8B57; border-color : rgb(46,139,87); border-color : #2E8B57 rgba(46,139,87,0.5) seagreen hsl(146,50%,36...

Propriété CSS border-left

La propriété CSS border-left est un raccourci qui permet de spécifier le style, l'épaisseur et la couleur de la bordure gauche d'un élément (X)HTML.Exemple d'écriture CSS de border-left border-left : double 10px blue; border-left : 10px dotted; border-left : hsl(120,25%,65%);La propriété...

Propriété CSS border-left-color

La propriété CSS border-left-color permet de spécifier la couleur de la bordure gauche d'un élément (X)HTML.Exemple d'écriture CSS de border-left-color border-left-color : indigo; border-left-color : #4B0082; border-left-color : rgb(75,0,130); border-left-color : hsl(275,100%,25%); La propriété...

Propriété CSS border-left-style

La propriété CSS border-left-style permet de spécifier le style de la bordure gauche d'un élément (X)HTML.Exemple d'écriture CSS de border-left-style border-left-style : solid; border-left-style : double; border-left-style : groove; border-left-style : dashed; La propriété de feuille de style ...

Propriété CSS border-left-width

La propriété CSS border-left-width permet de spécifier l'épaisseur de la bordure gauche d'un élément (X)HTML.Exemple d'écriture CSS de border-left-width border-left-width : thin; border-left-width : 3px; border-left-width : 0.8em; La propriété de feuille de style border-left-width CSS p...

Propriété CSS border-radius

La propriété CSS border-radius est un raccourci qui permet d'arrondir les coins (ou angles) d'un élément (X)HTML.Exemple d'écriture CSS de border-radius border-radius : 5px; border-radius : 5px 2px; border-radius : 5px 2px 3px; border-radius : 5px 4px 3px 2px; La propriété de feuille de style border-...

Propriété CSS -moz-border-radius

La propriété CSS -moz-border-radius permet d'arrondir les coins d'un élément (X)HTML.Exemple d'écriture CSS de -moz-border-radius -moz-border-radius : 6em; -moz-border-radius : 5px 10px; -moz-border-radius : 20px 10px / 10px 5px; La propriété de feuille de style -moz-border-radius CSS peut pendre les...

Propriété CSS -webkit-border-radius

La propriété CSS -webkit-border-radius permet d'arrondir les coins d'un élément (X)HTML.Exemple d'écriture CSS de -webkit-border-radius -webkit-border-radius : 8px; -webkit-border-radius : 5px 10px; -webkit-border-radius : 5px 10px 15px 20px; La propriété de feuille de style -webkit-border-radius CSS...

Propriété CSS border-right

La propriété CSS border-right est un raccourci qui permet de spécifier le style, l'épaisseur et la couleur de la bordure droite d'un élément.Exemple d'écriture CSS de border-right border-right : outset 10px blue; border-right : 10px dotted; border-right : #5F9EA0;La propriété de feuille...

Propriété CSS border-right-color

La propriété CSS border-right-color permet de spécifier la couleur de la bordure droite d'un élément (X)HTML.Exemple d'écriture CSS de border-right-color border-right-color : bisque; border-right-color : #FFE4C4; border-right-color : rgb(255,228,196); border-right-color : hsl(33,100%,88%); border-right-colo...

Propriété CSS border-right-style

La propriété CSS border-right-style permet de spécifier le style de la bordure droite d'un élément HTML.Exemple d'écriture CSS de border-right-style border-right-style : solid; border-right-style : dashed; border-right-style : double; border-right-style : outset; La propriété de feuille de sty...

Propriété CSS border-right-width

La propriété Css border-right-width permet de spécifier l'épaisseur de la bordure droite d'un élément (X)HTML.Exemple d'écriture CSS de border-right-width border-right-width : thin; border-right-width : 1px; border-right-width : 0.5em; La propriété de feuille de style border-right-width ...

Propriété CSS border-spacing

La propriété CSS border-spacing permet de spécifier l'espacement entre les bordures des cellules adjacentes d'un tableau.Exemple d'écriture CSS de border-spacing border-spacing : 2px; border-spacing : 5px 2px; La propriété de feuille de style border-spacing CSS peut pendre une ou deux valeurs de :- num&eacu...

Propriété CSS border-style

La propriété CSS border-style est un raccourci qui permet de spécifier le style des bordures d'un élément.Exemple d'écriture CSS de border-style border-style : solid; border-style : double ridge; border-style : groove inset outset; border-style : dashed groove double outset; La propriété de fe...

Propriété CSS border-top

La propriété CSS border-top est un raccourci qui permet de spécifier le style, l'épaisseur et la couleur de la bordure haute d'un élément (X)HTML.Exemple d'écriture CSS de border-top border-top : solid 10px powderblue; border-top : groove #7CFC00; border-top : rgb(0,255,0);La propriété ...

Propriété CSS border-top-color

La propriété CSS border-top-color permet de spécifier la couleur de la bordure haute d'un élément (X)HTML.Exemple d'écriture CSS de border-top-color border-top-color : orangered; border-top-color : #FF4500; border-top-color : rgb(255,69,0); border-top-color : rgb(160,82,45); La propriété de fe...

Propriété CSS border-top-left-radius

La propriété CSS border-top-left-radius permet d'arrondir le coin haut gauche d'un élément (X)HTML.Exemple d'écriture CSS de border-top-left-radius border-top-left-radius : 5px; border-top-left-radius : 5px 2px; La propriété de feuille de style border-top-left-radius CSS peut pendre une ou deux valeu...

Propriété CSS border-top-right-radius

La propriété CSS border-top-right-radius permet d'arrondir le coin haut droit d'un élément (X)HTML.Exemple d'écriture CSS de border-top-right-radius border-top-right-radius : 5px; border-top-right-radius : 10px 20em; La propriété de feuille de style border-top-right-radius CSS peut pendre une ou deux...

Propriété CSS border-top-style

La propriété CSS border-top-style permet de spécifier le style de la bordure haute d'un élément (X)HTML.Exemple d'écriture CSS de border-top-style border-top-style : double; border-top-style : solid; border-top-style : dashed; border-top-style : outset; La propriété de feuille de style border-...

Propriété CSS border-top-width

La propriété CSS border-top-width permet de spécifier l'épaisseur de la bordure haute d'un élément (X)HTML.Exemple d'écriture CSS de border-top-width border-top-width : thin; border-top-width : 1px; border-top-width : 0.5em; La propriété de feuille de style border-top-width CSS peut pen...

Propriété CSS border-width

La propriété CSS border-width est un raccourci qui permet de spécifier l'épaisseur des quatre bordures d'un élément.Exemple d'écriture CSS de border-width border-width : 1px; border-width : 1px thick 1em; border-width : 1px thick 1em thin; La propriété de feuille de style border-width C...

Propriété CSS bottom

La propriété CSS bottom permet de spécifier la position du bord bas de la marge d'un élément positionné par rapport au bord bas de son parent servant d'origine, dans le cadre d'un positionnement seulement.Exemple d'écriture CSS de bottom .identifiant{ position : relative; right : 0px; bottom : 0px; }...

Propriété CSS -webkit-box-align

La propriété CSS -webkit-box-align permet de spécifier l'alignement les éléments "flexibles" par rapport à l'axe transversal. Ancienne spécification des Flexbox basée sur le document de travail de juillet 2009.Exemple d'écriture CSS de -webkit-box-align -webkit-box-align : sta...

Propriété CSS -webkit-box-direction

La propriété CSS -webkit-box-direction permet de spécifier si l'ordonnancement des éléments flexibles dans une colonne ou une ligne. Ancienne spécification des Flexbox basée sur le document de travail de juillet 2009.Exemple d'écriture CSS de -webkit-box-direction -webkit-box-direction : norma...

Propriété CSS -webkit-box-flex

La propriété CSS -webkit-box-flex permet de spécifier un facteur d'agrandissement ou de réduction de la taille d'un élément "flexible" en fonction de l'espace disponible dans leur conteneur Flexbox et des autres éléments "flexibles". Ancienne spécification des Flexbo...

Propriété CSS -webkit-box-ordinal-group

La propriété CSS -webkit-box-ordinal-group permet de spécifier l'ordre d'affichage visuel d'éléments "flexibles" dans son conteneur Flexbox. Ancienne spécification des Flexbox basée sur le document de travail de juillet 2009.Exemple d'écriture CSS de -webkit-box-ordinal-group -webkit...

Propriété CSS -webkit-box-orient

La propriété CSS -webkit-box-orient permet de spécifier si l'ordonnancement des éléments flexibles est de type colonne ou ligne. Ancienne spécification des Flexbox basée sur le document de travail de juillet 2009.Exemple d'écriture CSS de -webkit-box-orient -webkit-box-orient : horizontal ; -w...

Propriété CSS -webkit-box-pack

La propriété CSS -webkit-box-pack permet de spécifier la manière dont est distribuée l'espace restant entre les éléments "flexibles" par rapport à l'axe principal. Ancienne spécification des Flexbox basée sur le document de travail de juillet 2009.Exemple d'écrit...

Propriété CSS box-shadow

La propriété CSS box-shadow permet d'ajouter un effet d'ombre portée à un élément HTML. Exemple d'écriture CSS d'une ombre portée avec box-shadow box-shadow : 5px 10px 0.5em 0.5em red; box-shadow : inset 5px 5px 0 0 red; box-shadow : inset 5px 5px 0 0 red, 5px 5px 0 0 green; La propriét...

Propriété CSS -moz-box-shadow

La propriété CSS -moz-box-shadow permet d'ajouter un effet d'ombre portée à un élément HTML. Exemple d'écriture CSS d'une ombre portée avec -moz-box-shadow .identifiant{ -moz-box-shadow : 5px 10px 0.5em red; } La propriété de feuille de style -moz-box-shadow CSS accepte comme val...

Propriété CSS -webkit-box-shadow

La propriété CSS -webkit-box-shadow permet d'ajouter un effet d'ombre portée à un élément HTML. Exemple d'écriture CSS d'une ombre protée avec -webkit-box-shadow .identifiant{ -webkit-box-shadow : 5px 10px 0.5em red; } La propriété de feuille de style -webkit-box-shadow CSS accep...

Propriété CSS box-sizing

La propriété CSS box-sizing permet de spécifier si la valeur de width ou de height inclut la marge intérieure et la taille de la bordure.Exemple d'écriture CSS de box-sizing box-sizing : border-box; box-sizing : padding-box; box-sizing : content-box; La propriété de feuille de style box-sizing CSS pe...

Propriété CSS -moz-box-sizing

La propriété CSS -moz-box-sizing permet de spécifier si la valeur de width ou de height inclut la marge intérieure et la taille de la bordure.Exemple d'écriture CSS de -moz-box-sizing -moz-box-sizing : content-box; -moz-box-sizing : border-box; La propriété CSS -moz-box-sizing peut pendre comme valeu...

Propriété CSS -webkit-box-sizing

La propriété CSS -webkit-box-sizing permet de spécifier si la valeur de width ou de height inclut la marge intérieure et la taille de la bordure. Exemple d'écriture CSS de -webkit-box-sizing -webkit-box-sizing : content-box; -webkit-box-sizing : border-box; La propriété CSS -webkit-box-sizing peut pe...

Propriété CSS break-after

En cours de rédaction. La propriété CSS break-after permet de spécifier le type de rupture affecter après un élément généré.Exemple d'écriture CSS de break-after break-after : column; La propriété de feuille de style break-after CSS peut prendre la valeur de ...

Propriété CSS break-before

En cours de rédaction. La propriété CSS break-before permet de spécifier.Exemple d'écriture CSS de break-before break-before : column; La propriété de feuille de style break-before CSS peut prendre la valeur de : - auto, - avoid, - avoid-page, - page, - left, - right, - recto, - verso, - avoid-column...

Propriété CSS break-inside

En cours de rédaction. La propriété CSS break-inside permet de spécifier.Exemple d'écriture CSS de break-inside break-inside : column; La propriété de feuille de style break-inside CSS peut prendre la valeur de : - auto, - avoid, - avoid-page, - avoid-column, - avoid-region,...

Fonction CSS brightness()

La fonction CSS brightness de la propriété CSS filter permet d'appliquer un filtre pour modifier l'effet de la luminosité d'un élément. Exemple d'écriture CSS de filter :brightness filter : brightness 50%); filter : brightness 0.5);La fonction de feuille de style brightness paramètre) CSS peut pre...


Fonction CSS calc()

La fonction CSS calc permet d'exécuter un calc ul simple dans votre feuille CSS.Exemple d'écriture CSS de calc height : calc 1em - 12px); width : calc 50% + 12px); margin : calc 100% / 4); padding : calc 25% * 0.5); left : calc 100%/2 - 2*1em - 2*1px); La fonction calc CSS retourne une valeur calc ulée. La fonction CSS calc ...

Fonction CSS -moz-calc()

La fonction CSS -moz-calc permet d'exécuter un calcul simple dans votre feuille CSS.Exemple d'écriture CSS de -moz-calc height : -moz-calc 50% - 12px); width : -moz-calc 1em + 12px); margin : -moz-calc 100% / 4); padding : -moz-calc 10% * 12); left : -moz-calc 100%/2 - 2*1em - 2*1px); La fonction -moz-calc CSS retourne une valeu...

Fonction CSS -webkit-calc()

La fonction CSS -webkit-calc permet d'exécuter un calcul simple dans votre feuille CSS.Exemple d'écriture CSS de -webkit-calc height : -webkit-calc 500px - 12px); width : -webkit-calc 50% + 12px); margin : -webkit-calc 100% / 2); padding : -webkit-calc 10% * 12); left : -webkit-calc 100%/2 - 2*1em - 2*1px); La fonction -webkit-cal...

Propriété CSS caption-side

La propriété CSS caption-side permet de spécifier la position de légende du tableau (balise HTML CAPTION).Exemple d'écriture CSS de caption-side caption-side : left; caption-side : bottom; caption-side : top; caption-side : right; La propriété de feuille de style caption-side CSS peut prendre la vale...

Propriété CSS caret-color

La propriété CSS caret-color permet de spécifier la couleur du caret. Ou se trouve le caret Le caret est un indicateur visible du point d'insertion dans un élément où le texte (ou autre contenu) est inséré par l'internaute. A ne pas confondre avec le curseur : cursorExemple d'écriture C...

Règle CSS @charset

La règle CSS @charset permet de spécifier l'encodage des caractères utilisé dans la feuille de style externe.Exemple d'écriture CSS de @charset @charset "UTF-8"; @charset "iso-8859-15"; La règle de feuille de style @charset CSS accepte comme valeur : - nom : . ...

Sélecteur CSS :checked

La pseudo-classe CSS :checked permet de cibler tous les éléments HTML INPUT dont l'attribut type est radio ou checkbox ou les éléments HTML OPTION, qui sont sélectionnés afin de leur assigner des propriétés CSS. Exemple d'écriture CSS de :checked :checked { /* Propriétés *...

Propriété CSS clear

La propriété CSS clear permet de spécifier l'affichage de l'élément flottant (float) par rapport à l'élément précédent. Pour être plus précis, la propriété de feuille de style clear CSS permet de spécifier les côtés d'un ou des &eacu...

Propriété CSS clip

La propriété CSS clip permet de recadrer un élément positionné avec position et dont la valeur est absolute.Exemple d'écriture CSS de clip .identifiant{ clip : rect(0px, 50px, 50px, 0px); width : 200px; height : 200px; position : absolute; } La propriété de feuille de style clip CSS peut prend...

Propriété CSS color

La propriété CSS color permet de spécifier la couleur de la police d'un texte.Exemple d'écriture CSS de color color : tomato; color : transparent; color : #FF6347; color : rgb(255,99,71); color : hsl(9,100%,64%);La propriété de feuille de style color CSS peut prendre comme valeur de couleur : - transpent : ...

Propriété CSS column-count

La propriété CSS column-count permet de spécifier le nombre de colonnes de l'élément.Exemple d'écriture CSS de column-count column-count : 3; La propriété de feuille de style column-count CSS peut prendre la valeur de : - auto : le nombre de colonne est donné par une autre proprié...

Propriété CSS column-fill

La propriété CSS column-fill permet de spécifier le nombre de colonnes de l'élément.Exemple d'écriture CSS de column-fill column-fill : balance; La propriété de feuille de style column-fill CSS peut prendre la valeur de : - auto : les colonnes sont remplies au fur et à mesure, valeur par...

Propriété CSS column-gap

La propriété CSS column-gap permet de spécifier l'espace entre chaque colonne de l'élément.Exemple d'écriture CSS de column-gap column-gap : 2px; La propriété de feuille de style column-gap CSS peut prendre la valeur de : - normal : utilise l'espacement par défaut définit par le ...

Propriété CSS column-rule

La propriété CSS column-rule est un raccourci qui permet de spécifier l'épaisseur, la couleur et le style de la ligne entre chaque colonne de l'élément. Exemple d'écriture CSS de column-rule column-rule : 3px ridge green; La propriété de feuille de style column-rule CSS peut prendre les...

Propriété CSS column-rule-color

La propriété CSS column-rule-color permet de spécifier la couleur de la ligne entre chaque colonne de l'élément.Exemple d'écriture CSS de column-rule-color column-rule-color : blue; column-rule-color :hsl(240,100%,27%); column-rule-color :rgb(60,179,113); La propriété de feuille de style colum...

Propriété CSS column-rule-style

La propriété CSS column-rule-style permet de spécifier le style de la ligne entre chaque colonne de l'élément.Exemple d'écriture CSS de column-rule-style column-rule-style : groove; column-rule-style : none; La propriété de feuille de style column-rule-style CSS peut prendre la valeur de : - n...

Propriété CSS column-rule-width

La propriété CSS column-rule-width permet de spécifier la taille de la ligne entre chaque colonne de l'élément.Exemple d'écriture CSS de column-rule-width column-rule-width : 30px; column-rule-width : 1em; La propriété de feuille de style column-rule-width CSS peut prendre la valeur de : - num...

Propriété CSS column-span

La propriété CSS column-span permet de spécifier si un élément peut s'étendre sur toutes les colonnes de l'élément.Exemple d'écriture CSS de column-span column-span : all; La propriété de feuille de style column-span CSS peut prendre la valeur de : - none : est pris dans l...

Propriété CSS column-width

La propriété CSS column-width permet de spécifier le nombre de colonnes de l'élément (X)HTML.Exemple d'écriture CSS de column-width column-width : 30px; La propriété de feuille de style column-width CSS peut prendre la valeur de :- auto : la largeur de la colonne est donné par une autre...

Propriété CSS columns

La propriété CSS columns est un raccourci qui permet de spécifier le nombre de colonnes et/ou la taille optimale d'une colonne en une seule déclaration. Exemple d'écriture CSS de column column : 30px 5; column : auto 3; column : 50px auto; La propriété de feuille de style columns CSS peut prendre les...

Propriété CSS content

La propriété CSS content permet de spécifier en CSS un texte, une image ou des guillemets à insérer en tant que contenu Css. content est utilisée avec les pseudo-éléments ::before et ::after.Exemple d'écriture CSS de content identifiant:after{ content : open-quote; } identifiant:before{...

Fonction CSS contrast()

La fonction CSS contrast de la propriété CSS filter permet d'appliquer un filtre pour modifier l'effet de contrast e d'un élément. Exemple d'écriture CSS de filter :contrast filter : contrast 50%); filter : contrast 0.5); La fonction de feuille de style contrast paramètre) CSS peut prendre comme param&egr...

Fonction CSS counter()

La fonction CSS counter permet de récupérer la valeur courante d'une variable de "compteur". La fonction CSS counter est utilisée avec la propriété CSS content.Exemple d'écriture CSS de counter .identifiant:before{ content : counter section ); } .identifiant:before{ content : counter secti...

Propriété CSS counter-increment

La propriété CSS counter-increment permet d'incrémenter une variable de "compteur".Exemple d'écriture CSS de counter-increment .identifiant:before{ counter-increment : section; } .identifiant:before{ counter-increment : section 5; } La propriété de feuille de style counter-increment CSS accepte la...

Propriété CSS counter-reset

La propriété CSS counter-reset permet d'initialiser et réinitialiser une variable de "compteur".Exemple d'écriture CSS de counter-reset counter-reset : section; counter-reset : section 5; La propriété de feuille de style counter-reset CSS accepte la valeur :- none : ne fait rien. - variable positi...

Propriété CSS cursor

La propriété CSS cursor permet de spécifier la forme du curseur à utiliser sur un élément. Le graphisme du curseur varie suivant les navigateurs, mais la signification curseur reste la même.Exemple d'écriture CSS cursor cursor : pointer; cursor : move; cursor : progress; cursor : wait; cursor :...


Propriété CSS direction

La propriété CSS direction permet de gérer le sens ou direction de l'écriture des blocs et le sens des incorporations et contraintes pour l'algorithme bi- direction nel UnicodeExemple d'écriture CSS de direction direction : rtl; direction : ltr; La propriété CSS direction CSS peut prendre la valeur de ...

Sélecteur CSS :disabled

La pseudo-classe CSS :disabled permet de cibler tous les éléments d'interface utilisateur HTML désactivés pour leur assigner des propriétés CSS.Exemple d'écriture CSS de :disabled :disabled{ /* Propriétés */ } identifiant :disabled{ /* Propriétés */ } La valeur de display o...

Propriété CSS display

La propriété CSS display permet de modifier le type de rendu d'un élément.Exemple d'écriture CSS de display display : block; display : inline; display : inline-block; display : table-cell; display : list-item; La propriété de feuille de style display CSS peut prendre la valeur de :- none : l'é...

Fonction CSS drop-shadow()

La fonction CSS drop-shadow de la propriété CSS filter permet d'appliquer un filtre pour ajouter un effet d'ombre portée à un élément. Exemple d'écriture CSS de filter :drop-shadow .identifiant{ filter : drop-shadow 5px 10px 2px #ccc); } La fonction de feuille de style drop-shadow offset-x offset-y ...


Propriété CSS elevation

La propriété CSS elevation permet de spécifier la position verticale du son par rapport à l'internaute pour la lecture d'un bloc texte.Exemple d'écriture CSS d'animation <style media="aural"> .identifiant{ elevation : -45deg; } </style> La propriété de feuille de style elevation ...

Sélecteur CSS :empty

La pseudo-classe CSS :empty permet de cibler toutes les balises HTML ou XHTML vides afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de :empty :empty{ /* Propriétés */ } selecteur :empty{ /* Propriétés */ } Une balise vide est considérée comme vide :- si elle est sans espac...

Propriété CSS empty-cells

La propriété CSS empty-cells permet de spécifier le rendu des bordures autour l'arrière plan, le rendu de ce dernier pour une cellule vide d'un tableau. Exemple d'écriture CSS de empty-cells empty-cells : hide; empty-cells : show; La propriété de feuille de style empty-cells CSS peut pendre la valeur...

Sélecteur CSS :enabled

La pseudo-classe CSS :enabled permet de cibler tous les éléments d'interface utilisateur HTML activés pour leur assigner des propriétés CSS.Exemple d'écriture CSS de :enabled :enabled{ /* Propriétés */ } identifiant :enabled{ /* Propriétés */ } La valeur de display ou visibility n...

Fonction CSS expression()

La pseudo propriété CSS expression permet d'insérer du Javascript dans votre feuille CSS.Exemple d'écriture CSS d' expression width : expression 500 + "px"); width : expression document.body.clientWidth > 600? "600px": "100px" ); La pseudo propriété expression CSS peut p...


Propriété CSS filter

La propriété CSS filter permet d'appliquer un effet de filtre sur un élément HTML.Exemple d'écriture CSS de filter filter : contrast(400%); filter : grayscale(0.5) blur(10px); filter : sepia(20%) opacity(10%) drop-shadow(20px 20px 20px #000); La propriété de feuille de style CSS filter peut prendre c...

Sélecteur CSS :first

La pseudo classe CSS :first{} permet de cibler la première page lors d'une impression.Exemple d'écriture CSS de :first @page :first { margin : 5cm 2cm; }La pseudo classe de feuille de style :first{} CSS accepte les propriétés CSS : - margin, gestion des marges extérieur de la page imprimée cible. - padding,...

Sélecteur CSS :first-child

La pseudo-classe CSS :first-child permet de cibler le premier fils d'un élément HTML afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de :first-child :first-child{ /* Propriétés CSS assignées aux premiers enfants de toutes les balises HTML */ } identifiant :first-child{ /* Propri...

Sélecteur CSS :first-letter

Le pseudo-élément CSS :first-letter permet de spécifier des propriétés CSS pour la première lettre d'un élément dit de type bloc et si elle est précédée d'aucun autre contenu sur sa ligne.Exemple d'écriture CSS de :first-letter /* CSS 2 */ :first-letter{ /* Propri&e...

Sélecteur CSS :first-line

Le pseudo-élément CSS :first-line permet de spécifier les propriétés CSS de la première ligne d'un élément HTML.Exemple d'écriture CSS de :first-line :first-line{ /* Propriétés */ } ::first-line{ /* Propriétés */ } Le pseudo-élément CSS :first-l...

Sélecteur CSS :first-node

En construction...

Sélecteur CSS :first-of-type

La pseudo-classe CSS :first-of-type permet de cibler chaque élément qui est le premier enfant de son type HTML ou XHTML dans la liste des enfants de son élément HTML ou XHTML parent, afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de :first-of-type :first-of-type{ /* Propriét&ea...

Propriété CSS flex

La propriété CSS flex est un raccourci permet de spécifier un facteur d'agrandissement ou de réduction de la taille d'un élément " flex ible" en fonction de l'espace disponible dans leur conteneur Flexbox.Exemple d'écriture CSS de flex flex : 0 0 auto ; flex : 5 1 auto; flex : 30%; flex : 1 3...

Propriété CSS -ms-flex

La propriété CSS -ms-flex permet de spécifier un facteur d'agrandissement ou de réduction de la taille d'un élément "flexible" en fonction de l'espace disponible du conteneur Flexbox. Ancienne spécification des Flexbox basée sur le document de travail de mars 2012.Exemple d'éc...

Propriété CSS -ms-flex-align

La propriété CSS -ms-flex-align permet de spécifier l'alignement les éléments "flexibles" par rapport à l'axe transversal. Ancienne spécification des Flexbox basée sur le document de travail de mars 2012.Exemple d'écriture CSS de -ms-flex-align -ms-flex-align : start; -ms-flex...

Propriété CSS flex-basis

La propriété CSS flex-basis permet de spécifier la taille* initiale désirée d'un élément flexible avant réduction de sa taille ou avant redistribution de l'espace restant dans leur conteneur Flexbox. *) La taille représente width ou height selon la valeur de flex-direction. Exemple d'&e...

Propriété CSS flex-direction

La propriété CSS flex-direction permet de spécifier si l'ordonnancement des éléments flexibles Css est de type colonne ou ligne dans leur conteneur Flexbox Css.Exemple d'écriture CSS de flex-direction flex-direction : row; flex-direction : row-reverse; flex-direction : column; flex-direction : column-revers...

Propriété CSS -ms-flex-direction

La propriété CSS -ms-flex-direction permet de spécifier si l'ordonnancement des éléments flexibles est de type colonne ou ligne. Ancienne spécification des Flexbox basée sur le document de travail de mars 2012.Exemple d'écriture CSS de -ms-flex-direction -ms-flex-direction : row; -ms-flex-dire...

Propriété CSS flex-flow

La propriété CSS flex-flow est un raccourci qui permet de spécifier si les éléments flexibles peuvent être multi-lignes (flex-wrap) et leurs dispositions (flex-direction) dans leur conteneur Flexbox.Exemple d'écriture CSS de flex-flow flex-flow : column; flex-flow : wrap; flex-flow : row wrap-reverse;...

Propriété CSS flex-grow

La propriété CSS flex-grow permet de spécifier un facteur d'agrandissement de la taille initiale d'un élément flexible par rapport au reste des éléments flexibles Css, lorsque de l'espace libre restant au sein du conteneur Flexbox Css (dont la taille a été précisée) est re...

Propriété CSS -ms-flex-line-pack

La propriété CSS -ms-flex-line-pack permet de spécifier la manière dont est distribué l'espace restant entre les éléments "flexibles" multi-lignes ou multi-colonnes par rapport " l'axe transversal" de leur conteneur Flexbox. Ancienne spécification des Flexbox basée s...

Propriété CSS -ms-flex-order

La propriété CSS -ms-flex-order permet de spécifier l'ordre d'affichage visuel d'un élément "flexible" dans son conteneur Flexbox. Ancienne spécification des Flexbox basée sur le document de travail de mars 2012.Exemple d'écriture CSS de -ms-flex-order -ms-flex-order : 5; -ms-flex-or...

Propriété CSS -ms-flex-pack

La propriété CSS -ms-flex-pack permet de spécifier la manière dont est distribuée l'espace restant entre les éléments "flexibles" par rapport à l'axe principal. Ancienne spécification des Flexbox basée sur le document de travail de mars 2012.Exemple d'écriture CS...

Propriété CSS flex-shrink

La propriété CSS flex-shrink permet de spécifier un facteur de réduction de la taille initiale (flex-basis) par rapport aux autres éléments flexibles Css quand, il n'y a pas assez de place mettre l'ensemble des éléments flexibles Css dans l'élément conteneur Flexbox Css.Exemple d...

Propriété CSS flex-wrap

La propriété CSS flex-wrap permet de spécifier si les éléments flexibles Css peuvent faire un retour automatique dans leur conteneur Flexbox Css.Exemple d'écriture CSS de flex-wrap flex-wrap : nowrap; flex-wrap : wrap; flex-wrap : wrap-reverse; La propriété de feuille de style flex-wrap CSS pe...

Propriété CSS -ms-flex-wrap

La propriété CSS -ms-flex-wrap permet de spécifier si les éléments "flexibles" peuvent faire un retour automatique dans l'élément conteneur Flexbox. Ancienne spécification des Flexbox basée sur le document de travail de mars 2012.Exemple d'écriture CSS de -ms-flex-wrap ...

Propriété CSS float

La propriété CSS float permet de spécifier qu'un élément flotte à gauche, à droite ou pas du tout au sein de son élément conteneur. Si l'élément est flottant, les autres éléments de type en ligne (inline) entoureront alors ce dernier. On utilise gén&ea...

Sélecteur CSS :focus

La pseudo-classe d'action CSS :focus permet d'assigner des propriétés CSS à un élément HTML qui accepte le focus et à ses fils durant le moment où il est sélectionné via la touche de tabulation ou pour certains cas lorsque l'on clique dessus. La pseudo-classe :focus CSS est utilis&eacut...

Propriété CSS -moz-focus-inner

La propriété CSS : :-moz-focus-inner permet de spécifier les propriétés css de la bordure autour du texte des éléments de formulaire de type bouton (button, input). Exemple d'écriture CSS de : :-moz-focus-inner identifiant: :-moz-focus-inner{ border : 1px solid red; } La propriété d...

Propriété CSS font

La propriété CSS font est un raccourci qui permet de spécifier la font e : taille, hauteur de ligne, graisse, inclinaison, la police et les petites capitales.Exemple d'écriture CSS de font font : 14px Arial, Helvetica, sans-serif; font : x-large/110% "new century schoolbook", serif; font : oblique small-caps 14p...

Règle CSS @font-face{}

La règle CSS @font-face{} permet d'importer un/des fichiers de fontes au format "Web", utilisé notamment quand on a des polices spéciales qui ne sont pas présentes sur le système d'exploitation de l'internaute.Exemple d'écriture CSS de @font-face{} @font-face{ font-family: 'maFonte'; src: url('/im...

Propriété CSS font-family

La propriété CSS font-family permet de spécifier la police à utiliser pour afficher un texte.Exemple d'écriture CSS de font-family font-family : "Times New Roman", Times, serif; font-family : Verdana, Geneva, sans-serif; font-family : "Courier New", Courier, monospace; font-family : "Comic...

Propriété CSS font-size

La propriété CSS font-size permet de spécifier la taille de la fonte dans lequel sera affiché le texte.Exemple d'écriture CSS de font-size font-size : xx-small; font-size : medium; font-size : 15px; font-size : 1em; font-size : 0.5%; La propriété de feuille de style font-size CSS peut prendre la vale...

Propriété CSS font-size-adjust

La propriété CSS font-size-adjust permet spécifier un ration d'aspect à fonte (police) pour recalculer la valeur de font-size. La propriété de feuille de style font-size-adjust CSS est utilisée lorsqu'il y a une substitution de police spécifiée dans font-family et que son ration d'aspec...

Propriété CSS -webkit-font-smoothing

La propriété CSS -webkit-font-smoothing permet de spécifier l'algorithme anti-crénelage (anti-aliasing) utilisé pour le rendu des fontes. Exemple d'écriture CSS de -webkit-font-smoothing -webkit-font-smoothing : none; -webkit-font-smoothing : antialiased; -webkit-font-smoothing : subpixel-antialiased; La pr...

Propriété CSS font-stretch

La propriété CSS font-stretch permet de spécifier l'étirement ou le resserrement de la fonte, si cette dernière possède des caractères condensés ou des caractères élargis. Exemple de lettre expanded normal condensed Exemple d'écriture CSS de font-stretch font-stretch : nor...

Propriété CSS font-style

La propriété CSS font-style permet de spécifier le style du texte est normal, oblique ou italique.Exemple d'écriture CSS de font-style font-style : normal; font-style : italic; font-style : oblique; La propriété de feuille de style font-style CSS peut prendre la valeur de :- normal : le texte est dans son a...

Propriété CSS font-variant

La propriété CSS font-variant permet de spécifier que le texte soit en petites capitales.Exemple d'écriture CSS de font-variant font-variant : normal; font-variant : small-caps; La propriété de feuille de style font-variant CSS peut prendre la valeur de : - normal : aucun changement dans le mode d'affichage...

Propriété CSS font-weight

La propriété CSS font-weight permet de spécifier le type de gras à utiliser pour l'affichage de la fonte.Exemple d'écriture CSS de font-weight font-weight : normal; font-weight : bold; font-weight : bolder; font-weight : 800; La propriété de feuille de style font-weight CSS pour mettre en gras peut p...


Fonction CSS -webkit-gradient()

La fonction CSS -webkit-gradient permet de créer un dégradé de couleur linéaire ou radial. Utilise l'ancienne syntaxe des spécifications Css de dégradé. Exemple d'écriture CSS de -webkit-gradient background-image : -webkit-gradient linear, left top, right bottom, from(#ff0), color-stop(0....

Fonction CSS grayscale()

La fonction CSS grayscale de la propriété CSS filter permet d'appliquer un filtre d'effet de niveaux de gris sur un élément. Exemple d'écriture CSS de filter :grayscale filter : grayscale 400%); filter : grayscale 4); La fonction de feuille de style grayscale paramètre) CSS peut prendre comme param&egrav...


Propriété CSS height

La propriété CSS height permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de height height : auto; height : 200px; height : 100%; La propriété de feuille de style height CSS peut prendre comme valeur :- numérique positif ...

Sélecteur CSS :hover

La pseudo-classe d'action CSS :hover permet d'assigner des propriétés CSS à un élément HTML et à ses fils durant le moment où il est survolé par le curseur (souris). La pseudo-classe :hover CSS est utilisée entre autre pour les liens (balise A).Exemple d'écriture CSS :hover :hove...

Fonction CSS hue-rotate()

La fonction CSS hue-rotate de la propriété CSS filter permet d'appliquer un filtre pour faire un effet de rotation de la teinte d'un élément. Exemple d'écriture CSS de filter :hue-rotate filter : hue-rotate 50deg); filter : hue-rotate 30); filter : hue-rotate ; La fonction de feuille de style hue-rotate angle)...

Propriété CSS hyphens

La propriété CSS hyphens permet de spécifier le type de césure à utiliser pour couper les mots.Exemple d'écriture CSS de hyphens hyphens : manual; hyphens : auto; hyphens : none;La propriété de feuille de style hyphens CSS peut prendre la valeur de : - none : la césure des mots ne se fa...

Propriété CSS -moz-hyphens

La propriété CSS -moz-hyphens permet de spécifier le type de césure à utiliser pour couper les mots. Exemple d'écriture CSS de -moz-hyphens -moz-hyphens : manual; -moz-hyphens : auto; -moz-hyphens : none; La propriété de feuille de style -moz-hyphens CSS peut prendre la valeur de :- none : la ...

Propriété CSS -ms-hyphens

La propriété CSS -ms-hyphens permet de spécifier le type de césure à utiliser pour couper les mots.Exemple d'écriture CSS de -ms-hyphens -ms-hyphens : manual; -ms-hyphens : auto; -ms-hyphens : none; La propriété de feuille de style -ms-hyphens CSS peut prendre la valeur de : - none : la c&eacu...

Propriété CSS -webkit-hyphens

La propriété CSS -webkit-hyphens permet de spécifier le type de césure à utiliser pour couper les mots.Exemple d'écriture CSS de -webkit-hyphens -webkit-hyphens : manual; -webkit-hyphens : auto; -webkit-hyphens : none; La propriété de feuille de style -webkit-hyphens CSS peut prendre la valeur...


Propriété CSS important

La règle CSS ! important permet de spécifier que la propriété est la plus important e dans votre feuille CSS en lui donnant un poids plus important . La règle de feuille de style ! important CSS est généralement utilisée dans le cas où une propriété de feuille de style CSS est...

Règle CSS @import{}

La règle CSS @import permet d'importer une feuille de style externe au sein même d'une même feuille de style.Exemple d'écriture CSS de @import @import url("testimport.css"); La règle de feuille de style @import CSS accepte comme valeur :- url(url), l'url d'un fichier CSS, l'url peut être relative ou ...

Sélecteur CSS :-ms-input-placeholder

Le pseudo-élément CSS :-ms-input-placeholder permet de cibler le texte de remplacement spécifié par l'attribut placeholder d'un élément. Exemple d'écriture CSS de :-ms-input-placeholder :-ms-input-placeholder { /* Propriétés */ } identifiant :-ms-input-placeholder { /* Propriét&ea...

Sélecteur CSS ::-webkit-input-placeholder

Le pseudo-élément CSS ::-webkit-input-placeholder permet de cibler le texte de remplacement spécifié par l'attribut placeholder d'un élément. Exemple d'écriture CSS de ::-webkit-input-placeholder ::-webkit-input-placeholder { /* Propriétés */ } identifiant ::-webkit-input-placeholder { /...

Sélecteur CSS :invalid

La pseudo-classe CSS :invalid permet de cibler les éléments (X)HTML input, fieldset et form dont les types de données attendues ne sont pas correctes afin de leurs assigner des propriétés CSS. Exemple d'écriture CSS de :invalid :invalid { /* Propriétés */ } identifiant :invalid { /* Propri&eacu...

Fonction CSS invert()

La fonction CSS invert de la propriété CSS filter permet d'appliquer un filtre dont l'effet inverse les couleurs d'un élément. Exemple d'écriture CSS de filter :invert filter : invert 50%); filter : invert 0.5); La fonction de feuille de style invert X) CSS peut prendre comme paramètre :- un nombre positif...


Propriété CSS justify-content

La propriété CSS justify-content permet de spécifier la manière dont est distribuée l'espace restant entre les éléments flexibles Css d'un conteneur Flexbox Css par rapport à l'axe principal.Exemple d'écriture CSS de justify-content justify-content : flex-start; justify-content : flex-e...


Règle CSS @keyframes{}

La règle CSS @keyframes permet de regrouper les images clés concernant une animation CSS3. Exemple d'écriture CSS de @keyframes @keyframes identifiant{ from {width: 300px} to {width: 100px;} } La règle @keyframes CSS est toujours suivit d'un nom qui sera utilisé comme identifiant par la propriété css...

Règle CSS @-webkit-keyframes{}

La règle CSS @-webkit-keyframes permet de regrouper les images clés concernant une animation CSS. Exemple d'écriture CSS de @-webkit-keyframes @-webkit-keyframes identifiant{ from { width : 300px } to { width : 100px } } La règle CSS @-webkit-keyframes est toujours suivit d'un nom qui sera utilisé comme identifian...


Références CSS commençant par L | ZONE CSS

Sélecteur CSS :lang

La pseudo-classe CSS :lang permet de cibler un élément HTML en fonction de sa langue afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de :lang identifiant :lang fr){ /* Propriétés */ } La pseudo-classe de feuille de style :lang CSS accepte comme valeur de paramètre :- String...

Sélecteur CSS :last-child

La pseudo-classe CSS :last-child permet de cibler le dernier fils d'un élément HTML ou XHTML afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de :last-child :last-child{ /* Propriétés CSS assignées au dernier enfant de toutes balises */ } identifiant :last-child{ /* Proprié...

Sélecteur CSS :last-node

En construction...

Sélecteur CSS :last-of-type

La pseudo-classe CSS :last-of-type permet de cibler chaque élément qui est le dernier enfant de son type HTML ou XHTML dans la liste des enfants de son élément HTML ou XHTML parent, afin de leur assigner des propriétés CSS.Exemple d'écriture CSS de :last-of-type :last-of-type { /* Propriét&eac...

Sélecteur CSS :left

La pseudo classe CSS :left{} permet de cibler la page gauche lors d'une impression.Exemple d'écriture CSS de :left @page :left { margin : 5cm 2cm; }La pseudo classe de feuille de style :left{} CSS accepte les propriétés CSS : - margin, gestion des marges extérieur de la page imprimée cible. - padding, gestion des ...

Propriété CSS left

La propriété CSS left permet de spécifier la position du bord gauche de la marge d'un élément positionné par rapport au bord gauche de son parent servant d'origine, dans le cadre d'un positionnement seulement.Exemple d'écriture CSS de left .identifiant{ position : relative; top : 0px; left : 0px; } L...

Propriété CSS letter-spacing

La propriété CSS letter-spacing permet d'augmenter ou diminuer l'espacement entre chaque lettre.Exemple d'écriture CSS de letter-spacing letter-spacing : normal; letter-spacing : 15px; La propriété de feuille de style letter-spacing CSS peut pendre une valeur :- normal : l'espacement entre chaque lettre est laiss&...

Propriété CSS line-height

La propriété CSS line-height permet de spécifier la hauteur d'une ligne de texte et donc aussi de gérer l'espace entre les lignes. Exemple d'écriture CSS de line-height line-height : normal; line-height : 5px; line-height : 1.5; La propriété de feuille de style line-height CSS peut pendre une valeur ...

Fonction CSS linear-gradient()

La fonction CSS linear-gradient de la propriété CSS background-image permet de créer un dégradé de couleur linéaire en arrière-plan d'un élément (X)HTML. Exemple d'écriture CSS de linear-gradient background-image : linear-gradient to bottom, hsl(0, 80%, 70%), #BADA55 ); backgr...

Fonction CSS -moz-linear-gradient()

La fonction CSS -moz-linear-gradient de la propriété CSS background-image permet de créer un dégradé de couleur linéaire en arrière-plan d'un élément (X)HTML. Exemple d'écriture CSS de -moz-linear-gradient /* première version */ background-image : -moz-linear-gradient b...

Fonction CSS -ms-linear-gradient()

La fonction CSS -ms-linear-gradient de la propriété CSS background-image permet de créer un dégradé de couleur linéaire en arrière-plan d'un élément (X)HTML. Utilise l'ancienne syntaxe des spécifications Css de dégradés du Draft de 17 février 2011. Exemple ...

Fonction CSS -o-linear-gradient()

La fonction CSS -o-linear-gradient de la propriété CSS background-image permet de créer un dégradé de couleur linéaire en arrière-plan d'un élément (X)HTML. Exemple d'écriture CSS de -o-linear-gradient /* première version */ background-image : -o-linear-gradient bottom,...

Fonction CSS -webkit-linear-gradient()

La fonction CSS -webkit-linear-gradient de la propriété CSS background-image permet de créer un dégradé de couleur linéaire en arrière-plan d'un élément (X)HTML. Exemple d'écriture CSS de -webkit-linear-gradient background-image : -webkit-linear-gradient bottom, hsl(0, 80%, 70...

Sélecteur CSS :link

La pseudo-classe CSS :link permet d'assigner des propriétés CSS à tous les liens (A) qui n'ont pas été visités et à ses fils.Exemple d'écriture CSS :link :link { /* propriétés Css pour le lien non visité */ } .identifiant :link { /* propriétés Css pour le lien...

Propriété CSS list-style

La propriété CSS list-style est un raccourci pour spécifier type du marqueur d'item et la position du texte par rapport au marqueur d'item.Exemple d'écriture CSS de list-style list-style : upper-alpha; list-style : circle; list-style : outside url(puce.gif); list-style : lower-alpha outside; La propriété de feu...

Propriété CSS list-style-image

La propriété CSS list-style-image permet de mettre une image à la place du marqueur d'item de liste défini par list-style-type.Exemple d'écriture CSS de list-style-image list-style-image : url(/img/style_css/puce.gif); list-style-image : none; La propriété de feuille de style list-style-image CSS peu...

Propriété CSS list-style-position

La propriété CSS list-style-position permet de spécifier l'alignement gauche du texte par rapport au marqueur d'item de liste défini par list-style-type lors d'un retour à la ligne automatique.Exemple d'écriture CSS de list-style-position list-style-position : inside; list-style-position : outside; La propr...

Propriété CSS list-style-type

La propriété CSS list-style-type permet de spécifier le type du marqueur d'item de liste à utiliser. Les types de marqueurs d'item sont classés en trois systèmes : (point, cercle), (1, 2, ...) et (A, B, ...). Exemple d'écriture CSS de list-style-type list-style-type : decimal; list-style-type : upper...


Propriété CSS margin

La propriété CSS margin permet de spécifier individuellement ou globalement l'espace entre la bordure d'un élément HTML ou XHTML et la bordure de l'élément adjacent pour chaque côté . Où se trouve la marge extérieure : margin La Css margin est un raccourci qui permet de sp&...

Propriété CSS margin-bottom

La propriété CSS margin-bottom permet de spécifier l'espace entre la bordure basse d'un élément HTML ou XHTML et la bordure haute de l'élément adjacent. Où se trouve la marge basse : margin-left La CSS margin-bottom est nommée marge Css extérieure basse (inférieure), &agra...

Propriété CSS margin-left

La propriété CSS margin-left permet de spécifier l'espace entre la bordure gauche d'un élément HTML ou XHTML et la marge extérieure droite de l'élément adjacent. "Où se trouve la marge gauche : margin-left " La CSS margin-left est nommée marge Css extérieure gauch...

Propriété CSS margin-right

La propriété CSS margin-right permet de spécifier l'espace entre la bordure droite d'un élément HTML ou XHTML et la marge extérieure gauche de l'élément adjacent Où se trouve la marge droite : margin-right La CSS margin-right est nommée marge Css extérieure droite, à...

Propriété CSS margin-top

La propriété CSS margin-top qui permet de spécifier l'espace entre la bordure haute d'un élément HTML ou XHTML et la bordure basse de l'élément adjacent. Où se trouve la marge haute : margin-top La CSS margin-top est nommée marge Css extérieure haute (supérieure), à...

Propriété CSS marker-offset

En construction...

Fonction CSS matrix()

La fonction de transformation CSS matrix de la propriété css transform permet d'incliner, changer l'échelle, faire une rotation, décaler un élément HTML.Exemple d'écriture CSS de transform : matrix transform : matrix 1, 0, 0, 1, 10, 10); transform : matrix 0.8, 0.577, 0.577, 0.8, 10, 10); transfo...

Propriété CSS max-height

La propriété CSS max-height permet de spécifier une hauteur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de max-height .hauteur-maximale{ height : 90%; min-height : 100px; max-height : 510px; } La propriété de feuille de style max-height CSS peu...

Propriété CSS max-width

La propriété CSS max-width permet de spécifier une longueur maximale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de max-width .longueur-maximale{ width : 90%; min-width : 500px; max-width : 10px; } La propriété de feuille de style max-width CSS peut pre...

Règle CSS @media{}

La règle CSS @media permet de créer d'autres propriétés pour divers supports appelé aussi média (print, screen) au sein d'une même feuille de style. On peut spécifier le ou les médias après la déclaration de la règle de feuille de style @media cssExemple d'écr...

Propriété CSS min-height

La propriété CSS min-height permet de spécifier une hauteur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de min-height .hauteur-minimale{ height : 90%; min-height : 100px; max-height : 510px; } La propriété de feuille de style min-height CSS peu...

Propriété CSS min-width

La propriété CSS min-width permet de spécifier une longueur minimale de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de min-width .longueur-minimale{ width : 90%; min-width : 500px; max-width : 10px; } La propriété de feuille de style min-width CSS peut pre...


Sélecteur CSS :not

La pseudo-classe de négation CSS :not permet de spécifier des règles d'exclusion d'un ou plusieurs éléments à exclure du ciblage. Exemple d'écriture CSS de :not :not span){ /* exclu les balises de type span */ } identifiant :not span){ /* exclu les fils de type span */ } li :not .selected) { /* ex...

Sélecteur CSS :nth-child

La pseudo-classe CSS :nth-child permet de cibler les n-ième enfants dans la liste des enfants de son élément HTML ou XHTML parent, afin de leur assigner des propriétés CSS.Exemple d'écriture CSS de :nth-child identifiant :nth-child 2n+1){ /* Propriétés CSS assignées aux enfants qui ...

Sélecteur CSS :nth-last-child

La pseudo-classe CSS :nth-last-child permet de cibler les n-ième enfants d'un élément afin de leur assigner des propriétés CSS.Exemple d'écriture CSS de :nth-last-child identifiant :nth-last-child 2n+1){ /* Propriétés CSS assignées aux enfants qui correspondent à la rè...

Sélecteur CSS :nth-last-of-type

La pseudo-classe CSS :nth-last-of-type permet de cibler les n-ième enfants en partant de la fin de chaque liste d'enfants de même type HTML de son élément HTML parent, afin de leur assigner des propriétés CSS. Exemple d'écriture CSS de :nth-child() identifiant :nth-last-of-type 2n+1){ /* Propri&eacu...

Sélecteur CSS :nth-of-type

La pseudo-classe CSS :nth-of-type permet de cibler les n-ième enfants en partant du début de chaque liste d'enfants de même type HTML de son élément HTML parent, afin de leur assigner des propriétés CSS.Exemple d'écriture CSS de :nth-of-type identifiant :nth-of-type 2n+1){ /* Proprié...


Sélecteur CSS :only-child

La pseudo-classe CSS :only-child permet de cibler l'enfant qui est le seul élément dans son élément HTML parent afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de :only-child :only-child{ /* Propriétés CSS assignées à l'enfant qui est le seul él&eacut...

Sélecteur CSS :only-of-type

La pseudo-classe CSS :only-of-type permet de cibler l'enfant qui est le seul élément de son type HTML ou XHTML dans la liste des enfants de son élément HTML ou XHTML parent, afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de :only-of-type :only-of-type{ /* Propriétés CSS ...

Propriété CSS opacity

La propriété CSS opacity permet de spécifier l'opacité (transparence) de l'ensemble d'un élément (X)HTML. Exemple d'écriture CSS de opacity opacity : 0; opacity : 0.5; opacity : 1; La propriété CSS opacity peut prendre comme valeur d'opacité :- nombre : compris entre 0.0 et 1, 0 ...

Propriété CSS -moz-opacity

La propriété CSS -moz-opacity permet de spécifier l'opacité (transparence) d'un élément. Exemple d'écriture CSS de -moz-opacity .identifiant{ -moz-opacity : 0.5; } La propriété CSS -moz-opacity peut prendre la valeur de :- nombre : compris entre 0.0 et 1, 0.0 étant totalement tra...

Fonction CSS opacity()

La fonction CSS opacity de la propriété CSS filter permet d'appliquer un filtre dont l'effet joue sur l'opacité (transparence) d'un élément. Exemple d'écriture CSS de filter :opacity filter : opacity 50%); filter : opacity 0.5); La fonction de feuille de style opacity paramètre) CSS peut prendre com...

Sélecteur CSS :optional

La pseudo-classe CSS :optional permet de cibler tous les éléments HTML acceptant l'attribut required et si ce dernier n'est pas activé afin de leur assigner des propriétés CSS. Exemple d'écriture CSS de :optional :optional { /* Propriétés */ } identifiant :optional { /* Propriétés...

Propriété CSS order

La propriété CSS order permet de spécifier l'ordre d'affichage visuel d'élément flexible Css dans son conteneur Flexbox Css.Exemple d'écriture CSS de order order : -5; order : 0; order : 3; La propriété de feuille de style order CSS peut prendre la valeur de : - entier positif ou négati...

Propriété CSS -moz-osx-font-smoothing

La propriété CSS -moz-osx-font-smoothing permet de spécifier l'algorithme anti-crénelage (anti-aliasing) utilisé pour le rendu des fontes. Exemple d'écriture CSS de -moz-osx-font-smoothing -moz-osx-font-smoothing : auto; -moz-osx-font-smoothing : grayscale; -moz-osx-font-smoothing : unset; La proprié...

Propriété CSS outline

La propriété CSS outline est un raccourci pour de spécifier la taille, la couleur et le style du contour des quatre contours de type outline d'un élément lors de sa prise de focus. Emplacement du contour outline Les contours CSS d' outline ne réagissent pas comme les bordures, ces contours viennent au-dessus...

Propriété CSS outline-color

La propriété CSS outline-color permet de spécifier la couleur des quatre contours de l'outline d'un élément lors de sa prise de focus. Les contours CSS d'outline ne réagissent pas comme les bordures, ces contours viennent au-dessus de l'élément et n'interviennent pas dans la taille de l'&eacut...

Propriété CSS outline-offset

La propriété CSS outline-offset permet de spécifier la distance entre la bordure de l'élément HTML et l'outline lors de sa prise de focus. Les contours CSS d'outline ne réagissent pas comme les bordures, ces contours viennent au-dessus de l'élément et n'interviennent pas dans la taille de l'&e...

Propriété CSS outline-style

La propriété CSS outline-style permet de spécifier le style des quatre contours de l'outline d'un élément lors de sa prise de focus. Les contours CSS d'outline ne réagissent pas comme les bordures, ces contours viennent au-dessus de l'élément et n'interviennent pas dans la taille de l'é...

Propriété CSS outline-width

La propriété CSS outline-width permet de spécifier l'épaisseur des quatre contours de l'outline d'un élément lors de sa prise de focus. Les contours CSS d'outline ne réagissent pas comme les bordures, ces contours viennent au-dessus de l'élément et n'interviennent pas dans la taille de ...

Propriété CSS overflow

La propriété CSS overflow un raccourci qui permet de gérer la manière dont est rogné le contenu lorsque votre contenu est plus grand que la taille spécifiée de votre élément. La propriété CSS overflow gère aussi la manière dont est affiché les barres d...

Propriété CSS -webkit-overflow-scrolling

La propriété CSS -webkit-overflow-scrolling permet de déterminer si le défilement de type natif dans un overflow:scroll. Exemple d'écriture CSS -webkit-overflow-scrolling .identifiant{ overflow : scroll; -webkit-overflow-scrolling : auto; } La propriété de feuille de style -webkit-overflow-scrolling ...

Propriété CSS overflow-wrap

La propriété CSS overflow-wrap permet de spécifier le navigateur peut rompre un mot afin d'éviter les débordements de élément.Exemple d'écriture CSS de overflow-wrap overflow-wrap : normal; overflow-wrap : break-word; La propriété de feuille de style overflow-wrap CSS peut pendre...

Propriété CSS overflow-x

La propriété CSS overflow-x permet de gérer la manière dont est rogné horizontalement le contenu lorsque votre contenu est plus large que la longueur spécifiée de votre élément. La propriété CSS overflow-x gère aussi, la manière dont est affiché les ba...

Propriété CSS overflow-y

La propriété CSS overflow-y permet de gérer la manière dont est rogné verticalement le contenu lorsque votre contenu est plus haut que la hauteur spécifié de votre élément. La propriété CSS overflow-y gère aussi, la manière dont est affiché les barres ...


Propriété CSS padding

La propriété CSS padding permet de spécifier individuellement ou globalement l'espace qui sépare le contenu d'un élément de sa bordure de chaque côté. position des espaces intérieurs" La Css padding est un raccourci qui permet de spécifier en un seule fois les propriét...

Propriété CSS padding-bottom

La propriété CSS padding-bottom permet de modifier l'espace entre le contenu d'un élément et sa bordure basse. La Css padding-bottom est nommée marge Css intérieure basse, à ne pas confondre avec la marge Css extérieure basse : margin-top.Exemple d'écriture CSS de padding-bottom padding...

Propriété CSS padding-left

La propriété CSS padding-left permet de modifier l'espace entre le contenu d'un élément et sa bordure gauche. La Css padding-left est nommée marge Css intérieure gauche, à ne pas confondre avec la marge Css extérieure gauche : margin-left.Exemple d'écriture CSS padding-left padding-left ...

Propriété CSS padding-right

La propriété CSS padding-right permet de modifier l'espace entre le contenu d'un élément et sa bordure droite. La Css padding-right est nommée marge Css intérieure droite, à ne pas confondre avec la marge Css extérieure droite : margin-right.Exemple d'écriture CSS padding-right padding-...

Propriété CSS padding-top

La propriété CSS padding-top permet de modifier l'espace entre le contenu d'un élément et sa bordure haute. La Css padding-top est nommée marge Css intérieure haute, à ne pas confondre avec la marge Css extérieure haute : margin-top.Exemple d'écriture CSS padding-top padding-top : 20px;...

Propriété CSS page-break-after

La propriété CSS page-break-after permet de gérer le changement de page de l'élément suivant. La propriété de feuille de style page-break-after CSS est une feuille de style de type media="print" et est donc utilisée pour l'impression. Exemple d'écriture CSS de page-break-after ...

Propriété CSS page-break-before

La propriété CSS page-break-before permet de gérer le changement de page de l'élément précèdent. La propriété de feuille de style page-break-before CSS est une feuille de style de type media="print" et est donc utilisée pour l'impression. Exemple d'écriture CSS d...

Propriété CSS page-break-inside

La propriété CSS page-break-inside permet de gérer le changement de page du contenu d'un élément. La propriété de feuille de style page-break-inside CSS est une feuille de style de type media="print" Exemple d'écriture CSS de page-break-inside .identifiant{ page-break-inside : auto; ...

Règle CSS @page{}

La règle CSS @page permet modifier des propriétés de marges css pour les supports d'impression au sein d'une même feuille de style. Exemple d'écriture CSS de @page @page{ margin: 2cm 1.5cm; } @page :left{ margin: 2cm 1.5cm; }La règle CSS @page accepte comme propriétés CSS :- margin, gestion des...

Propriété CSS perspective

La propriété CSS perspective permet d'activer perspective en spécifiant la distance entre "le point de vue" virtuel et le point d'origine Z = 0 sur l'axe de perspective Z. La propriété CSS perspective permet en même temps de créer un contexte 3D, c'est à dire que les fils se serviront...

Fonction CSS perspective()

La fonction de transformation CSS perspective Z) de la propriété CSS transform permet de spécifier la distance entre "le point de vue" virtuel et le point d'origine Z = 0 sur l'axe de perspective Z. Mais contrairement à la propriété perspective le contexte 3D est lui même et non celui de son...

Propriété CSS perspective-origin

La propriété CSS perspective-origin permet de spécifier la position du point de fuite (l'oeil de l'internaute) sur l'axe X et Y dans le contexte 3D.Exemple d'écriture CSS de perspective-origin perspective-origin : left bottom; perspective-origin : 50% 20%; perspective-origin : 12px 6px; La propriété de feui...

Sélecteur CSS ::placeholder

Le pseudo-élément CSS ::placeholder permet de cibler le texte de remplacement spécifié par l'attribut placeholder d'un élément. Exemple d'écriture CSS de ::placeholder ::placeholder { /* Propriétés */ } identifiant ::placeholder { /* Propriétés */ } Le pseudo-él&eacu...

Sélecteur CSS ::-moz-placeholder

Le pseudo-élément CSS ::-moz-placeholder permet de cibler le texte de remplacement spécifié par l'attribut placeholder d'un élément. Exemple d'écriture CSS de ::-moz-placeholder ::-moz-placeholder { /* Propriétés */ } identifiant ::-moz-placeholder { /* Propriétés */ } Le p...

Propriété CSS position

La propriété CSS position permet de spécifier si un élément est position né ou pas et spécifie par la même occasion son type de position nement pour déterminer algorithme utilisé pour calculer sa position . Seul un élément position né interprète les feuille...


Propriété CSS quotes

La propriété CSS quotes permet de spécifier le type guillemet à mettre autour d'une balise.Exemple d'écriture CSS de quotes .mes-guillemets{ quotes : "'" "'" "<" ">" } .mes-guillemets:before{ content : open-quote } .mes-guillemets:after{ content : close-quote } La prop...


Fonction CSS radial-gradient()

La fonction CSS radial-gradient de la propriété CSS background-image permet de créer un dégradé de couleur radial en arrière-plan d'un élément (X)HTML. Exemple d'écriture CSS radial-gradient background-image : radial-gradient circle at 10px 50%, #258dc8 0%, #258dc8 100%); background-i...

Fonction CSS -moz-radial-gradient()

La fonction CSS -moz-radial-gradient de la propriété CSS background-image permet de créer un dégradé de couleur radial en arrière-plan d'un élément (X)HTML. Utilise l'ancienne syntaxe des spécifications Css de dégradés de 17 février 2011. Exemple d'écriture C...

Fonction CSS -ms-radial-gradient()

La fonction CSS -ms-radial-gradient de la propriété CSS background-image permet de créer un dégradé de couleur radial en arrière-plan d'un élément (X)HTML. Utilise l'ancienne syntaxe des spécifications Css de dégradés de 17 février 2011. Exemple d'écriture CS...

Fonction CSS -o-radial-gradient()

La fonction CSS -o-radial-gradient de la propriété CSS background-image permet de créer un dégradé de couleur radial en arrière-plan d'un élément (X)HTML. Utilise l'ancienne syntaxe des spécifications Css de dégradés de 17 février 2011. Exemple d'écriture CSS...

Fonction CSS -webkit-radial-gradient()

La fonction CSS -webkit-radial-gradient de la propriété CSS background-image permet de créer un dégradé de couleur radial en arrière-plan d'un élément (X)HTML. Utilise l'ancienne syntaxe des spécifications Css de dégradés de 17 février 2011. Exemple d'écritur...

Sélecteur CSS :required

La pseudo-classe CSS :required permet de cibler tous les éléments HTML acceptant l'attribut required et si ce dernier est activé afin de leur assigner des propriétés CSS. Exemple d'écriture CSS de :required :required { /* Propriétés */ } identifiant :required { /* Propriétés */ } ...

Propriété CSS richness

La propriété de feuille de style css richness permet de spécifier la portée de la voix à utiliser pour la lecture d'un bloc texte.<style media="aural"> .identifiant{ richness :20; } </style> La propriété de feuille de style aurale css richness est utilisée pour les feuille...

Sélecteur CSS :right

La pseudo classe CSS :right{} permet de cibler la page droite lors d'une impression.Exemple d'écriture CSS de :right @page :right { margin : 5cm 2cm; } La pseudo classe de feuille de style :right{} CSS accepte les propriétés CSS : - margin, gestion des marges extérieur de la page imprimée cible. - padding, gestion...

Propriété CSS right

La propriété CSS right permet de spécifier la position du bord droit de la marge d'un élément positionné par rapport au bord droit de son parent servant d'origine dans le cadre d'un positionnement seulement.Exemple d'écriture CSS de right .identifiant{ position : absolute; right : 0px; bottom : 0px; ...

Sélecteur CSS :root

La pseudo-classe CSS :root permet de cibler la racine du document, soit la balise HTML html. Exemple d'écriture CSS de :root :root { font-family : Times; } ...

Fonction CSS rotate()

La fonction de transformation CSS rotate de la propriété CSS transform permet d'effectuer une rotation à un élément HTML. Exemple d'écriture CSS de transform : rotate transform : rotate 20deg); transform : rotate -50deg);La fonction de transformation rotate angle) CSS accepte comme paramètre :- a...

Fonction CSS rotate3d()

La fonction de transformation CSS rotate3d de la propriété CSS transform permet d'effectuer une rotation à un élément HTML par rapport à un axe définit par le point d'origine et le nouveau point de perspective spécifié en paramètre. Exemple d'écriture CSS de transform : ...

Fonction CSS rotateX()

La fonction de transformation CSS rotateX de la propriété CSS transform permet d'effectuer une rotation à un élément HTML par rapport à l'axe de perspective X. Exemple d'écriture CSS de transform : rotateX transform : rotateX 20deg); transform : rotateX -50deg);La fonction de transformation rotat...

Fonction CSS rotateY()

La fonction de transformation CSS rotateY de la propriété CSS transform permet d'effectuer une rotation à un élément HTML par rapport à l'axe de perspective Y. Exemple d'écriture CSS de transform : rotateY transform : rotateY 20deg); transform : rotateY -50deg);La fonction de transformation rotat...

Fonction CSS rotateZ()

La fonction de transformation CSS rotateZ de la propriété CSS transform permet d'effectuer une rotation à un élément HTML par rapport à l'axe de perspective Z. Exemple d'écriture CSS de transform : rotateZ transform : rotateZ 20deg); transform : rotateZ -50deg);La fonction de transformation rotat...


Fonction CSS saturate()

La fonction CSS saturate de la propriété CSS filter permet d'appliquer un filtre pour modifier saturation d'un élément. Exemple d'écriture CSS de filter :saturate filter : saturate 50%); filter : saturate 0.5); La fonction de feuille de style saturate paramètre) CSS peut prendre comme paramètre :-...

Fonction CSS scale()

La fonction de transformation CSS scale de la propriété CSS transform permet d'effectuer un agrandissement ou une réduction d'échelle sur un élément HTML.Exemple d'écriture CSS de transform : scale transform : scale 2, 2); /* Agrandissement */ transform : scale 2); /* Agrandissement */ transform ...

Fonction CSS scale3d()

La fonction de transformation CSS scale3d de la propriété CSS transform permet d'effectuer un agrandissement ou une réduction d'un élément HTML dans un contexte 3D sur les trois axes de perspective. Exemple d'écriture CSS de transform : scale3d transform : scale3d 1.6, 1.5, 2); /* Agrandissement */ tran...

Fonction CSS scaleX()

La fonction de transformation CSS scaleX de la propriété CSS transform permet d'effectuer un agrandissement ou une réduction de la longueur d'un élément HTML. Exemple d'écriture CSS de transform : scaleX transform : scaleX 2); /* Agrandissement */ // identique à transform : scale(2, 1); transform...

Fonction CSS scaleY()

La fonction de transformation CSS scaleY de la propriété CSS transform permet d'effectuer un agrandissement ou une réduction d'échelle de la hauteur d'un élément HTML. Exemple d'écriture CSS de transform : scaleY transform : scaleY 2); /* Agrandissement */ // identique à transform : scale(...

Fonction CSS scaleZ()

La fonction de transformation CSS scaleZ de la propriété CSS transform permet d'effectuer un agrandissement ou une réduction d'un élément HTML dans le cadre d'un contexte 3D sur l'axe Z. Exemple d'écriture CSS de transform : scaleZ transform : scaleZ 2); /* Agrandissement */ // identique à transf...

Propriété CSS scrollbar-3dlight-color

La propriété CSS scrollbar-3dlight-color permet de spécifier la couleur du relief dans la lumière d'une scrollbar ou barre de défilement. Exemple d'écriture CSS de scrollbar-3dlight-color scrollbar-arrow-color : gold; scrollbar-arrow-color : ##FFD700;La propriété de feuille de style scrollbar-...

Propriété CSS scrollbar-arrow-color

La propriété CSS scrollbar-arrow-color permet de spécifier la couleur du relief dans la lumière d'une scrollbar ou barre de défilement.Exemple d'écriture CSS de scrollbar-arrow-color scrollbar-arrow-color : rosybrown; scrollbar-arrow-color : #BC8F8F;La propriété scrollbar-arrow-color CSS peut pr...

Propriété CSS scrollbar-darkshadow-color

La propriété CSS scrollbar-darkshadow-color permet de spécifier la couleur du relief dans l'ombre d'une scrollbar ou barre de défilement.Exemple d'écriture CSS de scrollbar-darkshadow-color scrollbar-darkshadow-color : lawngreen; scrollbar-darkshadow-color : #7CFC00;La propriété de feuille de style s...

Propriété CSS scrollbar-face-color

La propriété CSS scrollbar-face-color permet de spécifier la couleur d'une scrollbar ou barre de défilement.Exemple d'écriture CSS de scrollbar-face-color scrollbar-face-color : crimson; scrollbar-face-color : #DC143C;La propriété de feuille de style scrollbar-face-color CSS peut prendre une valeur d...

Propriété CSS scrollbar-track-color

La propriété CSS scrollbar-track-color permet de spécifier la couleur de l'arrière plan d'une scrollbar ou barre de défilement. Exemple d'écriture CSS de scrollbar-track-color scrollbar-track-color : cadetblue; scrollbar-track-color : #5F9EA0;La propriété de feuille de style scrollbar-track-co...

Sélecteur CSS ::selection

Le pseudo-élément CSS ::selection permet de cibler le texte sélectionné par l'utilisateur.Exemple d'écriture CSS de ::selection ::selection { /* Propriétés */ } identifiant ::selection { /* Propriétés */ } Le pseudo-élément de feuille de style ::selection Css peut contenir ...

Sélecteur CSS ::-moz-selection

Le pseudo-élément CSS ::-moz-selection permet de cibler le texte sélectionné par l'utilisateur. Exemple d'écriture CSS de ::-moz-selection ::-moz-selection { /* Propriétés */ } ma-selection ::-moz-selection { /* Propriétés */ } Le pseudo-élément de feuille de style ::-moz-s...

Fonction CSS sepia()

La fonction CSS sepia de la propriété CSS filter permet d'appliquer un filtre d'effet sépia sur un élément. Exemple d'écriture CSS de filter :sepia filter : sepia ; filter : sepia 0); filter : sepia 400%); filter : sepia 0.5); La fonction de feuille de style sepia paramètre) CSS peut prendre comm...

Propriété CSS shadow

shadow CSS n'est pas une propriété CSS mais une valeur de la propriété CSS filter qui est une feuille de style Microsoft. La valeur shadow de la propriété CSS filter permet de mettre une ombre sur un élément. Pour les versions Internet Explorer < 5.5 Exemple d'écriture CSS de shadow ...

Fonction CSS skew()

La fonction de transformation CSS skew de la propriété CSS transform permet d'incliner horizontalement et verticalement un élément HTML.Exemple d'écriture CSS de transform : skew transform : skew 20deg, 2deg); transform : skew 20deg);La fonction de transformation skew X,Y) CSS accepte comme arguments : - X,Y :...

Fonction CSS skewX()

La fonction de transformation CSS skewX de la propriété Css transform permet d'incliner horizontalement un élément HTML.Exemple d'écriture CSS de transform : skewX transform : skewX 60deg); // identique à transform : skew(60deg, 0deg); transform : skewX 1.047198rad); transform : skewX 66.666667grad); tr...

Fonction CSS skewY()

La fonction de transformation CSS skewY de la propriété CSS transform permet d'incliner verticalement un élément HTML.Exemple d'écriture CSS de transform : skewY transform : skewY 20deg); // identique à transform : skew(0deg, 20deg); transform : skewY 0.349066rad); transform : skewY 22.222222grad); tran...

Propriété CSS speak

En construction...

Propriété CSS speak-numeral

La propriété de feuille de style css speak-numeral permet de spécifier la manière de lire les nombres.<style media="aural"> .identifiant{ speak-numeral :continuous ; } </style> La propriété de feuille de style aurale css speak-numeral est utilisée pour les feuilles de style css d...

Propriété CSS spreech-rate

La propriété de feuille de style css spreech-rate permet de spécifier la rapidité de lecture à utiliser pour la lecture d'un bloc texte.<style media="aural"> .identifiant{ spreech-rate :x-slow; } </style> La propriété de feuille de style aurale css spreech-rate est utilisé...

Propriété CSS stress

En construction...

Règle CSS @supports{}

La règle CSS @supports{} permet de tester la prise en charge par le navigateur d'une ou des propriétés Css et une de ses valeurs et d'assigner des déclarations Css si le résultat du test est vrai.Exemple d'écriture CSS de @supports @supports ( display : flex ) { identifiant{ /* propriétés Css ...


Propriété CSS table-layout

La propriété CSS table-layout permet de spécifier l'algorithme utilisé pour disposer les cellules, colonnes et lignes d'un tableau.Exemple d'écriture CSS de table-layout table-layout : auto; table-layout : fixed; La propriété de feuille de style table-layout CSS peut prendre la valeur de : - auto : l...

Propriété CSS -webkit-tap-highlight-color

La propriété CSS -webkit-tap-highlight-color permet de spécifier la couleur de surbrillance lorsque l'utilisateur appuie sur un lien ou d'un élément cliquable JavaScript dans Safari sur iOS. Exemple d'écriture CSS -webkit-tap-highlight-color -webkit-tap-highlight-color : palegoldenrod; -webkit-tap-highlight-...

Sélecteur CSS :target

La pseudo-classe CSS :target permet de cibler tous les éléments ayant pour attribut id dont la valeur (moins le #) est égale l'ancre(#mon_ancre) présente dans l'url de la page afin de leur assigner des propriétés CSS. Exemple d'écriture CSS de :target :target { /* Propriétés */ } /* htt...

Propriété CSS text-align

La propriété CSS text-align permet de définir l'alignement horizontal du texte ou plus globalement les éléments dits inline dans un élément (X)HTML dit block qui les contient.Exemple d'écriture CSS de text-align text-align : left; text-align : center; text-align : right; text-align : justify; ...

Propriété CSS text-decoration

La propriété CSS text-decoration permet de spécifier les décorations linéaires d'un mot par exemple si le mot est souligné ou barré, etc...Exemple d'écriture CSS de text-decoration text-decoration : line-through; text-decoration : underline; text-decoration : blink;La propriété d...

Propriété CSS text-decoration-color

La propriété CSS text-decoration-color permet de spécifier la couleur des décorations d'un mot par exemple la couleur du soulignéExemple d'écriture CSS de text-decoration-color text-decoration-color : transparent; text-decoration-color : currentColor; text-decoration-color : saddlebrown; text-decoration-col...

Propriété CSS -moz-text-decoration-color

La propriété CSS -moz-text-decoration-color permet de spécifier la couleur des décorations d'un mot par exemple la couleur du souligné ou du surligné.Exemple d'écriture CSS de -moz-text-decoration-color -moz-text-decoration-color : transparent; -moz-text-decoration-color : currentColor; -moz-text-dec...

Propriété CSS text-decoration-line

La propriété CSS text-decoration-line permet de spécifier le type de décorations linéaires d'un mot, par exemple si le mot est souligné, barré, etc...Exemple d'écriture CSS de text-decoration-line text-decoration-line : line-through; text-decoration-line : underline; text-decoration-line : bli...

Propriété CSS text-decoration-style

La propriété CSS text-decoration-style permet de spécifier le type du trait utilisé pour la décoration linéaire d'un mot.Exemple d'écriture CSS de text-decoration text-decoration-style : solid; text-decoration-style : dotted; text-decoration-style : wavy;La propriété de feuille de style...

Propriété CSS text-indent

La propriété CSS text-indent permet de spécifier le décalage la première ligne d'un texte (retrait).Exemple d'écriture CSS de text-indent text-indent : 5px; text-indent : 5%; text-indent : 1em;La propriété de feuille de style text-indent CSS peut pendre une valeur :- numérique positif o...

Propriété CSS text-overflow

La propriété CSS text-overflow permet de mettre entre autre des points de suspension ("...") quand le texte sort du bloc.Exemple d'écriture CSS de text-overflow text-overflow : '!!!'; text-overflow : ellipsis; text-overflow : ellipsis '.';La propriété de feuille de style text-overflow CSS peut prendre la...

Propriété CSS -o-text-overflow

La propriété CSS -o-text-overflow permet de mettre entre autre des points de suspension ("...") quand le texte sort du bloc.Exemple d'écriture CSS de -o-text-overflow -o-text-overflow : ellipsis; -o-text-overflow : clip;La propriété de feuille de style -o-text-overflow CSS peut prendre la valeur de : - e...

Propriété CSS text-shadow

La propriété CSS text-shadow permet de créer une ombre portée sous le texte.Exemple d'écriture CSS d'une ombre portée avec text-shadow text-shadow : 2em 2em 0.2em red; text-shadow : 2em 2em 0.2em red, 6px 3px 15px yellow; La propriété de feuille de style text-shadow CSS accepte quatre valeurs ...

Propriété CSS -ms-text-size-adjust

La propriété CSS -ms-text-size-adjust permet de déterminer comment la taille de la police est ajustée par rapport à sa taille initiale. Exemple d'écriture CSS de -ms-text-size-adjust .identifiant{ -ms-text-size-adjust : 100%; } La propriété de feuille de style -ms-text-size-adjust CSS peut pen...

Propriété CSS -webkit-text-size-adjust

La propriété CSS -webkit-text-size-adjust permet de déterminer comment la taille de la police est ajustée par rapport à sa taille initiale. Exemple d'écriture CSS de -webkit-text-size-adjust .identifiant{ -webkit-text-size-adjust : 100%; } La propriété de feuille de style -webkit-text-size-adj...

Propriété CSS text-transform

La propriété CSS text-transform permet de modifier la "capitalisation" ( Majuscule Minuscule ) d'un bloc texte.Exemple d'écriture CSS de text-transform text-transform : capitalize; text-transform : uppercase; text-transform : lowercase; text-transform : none; La propriété de feuille de style text-transfo...

Propriété CSS top

La propriété CSS top permet de spécifier le décalage du bord haut de la marge d'un élément positionné par rapport au bord haut de son parent servant d'origine, dans le cadre d'un positionnement seulement.Exemple d'écriture CSS de top .identifiant{ position : fixed; top : 0px; }La proprié...

Propriété CSS -webkit-touch-callout

La propriété CSS -webkit-touch-callout permet d'afficher ou de désactiver la légende lorsque vous touchez et maintenez une cible. Exemple d'écriture CSS de -webkit-touch-callout -webkit-touch-callout : behavior; -webkit-touch-callout : none; La propriété de feuille de style -webkit-touch-callout CSS ...

Propriété CSS transform

La propriété CSS transform permet de spécifier les transform ations 2d et 3d à appliquer un élément HTML.Exemple d'écriture CSS de transform transform : rotate(20deg); transform : translate(20px, 10px); transform : scale(1, 2); transform : skew(45deg, 62deg); transform : translate(100px) rotate(20deg)...

Propriété CSS -moz-transform

La propriété de transformation CSS -moz-transform permet de spécifier les transformations 2D et 3D à appliquer à un élément HTML.Exemple d'écriture CSS de -moz-transform -moz-transform : rotate(20deg); -moz-transform : translateY(100px); -moz-transform : translate(20px, 10px); -moz-transform :...

Propriété CSS -ms-transform

La propriété de transformation CSS -ms-transform permet de spécifier les transformations 2D à appliquer à un élément HTML. Exemple d'écriture CSS de -ms-transform -ms-transform : rotate(20deg); -ms-transform : translateY(100px); -ms-transform : translate(20px, 10px); -ms-transform : matrix(1, ...

Propriété CSS -webkit-transform

La propriété de transformation CSS -webkit-transform permet de spécifier les transformations 2D ou 3D à appliquer à un élément HTML. Exemple d'écriture CSS de -webkit-transform -webkit-transform : rotate(20deg); -webkit-transform : translateY(100px); -webkit-transform : translate(20px, 10px); ...

Propriété CSS transform-origin

La propriété CSS transform-origin permet de spécifier le point d'origine des transformations 2d et 3d lors de l'utilisation de la propriété CSS transform.Exemple d'écriture CSS de transform-origin transform-origin : 100% -30%; transform-origin : 10px 20px; transform-origin : bottom left 12px; La propri&eacu...

Propriété CSS transform-style

La propriété CSS transform-style permet de spécifier si les enfants de cet élément sont positionnés dans un espace 3D ou s'ils sont aplatis sur l'élément en utilisant projection orthogonale dans le plan 2D.Exemple d'écriture CSS de transform-style transform-style : auto; transform-style ...

Propriété CSS transition

La propriété CSS transition est un raccourci qui permet de spécifier l'ensemble des propriétés CSS de la transition .Exemple d'écriture CSS de transition .ma- transition{ width:50px; height:50px; } .ma- transition :hover{ width:100px; transition : width 5s ease-in-out 2s; } // Si plusieurs transition s .ma-trans...

Propriété CSS transition-delay

La propriété CSS transition-delay permet de spécifier la durée de latence avant de démarrer la transition de chaque propriété transformable.Exemple d'écriture CSS de transition-delay .ma-transition{ width:50px; height:50px; } .ma-transition:hover{ width:100px; transition-property : width; tran...

Propriété CSS transition-duration

La propriété CSS transition-duration permet de spécifier la durée de la transition de chaque propriété transformable.Exemple d'écriture CSS de transition-duration .ma-transition{ width:50px; height:50px; } .ma-transition:hover{ width:100px; transition-property : width; transition-duration : 8s; } .ma...

Propriété CSS transition-property

La propriété CSS transition-property permet de spécifier les propriétés CSS qui doivent être transformées au moment du changement de leur valeur.Exemple d'écriture CSS de transition-property .identifiant{ width:50px; height:50px;} .identifiant:hover{ width:100px; height:100px; transition-proper...

Propriété CSS transition-timing-function

La propriété CSS transition-timing-function permet de spécifier la vitesse de progression de la transition au cours de la durée de son exécution.Exemple d'écriture CSS de transition-timing-function transition-timing-function : ease-in-out; transition-timing-function : steps; transition-timing-function : lin...

Fonction CSS translate()

La fonction de transformation CSS translate de la propriété CSS transform permet de spécifier une translation (déplacement) horizontale et verticale d'un élément HTML par rapport à sa position d'origine. Exemple d'écriture CSS de transform : translate transform : translate 20px, 2em); tran...

Fonction CSS translate3d()

La fonction de transformation CSS translate3d de la propriété CSS transform permet de spécifier les translations (déplacements) d'un élément HTML par rapport à sa position d'origine, sur les trois axes de perspective 3D. Exemple d'écriture CSS de transform : translate3d transform : transla...

Fonction CSS translateX()

La fonction de transformation CSS translateX de la propriété CSS transform permet de spécifier une translation (déplacement) horizontale d'un élément HTML par rapport à sa position d'origine. Exemple d'écriture CSS de transform : translateX transform : translateX 20px); // identique &agrav...

Fonction CSS translateY()

La fonction de transformation CSS translateY de la propriété CSS transform permet de spécifier une translation (déplacement) verticale d'un élément HTML par rapport à sa position d'origine. Exemple d'écriture CSS de transform : translateY transform : translateY 20px); // identique à...

Fonction CSS translateZ()

La fonction de transformation CSS translateZ de la propriété CSS transform permet de spécifier une translation (déplacement) sur l'axe Z d'un élément HTML par rapport à sa position d'origine dans le cadre d'un contexte 3D. Exemple d'écriture CSS de transform : translateZ transform : transl...


Propriété CSS unicode-bidi

La propriété CSS unicode-bidi permet de spécifier le sens des incorporations et contraintes pour l'algorithme bi-directionnel Unicode.Exemple d'écriture CSS de unicode-bidi unicode-bidi : bidi-override; unicode-bidi : inline; unicode-bidi : embed; La propriété de feuille de style unicode-bidi CSS peut pendr...

Sélecteur CSS universel

Le sélecteur universel CSS * (astérisque ou étoile) permet de sélectionner n'importe quel élément, quel que soit son type.Exemple d'écriture CSS de * *{ color:red; } # universel *{ color:red; } ...

Propriété CSS user-select

La propriété CSS user-select permet de spécifier si l'élément HTML est sélectionnable. Exemple d'écriture CSS de user-select user-select : none; user-select : text; user-select : all; La propriété de feuille de style user-select CSS peut prendre la valeur de : - none : ne peut êtr...

Propriété CSS -moz-user-select

La propriété CSS -moz-user-select permet de spécifier si le contenu d'un élément HTML est sélectionnable.Exemple d'écriture CSS de -moz-user-select -moz-user-select : none; -moz-user-select : -moz-none; -moz-user-select : text; La propriété de feuille de style -moz-user-select CSS peut ...

Propriété CSS -ms-user-select

La propriété CSS -ms-user-select permet de spécifier si l'élément HTML est sélectionnable. Exemple d'écriture CSS de -ms-user-select -ms-user-select : none; -ms-user-select : text; -ms-user-select : element; La propriété feuille de style -ms-user-select css peut prendre la valeur de :- ...

Propriété CSS -webkit-user-select

La propriété CSS -webkit-user-select permet de spécifier si l'élément HTML est sélectionnable.Exemple d'écriture CSS de -webkit-user-select -webkit-user-select : auto; -webkit-user-select : none; -webkit-user-select : text; La propriété de feuille de style -webkit-user-select CSS peut p...


Sélecteur CSS :valid

La pseudo-classe CSS :valid permet de cibler les éléments (X)HTML input, fieldset et form si les types de données attendues sont correctes afin de leurs assigner des propriétés CSS. Exemple d'écriture CSS de :valid :valid { /* Propriétés */ } identifiant :valid { /* Propriétés */ ...

Propriété CSS vertical-align

La propriété CSS vertical-align permet de définir l'alignement vertical du texte ou plus globalement les éléments dits inline par rapport à la ligne qui les contient ou une cellule de tableau.Exemple d'écriture CSS de vertical-align vertical-align : top; vertical-align : 10%; vertical-align : middle;...

Propriété CSS visibility

La propriété CSS visibility permet de cacher un élément tout en gardant visible l'espace qu'il occupe, on dit que l'élément reste dans le flux. Si au contraire, vous voulez que l'élément sort du flux vous devez utiliser propriété Css display à la valeur none qui permet de ...

Sélecteur CSS :visited

La pseudo-classe CSS :visited permet d'assigner des propriétés CSS à une balise HTML A dont le lien a déjà été visité et à ses fils.Exemple d'écriture CSS :visited a :visited{ /* propriétés Css pour le lien visité */ } identifiant :visited{ /* propriét&e...

Propriété CSS voice-family

La propriété de feuille de style css voice-family permet de spécifier le type de voix a utiliser pour la lecture d'un bloc texte.<style media="aural"> .identifiant{ voice-family :female; } </style> La propriété de feuille de style css voice-family est utilisée pour les feuille de style ...

Propriété CSS volume

La propriété de feuille de style css volume permet de spécifier le volume de la voix à utiliser pour la lecture d'un bloc texte.<style media="aural"> .identifiant{ volume :x-loud; } </style> La propriété de feuille de style css volume est utilisée pour les feuille de style css de...


Propriété CSS white-space

La propriété CSS white-space permet spécifier la manière dont votre navigateur va interpréter les espaces blancs et les types de caractères de retour à la ligne et la justification automatique.Exemple d'écriture CSS de white-space : white-space : normal; white-space : pre; white-space : pre-wr...

Propriété CSS width

La propriété CSS width permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS de width width : auto; width : 300px; width : 100%; La propriété de feuille de style width CSS peut prendre la valeur de :- numérique positif suivi...

Propriété CSS word-break

La propriété CSS word-break permet de spécifier comment faire la césure des mots.Exemple d'écriture CSS de word-break word-break : normal; word-break : break-all; word-break : keep-all; La propriété de feuille de style word-break CSS peut pendre une valeur :normal : applique les règles de c&ea...

Propriété CSS word-spacing

La propriété CSS word-spacing permet d'augmenter ou diminuer l'espacement par défaut qui est entre chaque mot.Exemple d'écriture CSS de word-spacing word-spacing : 15px; word-spacing : -0.1em; La propriété de feuille de style word-spacing CSS peut pendre une valeur :- numérique positif ou néga...

Propriété CSS word-wrap

La propriété CSS word-wrap permet de spécifier que le navigateur peut rompre un mot afin d'éviter les débordements de l'élément.Exemple d'écriture CSS de word-wrap word-wrap : break-word; word-wrap : normal; La propriété de feuille de style word-wrap CSS peut pendre une valeur :-...

Propriété CSS writing-mode

La propriété CSS writing-mode permet la gestion des modes d'écritures internationaux en spécifiant le sens de l'affichage horizontal ou vertical du texte.Exemple d'écriture CSS de writing-mode writing-mode : horizontal-tb; writing-mode : vertical-rl; writing-mode : vertical-lr; La propriété de feuill...

Propriété CSS -ms-writing-mode

La propriété CSS -ms-writing-mode permet la gestion des modes d'écritures internationaux en spécifiant le sens de l'affichage horizontal ou vertical du texte.Exemple d'écriture CSS de -ms-writing-mode -ms-writing-mode : tb-rl; -ms-writing-mode : rl-tb; -ms-writing-mode : vertical-rl; -ms-writing-mode : tb-lr; La p...

Propriété CSS -webkit-writing-mode

La propriété CSS -webkit-writing-mode permet la gestion des modes d'écritures internationaux en spécifiant le sens de l'affichage horizontal ou vertical du texte.Exemple d'écriture CSS de -webkit-writing-mode -webkit-writing-mode : horizontal-tb; -webkit-writing-mode : vertical-lr; -webkit-writing-mode : vertical-...


X Pas de résultat

Aucune propriété de feuille de style (css) n'est associée à cette lettre X .
N'hésitez pas à me contacter, si vous ne trouvez pas une définition d'une feuille de style.

Toutes les CSS par ordre alphabétique


Y Pas de résultat

Aucune propriété de feuille de style (css) n'est associée à cette lettre Y .
N'hésitez pas à me contacter, si vous ne trouvez pas une définition d'une feuille de style.

Toutes les CSS par ordre alphabétique


Z Pas de résultat

Aucune propriété de feuille de style (css) n'est associée à cette lettre Z .
N'hésitez pas à me contacter, si vous ne trouvez pas une définition d'une feuille de style.

Toutes les CSS par ordre alphabétique


Pompage.net - 8 façons simples d'améliorer la typographie dans vos designs

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

8 façons simples d’améliorer la typographie dans vos designs

Par Antonio Carusone

Cet article a été écrit pour publication dans Smashing Magazine le 3 avril 2009. Je le reproduis ici pour vous être agréable.

Beaucoup de gens, y compris les designers, pensent que la typographie consiste à choisir une police, sa taille et si elle doit être grasse ou pas. Pour la plupart des gens, ça s'arrête là. Obtenir une bonne typographie demande tellement plus, notamment de s'attarder sur les détails que les designers négligent souvent.

Ces détails donnent au designer le contrôle total, leur permettant d'apporter une typographie belle et cohérente à leurs designs. Bien que ces subtilités puissent être appliquées à différents types de médias, dans cet article nous nous concentrerons sur leur application au design web à travers l'utilisation des CSS.

Voici donc 8 façons simples d'améliorer la typographie, et donc l'ergonomie, de vos designs.

Justification

La justification est la longueur d'une ligne de texte. Pour l'œil d'un lecteur, des lignes trop longues ou trop courtes peuvent être fatigantes et gênantes. Une justification longue perturbe le rythme de lecture car le lecteur a du mal à localiser la prochaine ligne de texte. Une justification étroite n'est acceptable que pour de petites quantités de texte. Pour une lisibilité optimale, vous devriez avoir une justification de 40 à 80 caractères, espaces inclus. Pour un design à une seule colonne, une justification de 65 caractères est considérée comme idéale.

Comparaison de texte bien et mal justifié

Une manière simple pour calculer la justification est d'utiliser la méthode de Robert Bringhurst, qui multiplie la taille de la police par 30. Si la taille de la police est de 10px, la multiplier par 30 vous donne une justification de 300px ou environ 65 caractères par ligne. Le code ressemblerait à quelque chose comme :

p {
  font-size: 10px;
  max-width: 300px;
}

Interlignage

L'interlignage est l'espace entre les lignes du corps de texte qui joue un rôle important dans sa lisibilité. Des lignes correctement espacées permettent au lecteur de mieux cerner la fonte et améliorent l'apparence globale du texte. L'interlignage altère aussi la couleur typographique, qui est la densité ou la tonalité d'une composition.

Plusieurs facteurs impactent l'interlignage : police, taille, graisse, casse, justification, intermot de la fonte, etc. Plus la justification est longue, plus l'interlignage devient nécessaire. À l'inverse, plus la taille de la fonte augmente, plus l'interlignage peut être réduit. Une bonne règle est de déterminer un interlignage de 2 à 5 points plus grand que la taille de la fonte, selon la police. Si vous avez une fonte de 12pt, un interlignage de 15 à 16pt devrait bien fonctionner sur le Web.

Comparaison de texte avec bonne et mauvaise hauteur d'interligne

Obtenir le bon espacement demande un peu de finesse, mais voici un exemple de ce à quoi le code pourrait ressembler :

body {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

Ponctuation flottante

Placez les guillemets dans la marge du corps de texte. En ignorant cela, un guillemet aligné avec le texte interrompra la marge gauche et perturbera le rythme du lecteur. Placer les guillemets à l'extérieur permet de conserver l'alignement à gauche intact et équilibré, améliorant ainsi la lisibilité.

Comparaison de guillemets alignés à la marge et dans le texte

Ce résultat est obtenu très facilement avec CSS en utilisant l'élément blockquote :

blockquote {
  text-indent: -0.8em;
  font-size: 12px;
}

L'indentation négative dépendra de la police, de la taille de la fonte et des marges utilisées.

Rythme vertical

Une grille de référence est fondamentale pour obtenir un rythme typographique cohérent sur une page. Elle permet au lecteur de suivre facilement le flux du texte, ce qui par la même augmente la lisibilité. Un rythme continu dans la dimension verticale maintient tout le texte sur une grille cohérente, afin que la proportion et l'équilibre soient conservés dans toute la page, quels que soient la taille de la fonte, l'interlignage ou la justification.

Comparaison de texte aligné ou non sur la grille

Pour conserver un rythme vertical en CSS il faut que l'espacement entre les éléments et l'interlignage soient égaux à la taille de la grille de référence. Par exemple, disons que vous utilisez une grille de référence de 15px, ce qui signifie qu'il y a 15px entre chaque ligne de base. L'interlignage serait de 15px et l'espace entre chaque paragraphe serait également de 15px. Voici un exemple :

body {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
}
p {
  margin-bottom: 15px;
}

Cela permet à chaque paragraphe de s'aligner sur la grille et ainsi de conserver le rythme vertical du texte.

Veuves et Orphelines

Une veuve est une ligne courte ou un mot unique à la fin d'un paragraphe. Un orphelin est un mot ou une ligne courte au début ou à la fin d'une colonne séparée du reste du paragraphe. Les veuves et les orphelines créent des drapeaux inélégants, interrompent l'œil du lecteur et affectent la lisibilité. Ils peuvent être évités en ajustant la taille de la fonte, l'interlignage, la justification, l'intermots, l'interlettrage ou en entrant manuellement des sauts de ligne.

Comparaison de texte sans et avec veuves et orphelines

Malheureusement, il n'existe pas de moyen facile pour empêcher les veuves et orphelines typographiques avec CSS. Une façon de les supprimer a été mentionnée précédemment, mais il existe également un plugin jQuery nommé jQWidon't qui place un espace insécable entre les deux derniers mots d'un élément.

[Ndt : les propriétés CSS widows et orphans permettraient de remédier à ce problème si elles étaient implémentées pour tout type de media]

Emphase

Mettre l'emphase sur un mot sans interrompre le lecteur est important. L'italique est généralement considéré comme étant la forme idéale d'emphase. D'autres formes d'emphase communes sont : gras, les capitales, les petites capitales, la taille de la fonte, la couleur, le soulignement ou une police de caractères différente. Essayez de vous limiter à une emphase unique, quelle qu'elle soit. Les combinaisons comme capitales-gras-italique sont perturbantes et ont l'air gauche.

Comparaison de texte avec emphase simple et combinée

Voici quelques manières différentes de créer une emphase en CSS :

span {
  font-variant: small-caps;
}
h1 {
  font-style: italic;
}
h2 {
  text-transform: uppercase;
}
a {
  text-decoration: underline;
}

Gardez à l'esprit que le style font-variant ne fonctionne que si la police choisie supporte la variante small-caps (petites capitales).

Échelle

Composez toujours à partir d'une échelle, que ce soit l'échelle traditionnelle développée au 16ème siècle de laquelle nous sommes tous familiers, ou une que vous créez vous-même. Une échelle est importante parce qu'elle établit une hiérarchie typographique qui améliore la lisibilité et crée une harmonie et cohérence à l'intérieur du texte.

Caractères dont la taille suit la progression de l'échelle typographique

Voici un exemple d'échelle typographique définie en CSS :

h1 {
  font-size: 48px;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 21px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
p {
  font-size: 14px;
}

De beaux drapeaux

Lorsque vous ferrez un bloc de texte, à gauche ou à droite, un texte non justifié, soyez sûr de maintenir le drapeau (le côté inégal) équilibré sans aucuns « trous » inattendus ou formes bizarres. Un mauvais drapeau peut être déstabilisant pour l'œil et distraire le lecteur. Un bon drapeau est plus « doux », sans lignes trop longues ou trop courtes. Il n'existe aucun moyen de contrôler cela en CSS, donc pour obtenir un bon drapeau vous devez faire des ajustements manuels sur le bloc de texte.

Comparaison de texte bien et mal aligné

La césure peut aussi aider à faire des drapeaux propres, mais malheureusement les CSS ne peuvent pas le gérer pour l'instant. Peut-être dans un avenir proche, allons-nous avoir une certaine mesure de contrôle avec CSS 3. Tout n'est pas perdu cela dit. Il existe quelques solutions serveur et côté client pour une césure automatique comme phpHyphenator et Hyphenator ainsi que des générateurs en ligne.

Ressources supplémentaires

Voici une liste d'articles et livres sur le même thème pour vous aider avec les détails :

  • Five Simple Steps to Better Typography, Mark Boulton
  • Incremental Leading, Mark Boulton
  • Compose to a Vertical Rhythm, Richard Rutter — 24 Ways
  • Setting Type on the Web to a Baseline Grid, Wilson Minor — A List Apart
  • Setting Web Type to a Baseline Grid, Craig Grannell — Opera
  • The Elements of Typographic Style Applied to the Web, Robert Bringhurst
  • How to Size Text in CSS, Richard Rutter — A List Apart
  • Baseline Rhythm Calculator, Geoffrey Grosenbach
  • Detail In Typography, Jost Hochuli
  • The Elements of Typographic Style, Robert Bringhurst
  • Thinking with Type, Ellen Lupton
  • Grid Systems in Graphic Design, Josef Müller-Brockmann

Fiche technique

  • Article original : 8 Simple Ways to Improve Typography In Your Designs
  • Auteur : Antonio Carusone
  • Date de parution : 06/04/09
  • Traduction : Marie Alhomme
  • Date de traduction : septembre 2009
  • Thèmes : Design, Typographie
  • Niveau : Débutant

À propos de l'auteur

Né dans le Queens, New-York dans une famille italienne très colorée, Antonio Carusone a été dans les arts créatifs depuis sont enfance.
Aujourd’hui, Antonio réside dans la ville de New-York, où il est Directeur artistique à Ogilvy, après avoir suivi la réputée High School of Art and Design dans la ville de New-York, puis le Pratt Institute de Brooklyn et enfin l’Academy of Art College de San Francisco.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

  • Quelles mesures CSS, pour quel usage ?
  • 8 raisons de ne pas s’inscrire sur un site
  • Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs
  • Introduction au positionnement CSS
  • Penser mobile d’abord aide pour les décisions critiques
  • Penser mobile d’abord
  • Accessibilité : un regard sur la résolution et la taille des écrans
  • La checklist d’accessibilité que je m’étais juré de ne pas rédiger
  • Font-weight est toujours cassé pour l’ensemble des navigateurs sauf un
  • On revoit les bases : la propriété « background »

Design

  • Concevoir un design sans la couleur
  • Les pixels, voilà l’ennemi !
  • Mettre en place l’expérience utilisateur : une étude de cas
  • Communiquer sur le design
  • La propriété border-image en CSS3
  • Pourquoi les menus affichés au survol font plus de mal que de bien aux utilisateurs
  • Désacraliser les tests d’utilisabilité
  • Contraste et sens
  • Sortez-vous la tête des grilles
  • Le singe baigneur est nu, et autres considérations sur la distinction entre stylisme et design

Typographie

  • Pour une typographie qui a du sens
  • Dimensionner ses fontes avec rem
  • De la vraie typographie pour le Web

© 2001-2018 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site


Pompage.net - CSS : on reprend tout à zéro !

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro !

Par Joe Gillespie

Introduction

Si l'idée d'utiliser des Feuilles de Styles en Cascade vous effraie, tranquillisez-vous. Le fait d'utiliser un ordinateur peut être terrifiant pour quelqu'un qui le découvre pour la première fois, mais après un certain temps, on n'y pense plus. Le tout, c'est d'y aller par petites étapes au départ, et c'est ce que je compte faire dans cette série de tutoriels. Une étape à la fois !

Que vous utilisiez un éditeur WYSIWYG sans jamais vous occuper du code source qu'il y a derrière, ou même si vous n'avez jamais créé la moindre page Web, ce tutoriel va vous mettre dans la bonne direction.
Je pars du principe que vous ne savez rien, ou pas grand-chose, de la façon dont on monte une page Web. Il s'agit vraiment de « tout reprendre à zéro ! »

De quoi aurez-vous besoin?

De rien de particulier. Si vous avez un éditeur de page web, très bien. Sinon, vous pouvez utiliser n'importe quel éditeur de texte : Bloc-Notes sur un PC, ou alors SimpleText ou TextEdit sur un Mac. Si vous utilisez déjà DreamWeaver ou GoLive, sachez que nous allons utiliser le mode « source. »

Pas de panique ! Un éditeur graphique n'est pas essentiel, parce que je ne vais pas trop m'occuper de graphiques pour commencer.

Ah, vous aurez besoin d'un navigateur, ça va sans dire. En fait, je recommanderais de prendre plusieurs navigateurs différents. Si vous ne disposez que d'Explorer, vous devriez également prendre Mozilla ou d'autres dans cette liste des Nouveaux Navigateurs ( établie en février 2004 et non remise à jour, NdT ).

Si vous voulez télécharger vos pages vers un serveur Web, vous aurez besoin d'un programme FTP standard, mais ne vous en inquiétez pas pour l'instant, tout va être fait sur votre ordinateur.

Première étape : une page de base

Avant toute chose, il nous faut une page Web de base. Voici la page Web la plus simple possible.

<html>
 <head>
 </head>
 <body>
Voici ma page Web
 </body>
</html>

Nous avons ici trois ensembles de « balises »; les balises vont généralement par paires, mais pas toujours. Celle qui englobe toute la page est la paire de balises <html>...</html>. La première <html> est la « balise ouvrante », et la « balise fermante » est identique sauf qu'elle a un caractère de barre oblique entre le < et le html>.

À l'intérieur de la balise html se trouvent deux autres paires de balises.

La partie <head>...</head> contient des informations qui ne vont pas se voir sur votre page Web, la plus importante étant le titre qui apparaît dans la barre de titre de votre navigateur. Il faut insérer le titre de votre page entre une paire de balises de titre comme ceci...

<html>
<head>
<title>Ma page</title>
</head>
<body>
Voici le contenu de ma page Web !
</body>
</html>

La paire de balises <body>...</body> contient l'intégralité de votre page Web, le texte, les images, les animations Flash, tout ce que vous voulez. Vous pouvez soit taper le code dans votre éditeur de texte ou dans la fenêtre « source » d'un éditeur WYSIWYG, soit le copier-coller à partir d'ici.

Mon HTMLéphant, moyen mnémotechnique visuel pour l'ordre des balises
Voici mon HTMLéphant. Bon d'accord, ce n'est pas très original, mais au moins vous vous en souviendrez !

Donc, vous voilà avec une page Web qui fonctionnera dans n'importe quel navigateur (une fois que vous l'aurez enregistrée). Appelez-la « index.html », parce que c'est le nom de la première page sur tous les sites Web. Vous pouvez enregistrer le fichier n'importe où sur le disque dur de votre ordinateur, mais pour que les choses restent bien en ordre, créez un nouveau dossier pour y ranger vos pages Web.

La façon normale d'ouvrir votre page dans le navigateur est d'utiliser la commande « Ouvrir » dans le menu « Fichier » du navigateur, mais il y a un moyen plus rapide. Créez un raccourci pour votre fichier ou copiez-le, et placez-le sur le bureau. À partir de là, vous n'aurez qu'à faire glisser à la souris l'icône de votre fichier vers la fenêtre du navigateur, et votre page apparaîtra dans toute sa splendeur ! Elle devrait ressembler à ceci.

Bien qu'elle soit merveilleuse, il manque à votre page web un ingrédient essentiel : du contenu. Ça ne rime pas à grand-chose d'avoir une page Web si elle ne dit rien d'intéressant (en-dehors de « Voici le contenu de ma page Web ! »), mais c'est votre affaire.

Quel que soit le contenu, il devra être inclus entre la paire de balises <body>...</body> pour que le navigateur l'affiche.

Tant qu'on se contente de placer un texte dans une page Web nue comme ici, il n'a ni structure, ni style. Quand je parle de structure, je veux dire que les mots vont de gauche à droite et de haut en bas sans autre mise en valeur que l'ordre dans lequel ils apparaissent. Il est plus logique de regrouper ces mots et ces phrases en paragraphes, titres, sous-titres : bref, vous voyez, les trucs de base qu'on vous a appris à l'école.

Les navigateurs ignorent les retours à la ligne ou les paragraphes que vous avez dans votre texte brut. Ils ignorent aussi les tabulations, et si vous avez placé plus d'un espace entre deux mots, ils ignoreront également les espaces supplémentaires.

Il est utile, dans presque tous les textes, d'avoir un titre, un sous-titre, quelques paragraphes distincts et peut-être une signature à la fin.

Dans le HTML, le mécanisme permettant de faire ceci est fourni par encore d'autre balises de mise en forme.

On crée un paragraphe en incluant du texte au sein d'une paire de balises <p>...</p>. Un paragraphe en HTML, c'est tout simplement un bloc de texte d'une ou plusieurs phrases avec un petit bout d'espace pour le séparer du suivant : exactement comme ici.

Pour les titres, il y a six différents degrés de mise en valeur, qui vont du plus élevé <h1>...</h1> jusqu'au plus bas <h6>...</h6>. Ils ressemblent à ceci...

Voici un titre h1

Voici un titre h2

Voici un titre h3

Voici un titre h4

Voici un titre h5
Voici un titre h6

Comme vous le voyez, leur taille diminue quand la valeur de leur chiffre augmente, le <h4> faisant à peu près la même taille que la « petite » police du texte que vous lisez ici. <h5> et <h6> sont plus petits, mais en caractères gras.

Il existe une poignée d'autres petites astuces qui permettent de jouer avec le texte pour mettre en valeurs certains mots ou expressions. Plutôt que de penser à leur aspect, réfléchissez à leur fonction réelle.

Le caractère gras est une version plus lourde de la police de texte, et se marque par <b>...</b>. Toutefois, le mot « gras » est un terme de style pour l'impression, et sur le Web il est préférable d'utiliser <strong>...</strong>. Même si cela revient au même sur votre écran, le HTML doit aussi fonctionner sur d'autres supports. Les logiciels qui lisent les pages Web aux personnes malvoyantes comprendront ce strong et le prononceront avec la force nécessaire.

L'italique s'applique, vous l'aurez deviné, grâce à <i>...</i>. Là aussi, avec HTML, mieux vaut ne pas utiliser ce style visuel mais plutôt <em>...</em>. On obtient ainsi un effet d'italique quel que soit l'outil qui reproduit le texte.

Le soulignement peut s'effectuer avec la paire de balises <u>...</u> mais un soulignement dans une page Web a un sens particulier. Il sert généralement à indiquer un lien. Mieux vaut ne pas utiliser le soulignement comme mode de mise en valeur, cela peut créer une confusion pour les lecteurs.

L'autre balise importante est le retour à la ligne <br>. Contrairement aux autres balises, celle-ci ne requiert pas de balise fermante, qui n'aurait pas beaucoup de sens d'ailleurs : où la mettrait-on ?

En utilisant ces balises de mise en forme de base, le texte commence à prendre forme. Il devient plus proche de ce que vous pourriez produire avec un traitement de texte.

Cette page de base aura sans doute un aspect différent dans d'autres navigateurs et sur d'autres ordinateurs. Chaque navigateur a un ensemble de styles par défaut, et sauf instruction contraire de votre part, il utilisera ces données par défaut. Pour ignorer ces styles par défaut, nous allons tout simplement produire nos propres styles qui seront regroupés dans une « feuille de styles » collective.


Pompage.net - CSS : on reprend tout à zéro ! (épisode 2)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 2)

Par Joe Gillespie

Deuxième étape : Une Feuille de Style.

Une feuille de style est un concept assez simple, c'est une page de définitions ou de caractéristiques concernant le style qui indiquent au navigateur comment afficher les divers éléments d'une page. Si vous vous demandez où le terme de « cascade » va arriver, ne vous inquiétez pas encore à son sujet. J'y reviendrai plus tard quand nous commencerons à appliquer les styles à notre HTML.

Pour faire simple, nous allons écrire notre feuille de style dans la page Web. Plus tard, vous constaterez que vous pouvez avoir une « feuille de style externe » dans un fichier séparé, qui peut être appelé par plusieurs pages. Le grand avantage, c'est qu'une seule modification dans cette feuille de style principale affectera toutes les pages qui lui sont liées.

Les styles que nous allons employer sont définis dans la partie <head>…</head> de notre page comme ceci :

<style type="text/css" title="mes_styles" media="all">
<!--

-->
</style>

Ici, vous voyez une paire de balises <style>…</style> mais il y a en plus quelques attributs qui ont besoin d'être expliqués.

type="text/css" indique au navigateur que nous utilisons juste du texte pour décrire les styles, aucune fantaisie ici.

title="mes_styles" identifie simplement le style pour votre propre information.

media="all" C'est là où ça commence à devenir intéressant. Vous pouvez avoir une feuille de style pour décrire à quoi ressemble votre page sur un écran d'ordinateur (media="screen") et une autre complètement différente pour définir l'impression (media="print"). Il y existe d'autres médias comme « projection », « tv », « braille » et « aural ». Maintenant vous pouvez comprendre la logique de ne pas employer « bold » et « italic ». Pour l'instant, nous emploierons seulement « all », qui est pour tous les usages.

Les caractères <!-- et --> sont une manière de cacher le texte sur une page Web, on peut seulement le voir dans le code. Ceci s'appelle « commenter » mais comme les styles sont définis dans la section <head>…</head> de la page, ils ne devraient pas apparaître de toute façon.

La première chose que nous allons faire est de définir le style du corps de la page. Tout ce qui est contenu entre les balises <body>…</body> se verra appliquer ce ou ces styles.

La définition de base de la partie « body » ressemble à ceci : le mot body suivi d'une paire d'accolades.

body {}

Nous allons donner à la page une couleur de fond …

Le style par défaut des navigateurs donne habituellement du texte noir sur une page blanche, mais nous allons changer cela en un gris pâle plus chaud. Voici comment nous définissons une valeur pour la couleur de fond du corps de la page. Notez que nous n'employons pas un signe égale « = » mais deux points « : ».

body { background-color: #e8eae8 }

Qu'est-ce que c'est, #e8eae8 ?

Les couleurs sur les pages Web sont définies en mélangeant 256 nuances de rouge, de vert et de bleu dans diverses proportions. Les humains ont 10 doigts sur leurs mains, donc ils comptent par dix. Les ordinateurs préfèrent compter par seize, bien qu'ils n'aient pas de doigts, mais une fois que vous allez au-dessus de neuf, il n'y a aucun numéro pour représenter 10, 11, 12, 13, 14, et 15. Aussi nous leurs substituons les lettres a, b, c, d, e, f. Ainsi, quand on compte en « hexadécimal », 10 est représenté par « a » et 15 par « f ». Quand vous allez au-dessus de 15, vous ajoutez un deuxième chiffre et « 10 » représente 16. En utilisant cette méthode, tous les nombres de 0 à 255 peuvent être représentés par deux nombres ou lettres. 255 équivaut ainsi à FF, #ffffff sera du blanc et #000000 du noir.

Notre couleur de fond est donc rouge e8 (232), vert ea (234), bleu e8 (232). Le signe dièse devant précise qu'il s'agit de nombres hexadécimaux et non de décimaux ordinaires.

Parfois vous verrez seulement trois caractères, par exemple, #2a0. C'est une notation courte pour 22aa00. Quand il y a les deux mêmes caractères dans chacune des trois valeurs de couleur, vous pouvez vous passer du second caractère et votre navigateur comprendra ce que cela signifie.

En utilisant seulement trois chiffres, vous pouvez avoir 4096 couleurs différentes. Avec six chiffres, les possibilités sont de seize millions.

rouge, vert et bleu

Avec des couleurs à un seul chiffre, le rouge, le vert et le bleu ont chacun 16 étapes de luminosité, qui peuvent être combinées de nombreuses façons afin de produire toutes les autres.

Combinaison de couleurs

Si vous codez à la main, employer des valeurs de couleur à trois chiffres est plus simple et probablement suffisant.

Quoi qu'il en soit, ajoutons maintenant une couleur pour la police afin de remplacer le noir. Elle a été choisie avec l'outil « pipette » dans Photoshop, c'est ainsi un nombre hexadécimal de 6 chiffres …

body { background-color: #e8eae8; color: #5d665b }

Notez comment la couleur de fond et la couleur de premier plan (pour le texte) sont séparées par un point-virgule. Faites attention à ne pas mélanger les deux points et les points-virgules ou les choses tourneront vraiment mal.

Et maintenant, de façon à ce que le texte ne s'étende pas jusqu'aux bords de notre page, nous pouvons entourer la page d'une marge. « margin : 50px » est ajouté à notre définition de style pour la partie « body », de nouveau séparée de la précédente par un point-virgule.

body {
 background-color: #e8eae8;
 color: #5d665b;
 margin: 50px
}

N'importe quel texte que nous ajouterons maintenant à la page sera par défaut d'un gris-vert foncé sur un fond gris pâle. Nous verrons plus tard comment ceci peut être redéfini pour des cas spéciaux.

Jetons un oeil sur ce que nous avons fait jusqu'ici.


Pompage.net - CSS : on reprend tout à zéro ! (épisode 3)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 3)

Par Joe Gillespie

Troisième étape : appliquer du style au texte

Nous nous sommes déjà débarrassés du côté brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on peut faire beaucoup plus. On peut changer la police d'écriture, la taille des caractères, la quantité d'espace entre les lignes et ajouter des détails de mise en valeur comme des retraits de paragraphes.

La police d'écriture

Nous allons commencer par le style de police, dans la mesure où c'est ce qui va apporter le plus grand changement. À la différence du papier, les pages Web ne peuvent utiliser que les polices qui sont installées sur l'ordinateur de l'utilisateur : on ne peut donc pas se contenter d'indiquer la police qui nous plaît le plus, il faut utiliser celles qui sont communes à tous les ordinateurs (celles qui sont préinstallées avec le système). Cela réduit considérablement le choix. Vous allez vous apercevoir que vous êtes limités à deux ou trois polices serif, à autant de sans-serif et à un style de type machine à écrire, à espacement constant : monospace. Au lieu de ne choisir qu'un seul style de police, on indique une famille, dans l'espoir qu'une d'entre elles sera installée sur l'ordinateur du visiteur.

Exemples de polices pour le Web

Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Vous ne pouvez jamais être certain que telle ou telle police est présente, il faut donc fournir des alternatives.

Voici une indication courante de famille de polices sans-serif :

font-family: Verdana, Geneva, Arial, sans-serif;

Voici une famille de polices serif :

font-family: Georgia, "Times New Roman", Times, serif;

Remarquez que lorsque le nom d'une police contient plus d'un mot, l'ensemble doit être placé entre guillemets à l'anglaise : "Times New Roman".

Ajoutons les polices sans-serif à nos styles et voyons ce que ça donne.

Notre page en police sans-serif >>

La taille des caractères

La question de la taille qu'on assigne aux caractères est très délicate. Pour l'impression, on peut fixer une taille de police en points, et le caractère aura toujours cette même taille. Il occupera toujours le même espace sur la page, et les retours à la ligne seront toujours à l'endroit que vous aurez choisi.

Sur le Web, les tailles de caractères ne sont pas gravées dans le marbre, et elles peuvent changer d'un ordinateur à l'autre, parfois du tout au tout. En fonction de la taille de l'écran de l'internaute, de son système d'exploitation et de son navigateur, les caractères peuvent devenir tellement petits qu'ils en sont illisibles, ou aussi grands que dans des méthodes de lecture pour enfants. Les internautes ont heureusement la possibilité de choisir une taille « confortable » dans les préférences de leur navigateurs, et donc de réduire un peu ces variations de taille, mais le résultat peut rester très différent de ce que vous attendiez.

Vue la popularité grandissante du Wi-Fi et des systèmes de poche, les modes de navigation sur vos pages vont changer radicalement dans les prochaines années. Pour que vos pages restent lisibles à long terme, vous devez raisonner en termes de maquettes liquides qui s'adaptent à la taille de l'écran.

Répétez après moi : « Le Web, ce n'est pas la même chose que le papier ! »

Tailles de caractères relatives

Si vous voulez que vos pages touchent le plus large public, mieux vaut assigner une taille de caractères relative à la taille que le visiteur aura choisie par défaut. Il y a plusieurs façons d'assigner des tailles de caractères relatives. Vous pouvez utiliser des pourcentages de la valeur par défaut (%), ou bien une unité nommée « em », qui correspond à 100%. 1.2em revient à 120%. La meilleure méthode est d'utiliser un ensemble de descriptions pré-définies qui font penser à des tailles de tee-shirts. « Medium » revient à 100%, ou 1em. « Smaller » est une taille en-dessous, et « Larger » une taille au dessus. Il y a aussi x-small, xx-small, x-large et xx-large. L'intérêt d'utiliser ce système par rapport aux pourcentages ou aux ems, c'est que les navigateurs ne laisseront pas la police d'écriture devenir si petite qu'on ne puisse plus la lire. Imaginez, par exemple, que vous indiquiez une taille de caractères de 0.7em ou de 70% qui rendrait très bien sur votre PC. Pour quelqu'un équipé d'un Mac avec une taille de caractères par défaut plus petite, ce 70% pourrait faire passer vos caractères sous le seuil de la lisibilité. xx-small est une bonne solution pour déterminer quelle est la taille de caractères minimum que l'ordinateur peut afficher.

xx-large x-large large medium small x-small xx-small

Caractères xx-small : C'est petit mais le texte reste lisible
Avec une taille fixe trop petite : C'est beaucoup trop petit

Tailles de caractères absolues

Si votre site ne concerne qu'un nombre limité de visiteurs qui utilisent à peu près le même type d'ordinateur que vous, vous pouvez également indiquer des tailles de caractères en pixels. Les pixels ne varient pas tellement d'un ordinateur de bureau à l'autre, et la taille des caractères sera similaire, sinon identique. Dès que l'on passe à des ordinateurs portables ou bien de poche, ou encore à des moniteurs très grands et à haute résolution, les tailles de pixels s'éloignent de la norme, et la taille des caractères sera modifiée d'autant.

Pour que vous puissiez percevoir les différences, j'ai placé ci-dessous trois paragraphes de texte en utilisant trois méthodes : les pourcentages, les tailles de tee-shirts et les pixels. Sur mon écran sous Mozilla, leurs tailles sont quasi-identiques, mais ce n'est peut-être pas le cas sur le vôtre.

Cette ligne est définie à 85% de la taille du texte qui l'entoure.
Cette ligne est définie en x-small.
Cette ligne est définie à 11px absolument.

Notez qu'il ne faut jamais utiliser les « points » pour indiquer des tailles de caractères, c'est une unité d'impression.

L'interlignage

La quantité d'espace entre les lignes est d'environ 120% de la taille de caractères par défaut. On peut en ajouter un peu plus, ce qui améliore généralement la lisibilité, surtout si les lignes sont longues. J'évoquerai la longueur des lignes plus tard. Dans notre page d'exemple actuelle, la longueur des lignes est déterminée par la largeur de la fenêtre du navigateur, donc elle est peut-être plus grande qu'il ne faudrait.

Pour changer l'interlignage, nous avons à nouveau l'option relative (en % ou en ems) ou absolue (en px). Dans notre exemple, j'ai indiqué une hauteur de ligne (line-height), c'est-à-dire la hauteur du caractère et de l'espace supplémentaire au dessus, à 180% de la taille de caractères (small) pour toute la page. Comme la définition du style de la partie « body » commence à être un peu longue, je l'ai séparée en plusieurs lignes. Le navigateur s'en moque, mais c'est plus facile à lire par des humains. Tant que les accolades sont présentes et que chaque définition de style est séparée des autres par un point-virgule, tout va bien.

body {
background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%
}

Nous avons maintenant une page plus « aérée » >>

Les paragraphes

Tout ce que nous avons réalisé jusqu'à présent concernait l'ensemble de la page. Maintenant nous allons voir comment appliquer notre style à des zones plus précises.

Comme je l'ai évoqué précédemment, de gros morceaux de texte peuvent être découpés en paragraphes pour les rendre plus faciles à lire. Il existe plusieurs façons de séparer visuellement les paragraphes. On peut ajouter de l'espace supplémentaire, ou pourquoi pas faire un retrait de première ligne.

En typographie créative, les designers souhaitent parfois utiliser d'autres techniques moins courantes, comme un retrait d'à peu près la moitié de la largeur de la colonne, ou un retrait négatif. Les CSS sont capables de gérer tout cela, mais le séparateur de paragraphes par défaut est un « espacement de paragraphe » qui fait à peu près la moitié de la hauteur de ligne (line-height).

Pour qu'un bloc de texte devienne un paragraphe, contentez-vous de l'encadrer par une paire de balises <p>...</p>. Pour pouvoir manipuler le style des paragraphes avec CSS, on ajoute p { } aux définitions de style dans la partie « head » de la page, à la suite des styles pour « body ». Entre les accolades, ajoutez text-indent: 3em; (indent est le mot anglais pour « retrait », NdT)

 <style type="text/css" title="mes_styles" media="all">
<!--
body { background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva,
Arial, sans-serif;
font-size: small;
line-height: 180%
}

p { text-indent: 3em
} -->
</style>

Cette page est divisée en paragraphes >>

Remarquez que le premier paragraphe ne présente pas de retrait : il n'est pas encadré par <p>...</p>, donc ce n'est pas officiellement un paragraphe (en termes de HTML).

Les titres

J'ai déjà expliqué les six niveaux de titre que le HTML propose par défaut. Rien ne nous oblige à les conserver tels quels, nous pouvons les redéfinir selon nos besoins. Là encore, il ne s'agit que d'ajouter d'autres définitions aux styles.

Par défaut, les titres sont en grands caractères gras, et dotés d'espacements supplémentaires au-dessus et en-dessous. Souvenez-vous que les titres h1, h2 et h3 sont plus gros que le texte normal, tandis que h5 et h6 sont plus petits. Amusons-nous avec un titre h3 pour changer sa couleur et sa police de caractères.

h3 {color: #966b72; font-family: Georgia, "Times New Roman", Times, serif }

Nous avons maintenant des titres >>

Vous remarquez peut-être que j'ai ajouté une ligne vide sous le deuxième titre. Si vous vous contentez de mettre un paragraphe vide (<p></p>) cela ne marchera pas, il doit y avoir quelque chose entre les balises. Un espace ne fonctionnera pas non plus (<p> </p>) parce que HTML ignore les espaces s'ils ne sont pas entre deux caractères. Ce dont nous avons besoin, c'est d'un caractère invisible que nous fournit HTML sous le nom d'espace insécable que l'on peut taper &nbsp; comme ici :

 <p>&nbsp;</p>

L'espace insécable est également très utile placé entre deux mots que vous ne souhaitez pas voir séparés lorsque la ligne se termine : des noms de personnes ou d'entreprises par exemple.

D'autres petites manips

Avant d'aborder la partie suivante, essayons de modifier quelques petites choses dans notre page de texte.

Dans la définition de la partie « body », j'ai mis une marge de 50 pixels pour tous les côtés. Il est possible d'avoir différentes marges pour la gauche, la droite, le haut et le bas. Il n'y a qu'à les séparer comme ceci (respectivement marge du haut, de gauche, de droite et du bas, NdT) :

margin-top: 70px;
margin-left: 120px;
margin-right: 50px;
margin-bottom: 70px;

Cela va donner quelque chose plus proche d'une page imprimée, avec une marge de gauche plus importante. J'ai aussi appliqué à deux ou trois mots du gras (strong) et des italiques (em). Attention, les italiques rendent mal sur certains ordinateurs, et deviennent particulièrement difficiles à lire quand la taille est réduite.

Voyez notre page quand le texte a reçu ses styles >>

Désormais, vous disposez d'une page qui commence à avoir du style, et sans avoir fourni trop d'efforts. Toutefois, elle ressemble encore à un document tapé à la machine ou à l'aide d'un traitement de texte. Dans le prochain article, nous verrons d'autres possibilités de mise en page plus intéressantes.

En attendant, vous pouvez vous amuser avec les valeurs des styles de la page que vous venez de créer. Essayez différentes polices et tailles de caractères, différents interlignages. Mais surtout, visionnez votre page avec autant de navigateurs différents que possible, pour observer toutes les différences de rendu.


Pompage.net - CSS : on reprend tout à zéro ! (épisode 4)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 4)

Par Joe Gillespie

Quatrième étape : plus de mise en forme pour le texte

Avant d'aller plus loin dans la mise en forme du texte, c'est une bonne idée de vous familiariser avec quelques termes basiques de typographie.

Quand nous parlons de la taille de la police, ou font-size en CSS, cela fait référence à la distance entre le sommet d'une lettre majuscule comme « A » jusqu'au bas d'une lettre à jambage comme « p » ou « y ». Il peut aussi y avoir un léger espace supplémentaire appelé « interlignage ». Ce mot vient du fait que les imprimeurs utilisaient des petites lattes de plomb entre les lignes pour leur donner plus d'espace. (NdT : En anglais, « interlignage » se dit « leading » et le plomb se traduit « lead ».)

anatomie d'une lettre

Aujourd'hui, on n'utilise plus de plomb. On dit juste qu'il y a un certain espace entre la base d'une ligne de caractères et la suivante. L'interlignage est donc la hauteur du caractère plus cet espace supplémentaire. Dans une définition CSS, nous pourrions dire line-height: 180%; avec la valeur spécifiée en pourcentage, em ou pixels (px). On reviendra sur l'interlignage un peu plus loin.

Vertical-align vous permet d'ajuster la ligne de base pour des lettres individuellement par rapport au reste du texte mais relève plutôt pour un usage spécialisé (comme les formules mathématiques), et on ne va pas s'étendre sur son cas ici. Dans l'exemple basique ci-dessous, j'aurais pu utiliser la balise <sup>2</sup> mais le recours à CSS permet plus de contrôle.

E=MC2

Les CSS nous donnent également le contrôle sur l'interlettrage (ou crénage), c'est-à-dire l'espace entre chaque caractère ou mot.

C'est très pratique pour ajouter un style visuel à un gros titre.

UN TITRE ESPACÉ.

letter-spacing: 0.5em; word-spacing: 0.5em

Penser à la lisibilité

Avant que les navigateurs ne supportent aussi bien les CSS qu'à l'heure actuelle, il y avait une caractéristique essentielle qui manquait au formatage du texte en HTML, et que maîtrisait même la plus modeste des machines à écrire , l'interlignage. Quand il y a trop peu ou pas du tout d'espace entre les lignes, elles deviennent déprimantes et difficiles à lire. Et plus les lignes s'allongent, plus le problème s'accentue.

Des lignes trop courtes
interrompent trop
le schéma de lecture
de l'œil de la gauche
vers la droite.

Des lignes plus longues que la normale sont aussi fatigantes et le début de la ligne suivante devient difficile à localiser.

Pour une lecture confortable, une ligne de texte devrait être de la même longueur que une fois et demie à deux fois la longueur d'un alphabet en minuscules. Ce qui signifie entre quarante et soixante caractères ou huit à dix mots.

Si les lignes sont plus longues, un interlettrage plus grand aide à la lisibilité. Au début, beaucoup de pages web avaient leurs textes qui s'étendaient d'un bord à l'autre de la fenêtre, sans se soucier de la taille d'écran. Les écrans sont devenus plus larges, mais la pratique continue chez certains.

Par défaut, il y a un petit interlettrage dans les paramètres de texte des navigateurs. C'est approximativement 20 % de la taille de la police (hauteur d'une majuscule plus le jambage inférieur). Avec CSS vous pouvez avoir autant d'interlignage que vous le souhaitez. Si vous utilisez des tailles de polices relatives, vous pouvez le spécifier comme un pourcentage de la taille de la police. Exemple : font-size: 1em; line-height: 1.5em (ce qui équivaut à 150%). Si vous utilisez des tailles de polices fixes, vous pouvez indiquer quelque chose comme : font-size: 11px; line-height: 16px.

La définition pour cette page (NdT: la page originale de l'auteur) est font-size: small; line-height: 180% ce qui correspond à peu près à une fois et demie l'interlignage dans un traitement de texte ou une ancienne machine à écrire. Ainsi, dans cet exemple le haut de la page n'a pas de marges et le texte n'a pas de paramètres d'interlignage. Les spécifications générales pour l'élément body de la page fournissent la famille de police, la taille de la police et les couleurs pour les caractères et le fond de la page.

body {
color: #5d665b;
font-size: small;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #e8eae8
}

Le bloc de texte en bas de l'exemple est encapsulé dans une division de la page <div>...</div>. C'est comme une page dans une page. Elle possède une marge gauche de 250px, une marge droite de 200px, et l'interlignage est défini à 180%. Ces styles sont ajoutés aux spécifications générales de l'élément body par un procédé appelé « héritage ». Exactement comme un enfant qui peut hériter de certaines caractéristiques de ses parents, puis à son tour les transmettre à ses enfants, certains styles CSS « cascadent » quand ils sont imbriqués dans d'autres styles.

<div style="margin-left: 250px; margin-right: 200px;

line-height: 180%">...</div>

Les divisions de page (<div>) sont une part très importante de CSS et nous les étudierons plus en détail la prochaine fois.

Le contraste

Contrairement à une page imprimée que vous lisez par la réflexion de la lumière, la page sur un écran d'ordinateur est lumineuse. La différence de luminosité entre le texte noir et la page blanche est d'une amplitude beaucoup plus grande sur un écran que sur une page imprimée. Quand on lit de grandes zones de texte noir sur fond blanc, c'est un peu comme quand on se promène sous un grand soleil sans lunettes noires. On finit peut-être par se protéger les yeux en mettant sa main en visière, mais par défaut on a plutôt tendance à plisser des yeux et à se sentir mal à l'aise sans vraiment savoir pourquoi.

Réduire le contraste du texte des pages web permet une lecture plus confortable et moins stressante. Cela dit, si vous diminuez trop le contraste, vous commencez à rendre les choses difficiles pour les gens ayant une faible vision.

Dans un article comme celui-ci (NdT: la page originale de l'auteur) où il y a beaucoup de texte à lire et où le lecteur est amené à rester quelque temps devant son écran, il est important d'offrir un environnement aussi confortable que possible. J'ai donc utilisé une teinte de fond légère et des couleurs douces.


Pompage.net - CSS : on reprend tout à zéro ! (épisode 5)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 5)

Par Joe Gillespie

Cinquième étape : des listes à gogo

Une autre technique très courante pour mettre en forme des documents consiste à utiliser des « listes ». Elles ressemblent à des paragraphes, avec de petites choses en plus.

HTML peut nous fournir des listes de base qui ont soit des puces (listes non numérotées) <ul>...</ul>, soit des chiffres (listes numérotées) <ol>...</ol> en tête de chaque élément de la liste <li>...</li>. Chaque catégorie présente quelques options que l'on peut indiquer dans le HTML : li type="square" donne des puces carrées, li type="i" donne des chiffres romains en bas de casse.

Liste non numérotée par défaut :

  • Élément de liste non numérotée
  • Élément de liste non numérotée
  • Élément de liste non numérotée

Liste non numérotée avec puces carrées :

  • Élément de liste non numérotée
  • Élément de liste non numérotée
  • Élément de liste non numérotée

Liste numérotée par défaut :

  1. Élément de liste numérotée 1
  2. Élément de liste numérotée 2
  3. Élément de liste numérotée 3

Liste ordonnée avec chiffres romains :

  1. Élément de liste numérotée 1
  2. Élément de liste numérotée 2
  3. Élément de liste numérotée 3

Les CSS vous offrent davantage de choix et de contrôle : il suffit d'ajouter une définition pour ol ou ul à vos styles.

ol {list-style-type: lower-roman; margin: 1em 0 1em 40px }

Cela revient au même que si vous l'ajoutiez à chaque élément de liste en HTML, et vous avez tout contrôle sur les marges qui entourent l'ensemble de la liste. Les quatre valeurs 1em 0 1em 40px correspondent à haut, droite, bas et gauche, et peuvent être exprimées en ems, en pourcentages ou en pixels.

Si vous souhaitez mieux contrôler individuellement les éléments de liste, vous pouvez également leur attribuer des marges, pour avoir davantage d'espacement entre les lignes : par exemple...

ol li { margin: .5em 0 .5em 0 }

...ajoute un demi-em d'espacement au dessus et en-dessous de chaque élément de liste pour une liste numérotée. Pour une liste non numérotée, il faudrait le changer en ul li.

Mieux encore, vous pouvez utiliser vos propres graphiques comme puces.

ul { list-style-image: url(images/smiley.gif) }
ul li { margin: 1em 0 1em 0}
  • Ça, c'est génial
  • Ça aussi, vous aimerez
  • Et ça aussi bien sûr!

Et le top, une image de puce différente pour chaque élément de liste...

<li style="list-style-image:url(images/icone1.gif);
margin: 1em 0 1em 0">Des hommes</li>
<li style="list-style-image:url(images/icone2.gif);
margin: 1em 0 1em 0">Des images</li>
<li style="list-style-image:url(images/icone3.gif);
margin: 1em 0 1em 0">Des idées</li>
<li style="list-style-image:url(images/icone4.gif);
margin: 1em 0 1em 0">Des écrits</li>
  • Des hommes
  • Des images
  • Des idées
  • Des écrits

Les styles définis dans la partie « head » concernent l'ensemble de la page, ce que nous ne souhaitons pas dans le cas présent. Pour appliquer des styles séparément à des éléments de liste, il faut le faire « sur place », ou bien encore « inline ». Les définitions sont insérées entre les balises HTML <li> et </li>, dans la partie « body » de la page. Notez cependant qu'IE6 (Windows) place les icônes très près du texte. J'ai ajouté un peu d'espace supplémentaire au début de chaque ligne pour compenser, comme ceci :

&nbsp; Des hommes.


Pompage.net - CSS : on reprend tout à zéro ! (épisode 6)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 6)

Par Joe Gillespie

Sixième étape : établir des liens

L'important, dans le mot « HTML », c'est la partie « HT », c'est-à-dire Hyper Texte. Sur une page, des liens qu'on ajoute à des mots, des phrases ou des images, peuvent être cliqués pour vous transporter à un autre endroit. Ces autres endroits s'appellent des « ancres ». Imaginez des bateaux immobiles sur la grande mer du Web, avec une chaîne constituée de liens qui descend jusqu'à une ancre posée au fond de la mer. Les bateaux sont ancrés à des emplacements bien précis, ce qui les rend plus faciles à repérer que s'ils dérivaient sur la mer.

Chaque page contient au moins une ancre. Celle par défaut est tout en haut de la page, mais vous pouvez ajouter d'autres ancres à n'importe quel point d'une page auquel vous souhaitez pouvoir accéder d'un simple clic.

<a href="http://www.wpdfd.com/index.htm">
Ceci est un lien vers le haut de ma page d'accueil
</a>

Vous voyez là une paire de balises <a>...</a>, avec en plus une partie href="..." dans la première balise. Il s'agit de l'adresse hypertexte de référence où vous souhaitez vous rendre.

Si vous placez une ancre à un emplacement bien précis dans une page (en fait, il faudrait la placer juste au-dessus de l'endroit où on veut atterrir), cela donne :

<a name="mon_ancre"></a>

Il s'agit donc d'une paire de balises <a></a> avec, dans notre exemple, name="mon_ancre" placé dans la balise ouvrante. Il n'y a rien entre les deux balises.

Pour accéder à cet emplacement, il faut ajouter un petit bout de code à l'extrémité du lien :

<a href="http://www.wpdfd.com/index.htm#mon_ancre">
Ceci est un lien vers une ancre de ma page d'accueil</a>

Comme vous le savez, les liens sur une page sont indiqués en les rendant visuellement différents du texte environnant. Par défaut, on souligne le texte du lien, et on le colorie en bleu. Quand vous cliquez sur un lien, il réagit visuellement en passant à la couleur rouge. Quand vous revenez ensuite à ce lien, il est passé à une autre couleur encore, le violet, pour montrer qu'il a déjà été visité.
Quiconque a déjà utilisé une page Web comprend le principe de ces conventions très rapidement.

La présentation par défaut des liens hypertextes en HTML se compose de trois états distincts.

Remarquez que le curseur change, lui aussi. Le pointeur qui était par défaut une flèche se transforme en main qui montre de l'index lorsque le curseur survole un lien.

Bien sûr, en tant que « designers », l'aspect par défaut des liens ne nous satisfait pas. Le texte souligné, cela peut être pratique mais aussi parfois très laid. Ce qu'il faut en priorité, c'est qu'un lien soit d'un aspect suffisamment différent de son environnement pour que l'on voie qu'il y a là quelque chose de particulier. Le contexte est également un facteur important. Tel ou tel texte constitue de toute évidence un « menu » de choix, qu'il soit souligné ou non. Sa mise en valeur, sa position dans la page, le fait que les mots vous invitent à vous rendre à d'autres endroits sont autant d'indices quant à sa fonction.

De la même façon, quand un mot ou un groupe de mots au sein d'un bloc de texte a un aspect différent, c'est sans doute pour une bonne raison. Cette raison pourrait être que l'on veut insister sur l'importance de cette partie, mais là encore, c'est le contexte qui donne l'indice, et aussi le fait que d'autres mots ou groupes de mots similaires présentent partout le même aspect. Tout cela ne fonctionnerait pas si chaque lien était d'une couleur différente.

Les CSS nous permettent de jouer un peu avec l'aspect des liens. Non, les liens ne sont pas obligatoirement soulignés et bleus. Tout ce qu'il y a à faire, c'est d'indiquer une définition pour « a » (les ancres).

a:link { color: #696; text-decoration: none }

Comme cette page (la page originale de J.Gillespie, NdT) présente un style de couleurs qui sort un peu du blanc et noir, j'ai changé les couleurs des liens en autre chose que le bleu/violet par défaut. De plus, text-decoration:none nous débarrasse du soulignage.

Pour qu'un lien déjà visité soit d'une couleur différente, tapez ceci :

a:visited { color: #699; text-decoration: none }

En CSS, il existe aussi un état supplémentaire appelé « hover ». Il permet de changer la couleur du texte au moment où le pointeur de la souris le survole, ce qui donne très utilement un indice supplémentaire qu'il s'agit d'un lien hypertexte.

a:hover { color: #c93; text-decoration: underline }

Vous voyez ainsi apparaître le soulignement traditionnel si vous le souhaitez, mais seulement de manière temporaire, lorsque le pointeur survole le texte.

L'état « actif » d'un lien, c'est ce que l'on voit à l'instant où on clique sur un lien. Il change généralement de couleur, et certains navigateurs font aussi apparaître une boîte autour du texte.

Les différents états des liens

Pour définir des liens qui s'appliquent à toute la page, il faut placer quelque chose comme ceci dans les définitions de style dans la partie « head » de la page :

a:link
  {color: #696;
  text-decoration: none;
  background-color: transparent }
a:visited
  { color: #699;
  text-decoration: none;
  background-color: transparent }
a:hover
  { color: #c93;
  text-decoration: underline;
  background-color: transparent }
a:active
  { color: #900;
  text-decoration: underline;
  background-color: transparent }

L'ordre des définitions de style est important ici. D'habitude, l'ordre n'a aucune importance en définitions CSS, mais ici c'est très important de placer les définitions a:hover et a:active en dernier, sinon elles risquent de ne pas fonctionner.

Voici maintenant un autre état, pas officialisé en CSS.

C'est un lien mort. Il ne fait rien de particulier. Si vous avez un lien sur une page qui ramène à cette même page, ma foi, ça ne rime pas à grand-chose de pouvoir y cliquer pour revenir au point de départ. Ce serait comme un panneau indicateur retourné sur lui-même et indiquant sa propre direction.

Il y a deux façons de gérer cela. Vous pouvez transformer le lien en titre, en le mettant davantage en valeur que le reste, ou bien vous pouvez le rendre pratiquement invisible, montrant ainsi que ce n'est pas un choix possible. On appelle cela le « grisage », et vous en reconnaîtrez le principe pour l'avoir vu en usage sur d'autres programmes de votre ordinateur.

Mais, direz-vous, pourquoi le placer là si on ne souhaite pas que les gens le choisissent ?

Eh bien, l'un des principes les plus importants dans le design d'une interface est que l'on essaie de garder pour tous les éléments la plus grande cohérence possible. Si on retire un élément d'un menu, par exemple, certains autres vont changer de place. Ce sera moins gênant pour l'utilisateur si l'interface reste clouée en place.

Enfin, l'autre élément dont nous disposons ici est la couleur de fond (background-color) derrière le texte. Les designers changent parfois la couleur de fond pour donner un effet proche du surlignage pour les états hover ou active.

Il ya encore beaucoup d'autres choses à faire avec les liens CSS, nous n'avons fait qu'effleurer la question, mais cela devrait suffire à vous permettre de démarrer. Cette page d'exemple met en application les principes que vous venez d'apprendre.


Pompage.net - CSS : on reprend tout à zéro ! (épisode 7)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 7)

Par Joe Gillespie

Septième étape : les boîtes CSS

Nous avons déjà vu que le texte dans une page Web peut être découpé en titres ou en paragraphes, et que le langage HTML prend en charge ces opérations. Nous avons également vu comment les styles par défaut peuvent être modifiés à votre convenance, en leur attribuant de nouvelles définitions de style qui remplacent celles d'origine. Maintenant, je vais me pencher sur la façon de créer vos propres définitions de style pour étendre les possibilités du HTML et faire des mises en page plus intéressantes.

La partie « body » d'une page contient tout ce qui est visible ; cependant, comme je l'ai montré à l'étape 3, il est possible de découper cette partie en divisions plus petites et qui ont leurs propres styles. Ces divisions peuvent ne contenir qu'un simple caractère, ou au contraire inclure de grands pans rectangulaires de la page. Tout ce que nous avons à faire, c'est d'entourer la zone que nous voulons styler d'une paire de balises <div>...</div>. Chacune de ces divisions est comme une mini-page, et on les appelle souvent « boîtes CSS ». Les boîtes CSS sont les matériaux de base que l'on utilise pour construire des mises en page pour le Web, et je vais m'attarder sur la façon dont elles fonctionnent parce que c'est très important.

Les boîtes CSS peuvent avoir une hauteur et une largeur, une couleur de fond ou même une image de fond que l'on peut faire répéter pour créer un effet graphique. Par défaut, une boîte CSS s'étend de la marge gauche à la marge droite du corps de la page. Si vous n'avez pas indiqué de marge pour la partie « body », elle prendra donc toute la largeur de la fenêtre du navigateur. Si vous n'indiquez pas de hauteur pour une boîte CSS, elle n'en aura pas. Si vous y placez du texte, elle s'étendra verticalement pour contenir ce texte (ou cette image).

Pour éloigner du texte du bord d'une boîte, on peut ajouter du remplissage (« padding ») comme ceci :

les 4 paddings

Mieux vaut faire très attention avec le remplissage, parce que son interprétation dans Internet Explorer est très différente de celle de tous les autres navigateurs. Contrairement à notre illustration, IE place le remplissage à l'intérieur de la boîte, de telle sorte que sa hauteur et sa largeur ne changent pas. Tous les autres navigateurs placent le remplissage en-dehors de la boîte, ajoutant ainsi à sa largeur et à sa hauteur. Donc la taille de votre boîte peut varier selon le navigateur avec lequel vous voyez la page, ce qui peut avoir des conséquences désastreuses si vous êtes tenus à des mesures précises au pixel près.

Après le remplissage, vous pouvez placer une bordure (« border ») :

Les bordures existent dans plusieurs styles différents, et vous pouvez traiter chacun des quatre côtés séparément pour ce qui concerne l'épaisseur, le style et la couleur. Leur aspect varie un peu selon les navigateurs, mais voici à quoi elles ressemblent dans Mozilla :

styles de bordures

L'épaisseur de la bordure augmente d'autant la taille d'une boîte.

Et pour séparer les boîtes les unes des autres, vous pouvez leur donner des marges (« margins »).

Il est fréquent de confondre les marges et le remplissage, surtout que ce qu'on appelle couramment la « marge » d'une page dans un livre ou une page Web est en fait du « remplissage » dans la mesure où c'est un espace qui ne peut sortir de la page, il est forcément à l'intérieur. Mais souvenez-vous que c'est un cas particulier. Pour le « body » d'une page Web, la marge va des côtés vers l'intérieur, tandis que toutes les autres marges CSS vont vers l'extérieur.

Le positionnement absolu

En plus d'avoir une hauteur et une largeur, les boîtes CSS peuvent être placées à n'importe quel emplacement sur la page en indiquant position: absolute;
Le principe du positionnement absolu est facile à comprendre, il correspond à la façon de voir les choses dans la vie de tous les jours. Par exemple, votre maison peut être située à 50 mètres de la Rue du Nord et à 100 mètres de la Rue de l'Est.

La façon la plus courante de donner une position à une boîte est tout simplement d'indiquer quelque chose comme top:50px; left:100px, mais on n'est pas obligé d'utiliser top et left, cela peut aussi bien être top et right, bottom et left ou bottom et right.

Voici quelques boîtes CSS avec différents styles, chacune affichant sa définition de style. Les possibilités de combinaisons sont infinies.

Quand les boîtes sont placées à des coordonnées absolues, avec des largeurs et hauteurs bien précisées, cela ressemble beaucoup à un travail de collage de coupures de presse ou de photos dans un cahier de souvenirs. Le problème, c'est que les cahiers conservent toujours la même taille, et pas les pages Web.

Le positionnement relatif

Si vous cherchez à décrire la position de la maison du voisin d'à-côté, vous pouvez dire qu'elle est à 70m de la rue du Nord et à 100m de la rue de l'Est, mais vous pouvez aussi dire qu'elle est à 5m, juste après la vôtre. Le positionnement relatif part du principe que les boîtes CSS sont placées l'une après l'autre. La première boîte est celle du dessus, la suivante est en-dessous, et la suivante encore en-dessous. De fait, elles flottent de haut en bas, à partir du haut de la page. Ce n'est peut-être pas très réaliste, mais imaginez une piscine couverte, avec à l'intérieur toute une pile de matelas gonflables. Le premier flotterait jusqu'à la surface, le suivant flotterait vers le haut et se retrouverait coincé sous celui du dessus, et ainsi de suite.

Pour obtenir que les boîtes CSS soient côte-à-côte au lieu de l'une au-dessous de l'autre, il faut leur dire de flotter à gauche ou à droite : float:left; ou float:right;. Tout comme nos matelas gonflables si la piscine est suffisamment large, elles se tiendront côte-à-côte, tant qu'il y aura de l'espace disponible. Puis elles glisseront à l'étage inférieur. Mieux vaut éviter cette situation, en vous assurant que les largeurs cumulées de toute une rangée de boîtes n'excèdent pas la largeur de la page. On peut le faire en précisant la largeur en pixels, mais en maintenant le total en-dessous de la largeur minimum d'un navigateur. On peut aussi utiliser les pourcentages, à condition de vérifier que la somme des pourcentages arrive bien à 100, ou mieux, un peu moins. Dans un tel contexte de positionnement relatif, évitez de mélanger pixels et pourcentages, sans quoi les résultats sont imprévisibles.

Ces exemples de boîtes flottantes montrent le comportement de boîtes positionnées de manière relative, en colonnes simples ou multiples.


Pompage.net - CSS : on reprend tout à zéro ! (épisode 8)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 8)

Par Joe Gillespie

Huitième étape : des div sur mesure

Qu'est-ce qu'une id ?

Lorsque vous créez des boîtes CSS avec des définitions personnalisées, il n'existe pas d'éléments HTML pouvant y faire appel. Il vous faut les inventer.

Comme il y aura sans doute plusieurs, voire beaucoup de boîtes CSS (des « div ») dans une page donnée, il faut leur trouver des noms. Pour ce faire, on leur attribue des « identités », qu'on appelle id en abrégé. Une id fournit à une boîte CSS une identité qui lui est propre, qui vous permet à vous de bien la repérer et au navigateur de l'afficher correctement.

Prenons un exemple simple : vous voulez diviser une page en trois parties horizontales. Un « en-tête » en haut présente un logo et les liens de navigation. La partie du milieu contient le texte et les images. Tout en bas, vous pouvez aussi avoir un « pied de page » donnant des informations de copyright, et peut-être une répétition de la navigation du haut de page.

Dans cet exemple, plus précisément, vous trouverez cinq boîtes horizontales, les deux supplémentaires servant pour le logo et la barre de navigation, entre l'en-tête et la zone de texte.

Remarquez que la colonne de droite est plus étroite que celle de gauche, ce qui permet de compenser visuellement l'espace supplémentaire dû à l'aspect crénelé de la partie droite du texte, sans quoi celui-ci paraîtrait décentré.

Dans les définitions de style, nous collons un signe dièse (#) devant le nom que nous voulons donner à la boîte, ce qui en fait une « identité ».

#en-tete {...}
#navigation {...}
#logo {...}
#milieu {...}
#pied-de-page {...}

Puis nous devons lier les définitions aux boîtes CSS elles-mêmes, tout simplement en renvoyant à leurs identités (id) comme ceci :

<div id="en-tete">...</div>
<div id="navigation">...</div>
<div id="logo">...</div>
<div id="milieu">...</div>
<div id="pied-de-page">...</div>

Si l'on a déjà indiqué, par exemple, une police d'écriture dans la déclaration de styles pour la partie body, alors nos boîtes vont « hériter » de ces styles. Mais toute définition de style ajoutée aux définitions des boîtes prendra le pas sur la définition du body, qui est plus large. C'est le principe même de la « cascade ».

Qu'est-ce qu'une class ?

Vous aurez parfois besoin d'utiliser la même boîte plusieurs fois sur une même page. Imaginons que vous voulez séparer la partie du milieu en deux boîtes distinctes, ou plus. Dans ce cas, il vous faut une boîte « réutilisable » et non pas unique. Une boîte réutilisable s'appelle une class. Tout comme on a des « classes » de fleurs ou d'insectes, une class désigne une même boîte mais avec un contenu différent. Pour montrer que nous voulons une class réutilisable au lieu d'une id unique, nous utilisons le point (.) au lieu du signe dièse.

.milieu {} peut désormais être utilisé aussi souvent qu'on le veut, et sur la div elle-même, on précise :

<div class="milieu">...</div>
<div class="milieu">...</div>
<div class="milieu">...</div>

Qu'est-ce qu'un span ?

Les class, contrairement aux id, peuvent s'appliquer au niveau du texte. Si on veut simplement mettre quelques mots en rouge, on peut créer une class spéciale, appelons-la .texterouge :

.texterouge { #cOO }

<span class="texterouge">Ce texte est rouge!</span>

Au lieu d'entourer le texte que l'on veut en rouge d'un <div>...</div>, on utilise <span>...</span>. On dit que ce style est inline, c'est-à-dire en ligne, parce qu'il s'applique à un morceau de texte lui-même déjà contenu dans un <div>...</div>.

Utilisez <span>...</span> dès que vous voulez marquer sur du texte une variation par rapport aux indications générales. Il peut s'agir de couleur, de police d'écriture, de taille, de poids, etc.

Donc, en CSS, il y a des éléments dits block qui sont constitués de boîtes rectangulaires, dotées soit d'id uniques, soit de class réutilisables. Et nous avons aussi des éléments dits inline, qui traitent le texte au caractère près.

On commence à aborder les choses sérieuses !


Pompage.net - CSS : on reprend tout à zéro ! (épisode 9)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (épisode 9)

Par Joe Gillespie

Neuvième étape : on met tout ensemble

Dès qu'on aborde des pages Web un peu élaborées, on utilise un mélange d'id et de class, voire de positionnement absolu et relatif. Retournons à notre page toute simple de la huitième étape, celle en cinq parties : peut-être pourrait-on avoir plusieurs colonnes dans la partie du milieu. Cela revient à utiliser la propriété de flottement (float), et je vais choisir float:left pour m'en tenir au plus simple.

En général, sur beaucoup de pages Web, la colonne de gauche contient les menus, ce qui veut dire qu'elle peut être assez étroite.

.col-gauche {}

La colonne du mileu contiendra le texte principal.

.col-milieu {}

Et tout à droite, nous allons placer une autre colonne étroite, pour des liens de référence ou de la publicité.

.col-droite {}

La taille de chaque colonne est indiquée en pourcentage, pour qu'elle soit fluide et s'adapte à la largeur de la page.

Vous noterez que j'utilise des classes (class) pour ces colonnes, parce que je pourrais souhaiter les réutiliser plus bas sur ma page.

Dans cet exemple, on remplace la simple partie .milieu par trois colonnes flottant à gauche.

<div class="col-gauche">...</div>
<div class="col-milieu">...</div>
<div class="col-droite">...</div>
Présentation avec trois colonnes

Voilà qui ouvre des perspectives de mise en page beaucoup plus intéressantes.

Ne laissez pas de div complètement vides, même si elles ne doivent contenir que du « blanc ». Placez-y un espace insécable &nbsp;.


Pompage.net - CSS : on reprend tout à zéro ! (10ème épisode)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (10ème épisode)

Par Joe Gillespie

Doctypes et validation

Nous voilà arrivés à la dixième leçon de « On reprend tout à zéro », et il faut que je vous avoue quelque chose. Tout ce que je vous ai montré jusqu'ici, le balisage, les pages d'exemples, eh bien tout ceci est faux ! Bon, en fait, ça va sans doute fonctionner correctement (sauf si vous utilisez un navigateur trop ancien), mais si vous testez vos pages avec un vérificateur de syntaxe, ou bien si vous les soumettez à un quelconque programme de validation, elles ne passeront pas l'épreuve.

Vous vous demandez peut-être ce qu'est un programme de validation.

Vous connaissez sûrement les correcteurs d'orthographe. Votre programme de traitement de texte en contient vraisemblablement un. Ils servent à comparer les mots que vous avez tapés avec ceux de leur dictionnaire intégré, et vous avertissent s'ils ne trouvent pas de concordance. Peut-être le mot n'est-il pas dans le dictionnaire, mais peut-être aussi ne l'avez-vous pas tapé correctement. Dans les traitements de texte les plus élaborés, votre texte peut également subir une vérification grammaticale, et si vous tapez une phrase qui ne contient pas de verbe ou qui contient trop d'occurences du mot « et », ils vous harcèleront sans arrêt.

Pour qu'un correcteur d'orthographe ou de grammaire puisse faire son travail, il doit savoir quelle langue vous utilisez. Un correcteur d'anglais britannique est déjà différent d'un correcteur d'anglais américain, alors que dire de ceux qui utilisent une toute autre langue que l'anglais ?

De même qu'on corrige son anglais, son français, ou toute autre langue, on peut (et on doit !) corriger également son HTML et son CSS. Si votre anglais contient une erreur, les gens penseront qu'il s'agit d'une coquille, mais comprendront ce que vous voulez dire, il n'y aura pas grand-mal. En revanche, une petite erreur en HTML ou en CSS, c'est une toute autre histoire. Quelque chose d'aussi insignifiant en apparence qu'une virgule ou un guillemet mal placés peut faire toute la différence entre une page qui fonctionne ou non : tout dépend du type d'erreur et du navigateur qui essaie de comprendre ce qui se passe. Il est très recommandé de « vérifier l'orthographe » de votre HTML comme de votre CSS avec un « correcteur de syntaxe » ou un « validateur ».

L'un des grands avantages dont vous bénéficiez si vous utilisez un éditeur HTML de bonne qualité, c'est qu'il contient un correcteur de syntaxe intégré. Vous ne trouverez pas cela avec de simples éditeurs de texte polyvalents. Si vous avez un éditeur HTML comme HomeSite ou BBEdit, ou bien un éditeur WYSIWYG tel que Dreamweaver ou GoLive, vous pourrez vérifier votre balisage et si possible trouver des suggestions pour en corriger les erreurs. Si vous ne possédez pas de tels programmes, vous pouvez utiliser les validateurs en ligne offerts par le W3C : le validateur HTML et le validateur CSS du W3C, où vous pouvez tout simplement envoyer vos fichiers et recevoir un rapport immédiat indiquant la liste exhaustive de vos erreurs, sauf si vous n'en avez commis aucune !

Bien entendu, le programme de correction doit d'abord savoir quel « langue » vous utilisez pour votre balisage : il y a différentes « gammes » de HTML. Jusqu'ici, tous les exemples que j'ai montrés sont écrits en HTML 4.01 : il s'agit de la version actuelle, et c'est la plus répandue. Mais il y a différentes versions de HTML 4.01 : « Strict », « Transitional » et « FrameSet ».

Le Strict est constitué d'un ensemble de règles qui définissent très strictement ce que l'on peut faire ou ne pas faire en HTML.

Le Transitional est un peu plus compréhensif, et vous permet d'utiliser un HTML un peu plus ancien ainsi que quelques particularités propres à certains navigateurs.

Le Frame Set n'est plus beaucoup utilisé de nos jours. Nous n'avons d'ailleurs pas évoqué les « frames » (cadres) dans cette série de cours, dans la mesure où ils sont largement passé de mode depuis l'arrivée des CSS.

La plupart des gens se contentent très bien du « Transitional » parce qu'il leur laisse un peu de souplesse, mais il y en a d'autres qui aiment que tout soit bien net et règlementaire et qui préfèrent utiliser le « Strict ».

Pour que le navigateur sache quel langage vous utilisez pour votre balisage, et dans quelle version, placez une déclaration de Doctype tout en haut de la page, au-dessus de la première balise <html>. En voici un exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Je ne vais pas analyser tout de suite tout ce que cela signifie ; contentez-vous de savoir qu'avec ce charabia au sommet de votre page, le vérificateur de syntaxe ou le validateur sera capable de faire correctement son travail. Il sait désormais quels sont les standards que vous voulez appliquer à votre page, et va pouvoir la juger en fonction de ceux-ci.

Dès lors que j'ai placé un Doctype, je peux passer mes pages au vérificateur de syntaxe de mon éditeur HTML et m'assurer qu'elles sont impeccables. Maintenant qu'on a réglé ce petit détail annexe, revenons au style de notre page !


Pompage.net - CSS : on reprend tout à zéro ! (11ème épisode)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (11ème épisode)

Par Joe Gillespie

Jusqu'ici, tous les styles que j'ai utilisés ont été intégrés à la section <head> des pages. De cette façon, il est facile de regarder le code-source de la page et de voir ce qui s'y passe. Tout est bien mis ensemble au même endroit.

Toutefois, il est très rare que des pages individuelles soient fabriquées à l'unité : il est beaucoup plus probable qu'on trouvera, dans un site Web donné, tout un ensemble de pages dont l'aspect est similaire.

Au lieu de reproduire une déclaration de styles sur chaque page, il vaut bien mieux n'avoir qu'une seule feuille de style et faire en sorte que chaque page y renvoie individuellement. Du coup, si vous voulez changer la couleur de fond de toutes les pages de votre site, ou bien modifier la couleur ou la taille des caractères, il n'y aura qu'à changer la feuille de style principale. En fait, on peut changer totalement l'aspect de tout un site en appliquant juste quelques modifications à un seul et unique fichier.

Allez donc jeter un oeil sur http://www.csszengarden.com/ pour voir ce principe en action. Différents designers ont fourni leurs propres feuilles de style pour habiller le contenu d'une même page, démontrant ainsi de manière admirable comment un seul et même squelette peut recevoir différentes « peaux » qui changent sa personnalité du tout au tout. Pour utiliser une feuille de style externe, tout ce que nous avons à faire consiste à intégrer ce type de lien dans notre page :

<link rel="stylesheet"
href="styles_de_base.css"
type="text/css"
media="screen">

Cela indique au navigateur qu'il doit chercher les indications de style dans un fichier nommé « styles_de_base.css ». On précise aussi qu'il s'agit d'un simple fichier texte ( d'où type="text/css" ) et que les styles sont prévus pour un affichage sur écran ( media="screen" )

Les feuilles de style ne sont pas limitées à l'affichage sur des écrans d'ordinateur : vous pouvez produire des feuilles de style pour d'autres supports comme l'impression, la projection ou même le braille. Quand on y réfléchit bien, une feuille de papier d'imprimante n'a pas du tout la même taille ni la même forme qu'un écran d'ordinateur, et personne n'aura envie de gâcher sa très chère encre à imprimer de vastes zones colorées alors que tout ce qu'on veut, c'est conserver comme référence un texte noir sur blanc. Une feuille de style pour l'impression doit donc réduire la largeur de la page pour qu'elle corresponde à une feuille de papier, et contrairement à la feuille de style « écran », les tailles de caractères doivent être indiquées en points ( pt ). Les couleurs doivent être simplifiées, voire complètement abandonnées. Enfin, tout ce qui restera à faire sera d'ajouter un second lien dans la partie <head> juste après celui pour l'écran ( screen ).

<link rel="stylesheet"
href="styles_pour_impression.css"
type="text/css"
media="print">

Si vous vous contentez amplement de la même feuille de style pour l'écran comme pour l'impression, alors vous pouvez utiliser ce lien :

<link rel="stylesheet"
href="styles.css"
type="text/css"
media="all">

Bien que la plupart de mes feuilles de style finissent toujours par se retrouver enregistrées à part, je démarre généralement avec une feuille de style interne pour les premières étapes du design. Une fois satisfait de l'aspect général, je coupe et je colle les styles dans un nouveau fichier, et je les remplace par un lien.


Pompage.net - CSS : on reprend tout à zéro ! (12ème épisode)

  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (12ème épisode)

Par Joe Gillespie

Je sais bien qu'on utilise des tableaux pour réaliser des mises en page depuis la préhistoire du Web, mais je pense avoir démontré dans ce feuilleton que les mises en page par CSS offrent davantage de possibilités et de souplesse. Les tableaux sont faits pour présenter des données tabulaires, comme on le ferait avec les feuilles de calcul qu'on utilise pour organiser des chiffres ou des mots en rangs et en colonnes.

Autrefois, avec les anciens navigateurs, il était possible de changer l'aspect des tableaux et de leurs cellules en utilisant les différentes propriétés de tableaux : couleurs de fond, images de fond, etc. Beaucoup de ces caractéristiques sont désormais dépassées et ne sont plus valides ; même s'il est encore possible qu'elles fonctionnent, on ne peut plus compter sur elles. D'ailleurs, on n'a jamais vraiment pu compter dessus. Quand on cherchait à placer une image de fond pour un tableau sous Netscape 4 ou une version antérieure, celle-ci apparaissait individuellement dans chacune des cellules, un peu comme quand on regarde à travers un kaléidoscope, ce qui rendait le tout aussi pénible à faire qu'inutile.

Avant, on pouvait sans problème indiquer une hauteur de tableau en pixels, ou encore en pourcentage de la hauteur de la fenêtre, mais ce n'est plus possible. Les tableaux fixent leur propre hauteur en fonction de leur contenu.

La gestion du style des tableaux avec les CSS peut se révéler un peu délicate, et il est difficile de tout prévoir. On peut construire sa propre structure de tableau en CSS à l'aide de display:table; et de display:table-cell;, en considérant que chaque cellule constitue une boîte (div) séparée, mais dans la plupart des cas, il est plus simple de se contenter de fournir les définitions de style pour les éléments HTML du tableau : table, tr, td, th, etc.

tr représente une rangée de tableau, c'est-à-dire une rangée horizontale de cellules. td est une division de rangée de tableau. On peut le voir comme une colonne, mais il ne se comporte pas comme une colonne, et on ne peut pas indiquer une couleur de fond ni un style d'écriture propre à une colonne.

Les tableaux héritent de certains styles des divs auxquelles ils appartiennent, mais pas de tous. Si la partie body de votre page a pour caractéristiques font-family: verdana, arial, sans-serif style et color:#009, le tableau héritera de celles-ci, mais pas de la taille du texte ni de son alignement. Il y a également une hiérarchie. Toute règle s'appliquant à un td prendra le pas sur celle du tr, qui elle-même passera avant toute règle générale de style imposée pour l'élément table, c'est-à-dire le tableau. Vous pouvez tourner ceci à votre avantage. Si vous choisissez le noir comme couleur de fond de tableau, et le blanc comme couleur de fond du td, et si vous donnez au tableau un écartement des cellules de 2 pixels (cellspacing="2"), vous obtiendrez un tableau avec des cellules blanches séparées par une bordure noire de 2 pixels.

1 | 2 | 3 | 4
1 | 2 | 3 | 4
1 | 2 | 3 | 4
Le tableau 1 ci-dessus, plus subtil, présente une couleur de fond de tableau transparente, et une légère teinte de couleur de fond est appliquée aux td.

Bien entendu, vous avez également accès à tous les styles CSS pour les bordures, ce qui signifie que vous n'êtes pas prisonnier des horribles bordures de tableau par défaut en HTML. Vous pouvez également jouer avec les couleurs ou les aspects des bordures pour n'afficher que des lignes verticales ou des horizontales, qui seront pleines, pointillées, hachurées ou autres.

1 | 2 | 3 | 4
1 | 2 | 3 | 4
1 | 2 | 3 | 4
Tableau 2. Selon les données, on veut parfois insister sur les rangées horizontales, ou bien sur les colonnes verticales comme ci-dessus.

Titre 1 | Titre 2 | Titre 3 | Titre 4
1 | 2 | 3 | 4
1 | 2 | 3 | 4
Tableau 3. Ici un effet de relief en 3D est créé en modifiant les couleurs de bordures. L'en-tête de tableau th reçoit une couleur de fond plus sombre.

Une autre idée intéressante consiste à attribuer aux tr des images de fond en dégradé de couleur.

Si vous créez une petite image suffisamment haute pour remplir la cellule tout en restant très étroite, disons 8 pixels de large, il sera possible de la répéter horizontalement avec background-repeat: repeat-x, ce qui est plus fin et élégant que des bordures.

Cette petite image (227 octets) peut être répétée horizontalement...

Rangée 1 | 2 | 3 | 4
Rangée 1 | 2 | 3 | 4
Rangée 1 | 2 | 3 | 4
Rangée 1 | 2 | 3 | 4
Tableau 4. J'ai utilisé un dégradé légèrement plus sombre pour les en-têtes de rangées, et j'ai ajouté une bordure gauche gris pâle pour séparer les colonnes.

Si vous voulez appliquer aux cellules individuelles un style différent de l'ensemble du tableau, vous pouvez le faire en utilisant des définitions de style « en ligne » adjointes aux balises <td> appropriées.

<td style="background-color: #f00">cellule 1</td>

1 | 2 | 3 | 4
 | 2 | 3 | 4
1 | 2 | 3
1 | 2 | 3 | 4
Tableau 5. Bon d'accord, je suis un peu trop fan de Mondrian, mais l'important c'est de voir qu'on peut appliquer à volonté des styles sur des cellules individuelles !

Cette approche, en revanche, a le désavantage de ne pas permettre l'utilisation d'une feuille de style externe. Tout est gravé dans le code même de la page ; mais on peut se l'accorder, de manière exceptionnelle. Une façon plus adroite de styler rangées et colonnes consiste à les placer au sein de leurs propres div et à les nommer ainsi :

#colonne1 td { ... }
#colonne2 td { ... }

Avec cette méthode, vous bénéficiez d'un certain contrôle sans pour autant devoir recourir à une construction de tableau par div individuelles (ce qui reste une excellente solution, si vous en avez le temps et la patience).

Je n'ai pas placé toutes les déclarations de style dans la page, il y en a trop, mais un coup d'oeil sur le code-source vous permettra de comprendre ce qui se passe.

De nombreuses possibilités vous sauteront à l'esprit quand vous commencerez à styler vos tableaux. Mais non, ce n'est pas obligatoirement barbant de faire des tableaux !

Le mois prochain, nous verrons comment styler des formulaires, ainsi que quelques autres petits détails.


Pompage.net - CSS : on reprend tout à zéro ! (13ème épisode)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (13ème épisode)

Par Joe Gillespie

Pour de nombreux designers, le style des formulaires dans les pages Web ne constitue pas une grande priorité. Les formulaires sont généralement laissés « tels quels », et pour de bonnes raisons d'ailleurs.

  1. Les conventions qui sont utilisées par défaut pour les formulaires fonctionnent assez bien en l'état.
  2. Si un formulaire n'a pas l'aspect attendu, les lecteurs pourraient ne pas s'y retrouver.
  3. Le style des formulaires peut devenir très différent d'un navigateur à l'autre, selon l'interprétation qu'ils en font.

Voyons tout cela de plus près.

« Les conventions qui sont utilisées par défaut pour les formulaires fonctionnent assez bien en l'état. »

Bon, peut-être. Pourtant on trouve encore un peu partout beaucoup de tableaux mal conçus, que ce soit sur papier ou sur le Web.

Moi en tous cas, je déteste remplir des formulaires, et je sais que je ne suis pas seul à réagir ainsi.

Mais les formulaires sont bien pratiques pour récolter de l'information, d'autant qu'ils la récoltent d'une manière qui en rend l'exploitation assez facile. Alors, quelle est l'erreur commise par les « designers » de formulaires ?

Le premier gros écueil apparaît lorsque le formulaire semble compliqué. L'utilisateur est intimidé et se place en position défensive.

Et puis, on nous pose des questions qui peuvent paraître soit inutiles, soit indiscrètes. Pourquoi voulez-vous absolument connaître ma date de naissance ?

L'aspect compliqué est une question de mise en forme. On peut donner à un formulaire une apparence simple en le présentant de manière propre et ordonnée. La première chose dont on doit s'assurer, c'est de bien contrôler les tailles de police pour ne pas les laisser démolir la mise en page.

La taille et la position des légendes ou des textes explicatifs doivent aussi être réfléchies. Le mieux est de les placer soit au-dessus ou en dessous des champs de saisie, soit sur la droite. Si vous tenez vraiment à mettre des textes sur la gauche, utilisez align: right; pour éviter de vous retrouver avec d'énormes trous qui déconnectent visuellement le texte de son champ, et augmentent la complexité visuelle de la mise en page. Essayez également de ne pas avoir trop de tailles différentes pour vos champs de saisie, et ne remplissez pas les espaces vides à tout prix. Si le champ du code postal est plus court que les autres champs d'adresse, ce n'est pas un problème : ne placez pas pour autant différentes tailles de champs sur une même ligne horizontale juste pour gagner de l'espace.

Sur une page Web, on n'a pas besoin de gagner de l'espace. Choisissez intelligemment les tailles de vos champs de saisie. Alignez-les verticalement. Gardez-les propres et dégagés.

Ci-dessus, un formulaire qui semble compliqué. Il y a deux axes verticaux, et le déplacement du regard est perturbé par la nécessité de sauter horizontalement et verticalement pour trouver le champ suivant.

Voici un design plus simple, avec un seul axe vertical en plein milieu, ce qui n'interrompt pas le déplacement du regard.

L'avantage par rapport à un formulaire papier, c'est qu'un formulaire Web masque tout ce qui n'est pas immédiatement visible dans la fenêtre du navigateur, évitant ainsi de noyer le visiteur sous la masse. Néanmoins, un formulaire très long sur une seule page exigera de nombreux défilements verticaux, ce qui peut être encore pire. Mieux vaut diviser les formulaires longs sur toute une série de pages, à condition toutefois de penser à permettre aux utilisateurs de revenir en arrière s'ils veulent modifier quelque chose.

« Si un formulaire n'a pas l'aspect attendu, les lecteurs pourraient ne pas s'y retrouver. »

Il est clair qu'on ne peut pas « s'éclater » dans le design de formulaires. Il faut bien que le lecteur comprenne la fonction d'un champ de saisie de texte, comme pour une fenêtre pop-up ou un bouton d'envoi. Ça ne signifie pas pour autant que nous sommes condamnés au texte noir sur fond blanc (encore que certains navigateurs n'acceptent rien d'autre !)

Ce serait une erreur d'assimiler un champ de saisie à du texte ordinaire, la fenêtre doit avoir son apparence propre, tout en indiquant sa fonction.

Les éléments que l'on peut styler sont input, textarea et select, mais attention : tout style attribué à l'élément input affectera non seulement le champ de saisie de texte, mais également les autres outils de saisie que sont les boutons radio, les cases à cocher, ainsi que les boutons « Envoyer » et « Effacer ».

On peut sans risque jouer sur les styles font-family et font-size des polices. La couleur du texte (text-color) peut varier si on le souhaite. Pour la couleur de fond (background-color), c'est plus discutable. Si elle est d'une teinte plus pâle que celle de la page, c'est acceptable, et cela peut rendre l'aspect du formulaire moins agressif.

Si on change le contour d'un champ de saisie de données (« input »), cela modifie également le contour du bouton d'envoi, qui du coup peut se mettre à ressembler à n'importe quelle zone de texte si on n'y prend garde. Pour éviter cela, il faut donc « envelopper » le champ de saisie dans une div qui lui sera propre, et se contenter d'appliquer des styles sur #saisie input comme ci-dessous :

#saisie { }

#saisie input
        {
        color: #633;
        font-size: 10px;
        background-color: #ebebd9;
        padding: 3px;
        border: double 3px orange
        }

NdT : les éléments input et textarea ne peuvent être traduits, car il s'agit de code HTML. Rappelons que input fait référence à de la saisie de données de formulaire (un nom, une date, un chiffre...), tandis que textarea permet de saisir des commentaires, des remarques ou autres textes longs.

Si maintenant vous voulez qu'un champ textarea ressemble à un champ input, vous pouvez faire ceci :

#saisie input, #saisie textarea
        {
        color: #633;
        font-size: 10px;
        background-color: #ebebd9;
        padding: 3px;
        border: double 3px orange
        }

Quant à l'élément select (il s'agit des listes déroulantes), son rendu varie d'un navigateur et d'une plateforme à l'autre. Tout ce que nous pouvons faire, c'est fixer une taille et une famille de police. De toute manière, vous ne pouvez généralement avoir aucune idée de l'aspect final, une fois qu'ils auront été cliqués.

« Le style des formulaires peut devenir très différent d'un navigateur à l'autre. »

La meilleure des preuves réside dans ces quelques copies d'écran.

Les mêmes styles interprétés sous Explorer (Windows), Mozilla, Safari (Mac) et Opera montrent quelle variété on peut trouver. Je reviendrai dans le prochain épisode sur les différences entre les interprétations des navigateurs.

L'important ici est que nous ne cherchons pas à enjoliver les formulaires. Nous essayons de les rendre plus faciles à utiliser et moins impressionnants grâce à une présentation visuelle réfléchie.

On peut encore faciliter davantage la vie de l'utilisateur avec des scripts de validation de formulaires qui sont bien utiles, mais c'est une tout autre histoire, dans laquelle je ne compte pas m'engager tout de suite.


Pompage.net - CSS : on reprend tout à zéro ! (14ème épisode)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (14ème épisode)

Par Joe Gillespie

Ah, les navigateurs. Que ferions-nous sans eux ? Et combien de fois ai-je entendu les gens regretter qu'il n'y en ait pas un et un seul ? Oui, mais lequel ?

Chaque navigateur possède sa propre feuille de style par défaut. C'est celle que vous utiliserez, à moins de fournir la vôtre. Et bien entendu, les feuilles de style intégrées sont toutes différentes. Elles sont issues de différentes sociétés, et fonctionnent différemment sur les diverses plate-formes informatiques.

Leurs ressemblances sont nombreuses, bien sûr, mais les différences ne sont pas négligeables pour autant. Si vous partez du principe que tous les autres navigateurs vont offrir un rendu « similaire » de votre page Web si amoureusement conçue, vous allez vite vous apercevoir que « similaire » ne signifie pas « identique », et que cela peut même signifier « franchement différent » dans certains cas - même si votre feuille de style CSS est valide.

Je ne peux pas me lancer ici dans une comparaison exhaustive de tous les navigateurs, d'autant qu'il en existe énormément qui sont déjà publiées ailleurs. Je soulignerai simplement les quelques points qui me posent le plus de problèmes. Généralement, cela revient à une opposition du style Internet Explorer - Reste Du Monde, mais pas toujours. Une liste de liens vers des navigateurs récents est toujours disponible sur la page d'infos de mon site WPDFD. Ils sont gratuits pour la plupart, ou peuvent être essayés gratuitement.

Internet Explorer de Microsoft est le navigateur le plus répandu de tous. Sous ses différentes versions, il représente quelque chose comme 85% de tous les navigateurs utilisés. Malheureusement, il n'obéit qu'à ses propres règles et ne se conforme pas aux mêmes normes que d'autres navigateurs. Il en respecte la plupart, mais dans le cas contraire, les problèmes sont inévitables.

Le modèle de boîtes CSS

Dans toutes les versions d'IE (NdT : à l'exception du mode strict d'IE6, dont le fonctionnement dépasse largement le périmètre de cet article), l'interprétation du remplissage ou « padding » est différente de celle des autres navigateurs. En conséquence, si vous indiquez une largeur de boîte CSS en pixels, et que celle-ci est dotée d'un padding droit ou gauche, la boîte aura une largeur différente entre IE et les autres navigateurs, ce qui peut détruire une mise en page quand elle est très précise.

Le modèle de boîtes CSS

IE part du principe que le padding est situé à l'intérieur de la boîte, réduisant d'autant la largeur du texte (ce qui d'ailleurs me semble tout à fait logique). Les standards du W3C disent, eux, que le padding doit être ajouté en dehors de la boîte, pour maintenir identique la largeur du texte. On peut débattre ad nauseam sur ce qui est le plus logique des deux, mais quoi qu'il en soit, vous allez être confrontés à cette différence fondamentale qui risque de vous jouer des tours si vous ne vérifiez pas vos pages.

Tout est relatif

Le positionnement « relatif » des boîtes CSS semble être un concept assez simple. Chaque boîte occupe une place que l'on définit relativement à celle qui la précède immédiatement. Mais attention ! Si vous sortez une boîte de son « flux naturel » en lui donnant une valeur par rapport au haut ou au bas de page (valeur top ou bottom), cette boîte est supposée se déplacer tout en laissant libre sa place initiale, comme le ferait une voiture quittant sa place de parking. Mais IE (version Mac) referme cet espace dès qu'il est libéré, remontant donc d'autant tout ce qui est situé au-dessous.

Déplacement de boîtes

On voit à gauche ce qui doit se produire quand on déplace une boîte CSS relative : l'espace libéré devient de fait une boîte invisible. À droite, on voit ce qu'IE (Mac) en fait : cela peut mettre à mal une présentation si on n'y prend garde.

Attention au format du balisage

Ça, c'est quelque chose qui m'agace vraiment, parce qu'il s'agit bel et bien d'un bogue, et non d'une mauvaise interprétation des standards. En principe, les navigateurs doivent ignorer complètement le format du balisage HTML. Peu importe si vous tapez tout votre code sur une seule longue ligne horizontale, ou bien si vous préférez avoir un interligne supplémentaire entre chaque ligne. Le bogue dans IE (Mac) est ainsi fait que si vous placez des boîtes en float sur une seule ligne, flottant toutes vers la gauche, mais qu'en même temps vous tapez le balisage correspondant sur plusieurs lignes de code distinctes, votre navigateur perd complètement les pédales. Il faut obligatoirement placer tout le balisage sur une seule ligne pour obtenir le résultat escompté. Franchement, ce ne serait pas un travail de Titan pour réparer ce bogue, mais le développement d'IE (Mac) est mort et enterré, et il existe aujourd'hui un tel choix de meilleurs navigateurs... mais les vieux Macs, c'est comme les vieilles habitudes, on ne s'en débarrasse pas comme ça !


Pompage.net - CSS : on reprend tout à zéro ! (15ème épisode)

Pompage - Web design puisé à la source.
  • Accueil
  • Tous les articles
  • Ressources
  • À propos du site
  • Contact

CSS : on reprend tout à zéro ! (15ème épisode)

Par Joe Gillespie

L'avenir

Les spécifications et les possibilités des Feuilles de Style en Cascade (Cascading Style Sheets) sont sans cesse actualisées, et les navigateurs également s'adaptent continuellement pour pouvoir faire écho à ce nouveau potentiel. C'est un processus en déroulement, toujours en évolution, que pilotent les membres du W3C (le World Wide Web Consortium).

On peut espérer que les nombreuses différences d'interprétation que nous subissons actuellement finiront par être réduites, sinon éliminées, mais évidemment il y a d'autres facteurs en jeu.

Le concept même de la lecture de pages Web sur un écran d'ordinateur est appelé à changer. On peut déjà voir des pages Web sur des machines qui ne sont pas des ordinateurs, et du contenu transmis par le Web mais qui n'est pas visible par les navigateurs.

Et ce n'est pas fini !

Les entreprises s'acharnent à tenter d'identifier des moyens pour intégrer des fonctions d'interactivité à leurs produits ; les téléphones, les télévisions, les voitures, les réfrigérateurs, les fours à micro-ondes sont tous des cibles privilégiées. Au bout du compte, l'implant cérébral connecté au Web nous reliera tous ensemble, permettant ainsi à la race humaine de parvenir, pour la communication, au même niveau de perfection que les fourmis !

Avec les CSS, il importera peu de savoir sur quel support sera affiché le contenu. Elles s'adaptent déjà à une grande variété de types de médias, même si nous en utilisons essentiellement deux : « screen » et « print ».

Mais ce qui est à retenir de tout cela, c'est qu'il n'est pas question de se reposer sur ses lauriers, il faut soit avancer, soit renoncer.

J'arrive au terme de cette courte série « CSS : on reprend tout à zéro ! », et j'espère qu'elle vous aura donné l'envie d'en savoir davantage - et croyez-moi, il y en a encore beaucoup à savoir.

Voici une liste de quelques articles en anglais sur les CSS à lire sur WPDFD.

Turning the Tables
 Convertir en CSS des mises en page en tableaux

Style Sheets Without Tears
 Série en 3 parties sur des feuilles de style basiques

CSS - Browser Support
 Comment les navigateurs gèrent les CSS

Thinking Inside the Box
Les éléments de construction de base pour les CSS

Box of Tricks
 Des effets de « rollover » sans JavaScript

Scripting the Box
La puissance des CSS associées au Javascript

Drawing with CSS
Comment dessiner des graphiques simples grâce aux boîtes CSS

Film-strip Rollovers
 Une méthode simplifiée pour faire des « rollovers »

Dynamic CSS Animation
 Comment faire bouger vos divs


Reference CSS eng

Font Properties

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Color and Background Properties

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Text Properties

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Box Properties

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear

Classification Properties

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style

Units

  • Length Units
  • Percentage Units
  • Color Units
  • URLs